Skip to content

Commit 42660ca

Browse files
rise-erpeldingrise-erpelding
committed
applied AirBnb styles
1 parent 6194978 commit 42660ca

31 files changed

+562
-380
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"@testing-library/react": "^9.3.2",
1212
"@testing-library/user-event": "^7.1.2",
1313
"history": "^4.10.1",
14+
"prop-types": "^15.7.2",
1415
"react": "^16.13.1",
1516
"react-dom": "^16.13.1",
1617
"react-router-dom": "^5.2.0",

‎src/components/App/App.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,7 @@ class App extends Component {
4343

4444
setFarms = (farms) => {
4545
this.setState({
46-
// eslint-disable-next-line object-shorthand
47-
farms: farms,
46+
farms,
4847
filteredFarms: farms,
4948
});
5049

@@ -188,6 +187,7 @@ class App extends Component {
188187
farmAdded,
189188
isLoggedIn,
190189
} = this.state;
190+
191191
const contextValue = {
192192
farms,
193193
filteredFarms,

‎src/components/App/App.test.js

+16-8
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
1+
/* eslint-disable no-undef */
12
import React from 'react';
23
import ReactDOM from 'react-dom';
3-
import { BrowserRouter } from 'react-router-dom'
4-
import AppError from '../AppError/AppError';
4+
import { BrowserRouter } from 'react-router-dom';
5+
import { library } from '@fortawesome/fontawesome-svg-core';
6+
import {
7+
faSearch,
8+
faHeart as faHeartSolid,
9+
faChevronLeft,
10+
faCaretDown,
11+
faFilter,
12+
faUser,
13+
} from '@fortawesome/free-solid-svg-icons';
14+
import { faHeart as faHeartRegular } from '@fortawesome/free-regular-svg-icons';
515
import App from './App';
6-
import { library } from '@fortawesome/fontawesome-svg-core'
7-
import { faSearch, faHeart as faHeartSolid, faChevronLeft, faCaretDown, faFilter, faUser } from '@fortawesome/free-solid-svg-icons'
8-
import { faHeart as faHeartRegular } from '@fortawesome/free-regular-svg-icons'
16+
import AppError from '../AppError/AppError';
917

1018
library.add(
1119
faSearch,
@@ -14,8 +22,8 @@ library.add(
1422
faChevronLeft,
1523
faCaretDown,
1624
faFilter,
17-
faUser
18-
)
25+
faUser,
26+
);
1927

2028
it('renders without crashing', () => {
2129
const div = document.createElement('div');
@@ -25,7 +33,7 @@ it('renders without crashing', () => {
2533
<App />
2634
</BrowserRouter>
2735
</AppError>,
28-
div
36+
div,
2937
);
3038
ReactDOM.unmountComponentAtNode(div);
3139
});

‎src/components/AppError/AppError.js

+9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/* eslint-disable react/destructuring-assignment */
22
import React, { Component } from 'react';
3+
import PropTypes from 'prop-types';
34

45
class AppError extends Component {
56
constructor(props) {
@@ -27,3 +28,11 @@ class AppError extends Component {
2728
}
2829

2930
export default AppError;
31+
32+
AppError.defaultProps = {
33+
children: '',
34+
};
35+
36+
AppError.propTypes = {
37+
children: PropTypes.string,
38+
};

‎src/components/Dropdown/Dropdown.js

+27-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1+
/* eslint-disable jsx-a11y/click-events-have-key-events */
2+
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
13
import React, { Component } from 'react';
24
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
5+
import PropTypes from 'prop-types';
36
import FarmContext from '../../contexts/FarmContext';
47
import './Dropdown.css';
58

@@ -30,8 +33,26 @@ class Dropdown extends Component {
3033
render() {
3134
const { products } = this.context;
3235
const { purchaseOptions } = this.context;
33-
const productsList = products.map((product, index) => <li key={index} onClick={() => this.handleProductClick(product)}>{product}</li>);
34-
const purchaseOptionsList = purchaseOptions.map((purchaseOption, index) => <li key={index} onClick={() => this.handlePurchaseOptionClick(purchaseOption)}>{purchaseOption}</li>);
36+
const productsList = products.map(
37+
(product, index) => (
38+
<li
39+
key={index}
40+
onClick={() => this.handleProductClick(product)}
41+
>
42+
{product}
43+
</li>
44+
),
45+
);
46+
const purchaseOptionsList = purchaseOptions.map(
47+
(purchaseOption, index) => (
48+
<li
49+
key={index}
50+
onClick={() => this.handlePurchaseOptionClick(purchaseOption)}
51+
>
52+
{purchaseOption}
53+
</li>
54+
),
55+
);
3556

3657
return (
3758
<div className="dropdown">
@@ -59,9 +80,11 @@ class Dropdown extends Component {
5980
export default Dropdown;
6081

6182
Dropdown.defaultProps = {
62-
products: [],
63-
purchaseOptions: [],
6483
onChangePage: () => {},
6584
};
6685

86+
Dropdown.propTypes = {
87+
onChangePage: PropTypes.func,
88+
};
89+
6790
Dropdown.contextType = FarmContext;

‎src/components/Dropdown/Dropdown.test.js

+8-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1+
/* eslint-disable no-undef */
12
import React from 'react';
23
import ReactDOM from 'react-dom';
4+
import { library } from '@fortawesome/fontawesome-svg-core';
5+
import {
6+
faSearch, faHeart as faHeartSolid, faChevronLeft, faCaretDown, faFilter, faUser,
7+
} from '@fortawesome/free-solid-svg-icons';
8+
import { faHeart as faHeartRegular } from '@fortawesome/free-regular-svg-icons';
39
import Dropdown from './Dropdown';
4-
import { library } from '@fortawesome/fontawesome-svg-core'
5-
import { faSearch, faHeart as faHeartSolid, faChevronLeft, faCaretDown, faFilter, faUser } from '@fortawesome/free-solid-svg-icons'
6-
import { faHeart as faHeartRegular } from '@fortawesome/free-regular-svg-icons'
710

811
library.add(
912
faSearch,
@@ -12,8 +15,8 @@ library.add(
1215
faChevronLeft,
1316
faCaretDown,
1417
faFilter,
15-
faUser
16-
)
18+
faUser,
19+
);
1720

1821
it('renders without crashing', () => {
1922
const div = document.createElement('div');

‎src/components/FarmListItem/FarmListItem.js

+29-11
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,37 @@
11
import React from 'react';
22
import { Link } from 'react-router-dom';
3+
import PropTypes from 'prop-types';
34
import FarmerAvatar from '../../Images/FarmerAvatar.png';
45
import './FarmListItem.css';
56

67
export default function FarmListItem(props) {
7-
const farm = props.info;
8-
const profile = farm.profile_image ? farm.profile_image : FarmerAvatar;
8+
const { info } = props;
9+
const {
10+
id,
11+
farm_name: farmName,
12+
products,
13+
profile_image: profileImage,
14+
} = info;
15+
const profile = profileImage || FarmerAvatar;
916
return (
1017
<div className="farm-list-item">
1118
<div className="farm-list-item__img--container">
12-
<Link to={`/farms/${farm.id}`}>
13-
<img
14-
className="farm-list-item__img"
15-
src={profile}
16-
alt="farm avatar" />
19+
<Link to={`/farms/${id}`}>
20+
<img
21+
className="farm-list-item__img"
22+
src={profile}
23+
alt="farm avatar"
24+
/>
1725
</Link>
1826
</div>
1927
<div className="farm-list-item__info--container">
2028
<h4 className="farm-list-item__title">
21-
<Link to={`/farms/${farm.id}`}>
22-
{farm.farm_name}
29+
<Link to={`/farms/${id}`}>
30+
{farmName}
2331
</Link>
2432
</h4>
2533
<div className="farm-list-item__products">
26-
{farm.products.join(', ')}
34+
{products.join(', ')}
2735
</div>
2836
</div>
2937
</div>
@@ -36,6 +44,16 @@ FarmListItem.defaultProps = {
3644
profile_image: '',
3745
farm_name: '',
3846
products: [],
39-
id: '',
47+
id: 0,
4048
},
4149
};
50+
51+
FarmListItem.propTypes = {
52+
info: PropTypes.shape({
53+
farm_description: PropTypes.string,
54+
profile_image: PropTypes.string,
55+
farm_name: PropTypes.string,
56+
products: PropTypes.array,
57+
id: PropTypes.number,
58+
}),
59+
};

‎src/components/FarmListItem/FarmListItem.test.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1+
/* eslint-disable no-undef */
12
import React from 'react';
23
import ReactDOM from 'react-dom';
4+
import { BrowserRouter } from 'react-router-dom';
35
import FarmListItem from './FarmListItem';
4-
import { BrowserRouter } from 'react-router-dom'
56

67
it('renders without crashing', () => {
78
const div = document.createElement('div');
89
ReactDOM.render(
910
<BrowserRouter>
1011
<FarmListItem />
11-
</BrowserRouter>
12-
, div);
12+
</BrowserRouter>,
13+
div,
14+
);
1315
ReactDOM.unmountComponentAtNode(div);
1416
});

‎src/components/FilterModal/FilterModal.js

+12-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
/* eslint-disable react/no-array-index-key */
21
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
33
import FarmContext from '../../contexts/FarmContext';
44
import './FilterModal.css';
55

6-
76
class FilterModal extends Component {
87
constructor(props) {
98
super(props);
@@ -79,7 +78,8 @@ class FilterModal extends Component {
7978
id={`purchaseOption${index}`}
8079
name={`purchaseOption${index}`}
8180
value={purchaseOption}
82-
onChange={this.onUpdatePurchaseOptions.bind(this)} />
81+
onChange={this.onUpdatePurchaseOptions.bind(this)}
82+
/>
8383
<span className="filter-modal__checkbox--custom" />
8484
{purchaseOption}
8585
</label>
@@ -122,8 +122,15 @@ class FilterModal extends Component {
122122
export default FilterModal;
123123

124124
FilterModal.defaultProps = {
125-
onUpdateProducts: () => {},
126-
onUpdatePurchaseOptions: () => {},
125+
show: false,
126+
handleClose: () => {},
127+
onUpdateOptions: () => {},
127128
};
128129

129130
FilterModal.contextType = FarmContext;
131+
132+
FilterModal.propTypes = {
133+
show: PropTypes.bool,
134+
handleClose: PropTypes.func,
135+
onUpdateOptions: PropTypes.func,
136+
};

‎src/components/FilterModal/FilterModal.test.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable no-undef */
12
import React from 'react';
23
import ReactDOM from 'react-dom';
34
import FilterModal from './FilterModal';

‎src/components/FormFieldExplanation/FormFieldExplanation.js

+14-8
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
11
import React from 'react';
2-
import './FormFieldExplanation.css'
2+
import PropTypes from 'prop-types';
3+
import './FormFieldExplanation.css';
34

45
const FormFieldExplanation = (props) => {
5-
return (
6-
<div className='form-field-explanation'>
7-
{props.message}
6+
const { message } = props;
7+
return (
8+
<div className="form-field-explanation">
9+
{message}
810
</div>
9-
)
10-
}
11+
);
12+
};
1113

1214
export default FormFieldExplanation;
1315

1416
FormFieldExplanation.defaultProps = {
15-
message: ''
16-
}
17+
message: '',
18+
};
19+
20+
FormFieldExplanation.propTypes = {
21+
message: PropTypes.string,
22+
};

‎src/components/FormFieldExplanation/FormFieldExplanation.test.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable no-undef */
12
import React from 'react';
23
import ReactDOM from 'react-dom';
34
import FormFieldExplanation from './FormFieldExplanation';

‎src/components/Hero/Hero.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import React from 'react'
2-
import './Hero.css'
1+
import React from 'react';
2+
import './Hero.css';
33

44
export default function Hero() {
55
return (
6-
<div className='hero'>
6+
<div className="hero">
77
<h1>FarmPicks</h1>
88
<p>From small farms to you.</p>
99
</div>
10-
)
10+
);
1111
}

‎src/components/Hero/Hero.test.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable no-undef */
12
import React from 'react';
23
import ReactDOM from 'react-dom';
34
import Hero from './Hero';

0 commit comments

Comments
 (0)