Skip to content

Commit 6194978

Browse files
rise-erpeldingrise-erpelding
committed
applied Airbnb styles
1 parent 2473d02 commit 6194978

File tree

6 files changed

+133
-101
lines changed

6 files changed

+133
-101
lines changed

‎src/components/App/App.jsx ‎src/components/App/App.js

File renamed without changes.

‎src/components/AppError/AppError.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable react/destructuring-assignment */
12
import React, { Component } from 'react';
23

34
class AppError extends Component {
@@ -8,12 +9,13 @@ class AppError extends Component {
89
};
910
}
1011

11-
static getDerivedStateFromError(error) {
12+
static getDerivedStateFromError() {
1213
return { hasError: true };
1314
}
1415

1516
render() {
16-
if (this.state.hasError) {
17+
const { hasError } = this.state;
18+
if (hasError) {
1719
return (
1820
<h2 className="AppError">
1921
Oops! Something went wrong. Please refresh the page or try again later.
@@ -24,4 +26,4 @@ class AppError extends Component {
2426
}
2527
}
2628

27-
export default AppError;
29+
export default AppError;

‎src/components/DemoLoginInfo/DemoLoginInfo.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import './DemoLoginInfo.css';
55

66
export default function Hero() {
77
return (
8-
<div className='demo-login-info'>
8+
<div className="demo-login-info">
99
<h3>Demo login info:</h3>
1010
<p>Username: consumer1</p>
1111
<p>Password: password</p>

‎src/components/Dropdown/Dropdown.js

+38-29
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,44 @@
1-
import React, { Component } from 'react'
2-
import FarmContext from '../../contexts/FarmContext'
3-
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
4-
import './Dropdown.css'
1+
import React, { Component } from 'react';
2+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3+
import FarmContext from '../../contexts/FarmContext';
4+
import './Dropdown.css';
55

66
class Dropdown extends Component {
7-
static defaultProps = {
8-
products: [],
9-
purchaseOptions: [],
10-
onChangePage: () => {}
7+
handleProductClick = (clickedThing) => {
8+
const formattedQuery = `?products=${clickedThing}`;
9+
const { getFarms } = this.context;
10+
const { onChangePage } = this.props;
11+
getFarms(formattedQuery);
12+
onChangePage();
1113
}
1214

13-
static contextType = FarmContext
14-
15-
handleProductClick = clickedThing => {
16-
const formattedQuery = '?products=' + clickedThing
17-
this.context.getFarms(formattedQuery)
18-
this.props.onChangePage()
19-
}
20-
21-
handlePurchaseOptionClick = clickedThing => {
22-
const formattedQuery = '?purchaseOptions=' + clickedThing
23-
this.context.getFarms(formattedQuery)
24-
this.props.onChangePage()
15+
handlePurchaseOptionClick = (clickedThing) => {
16+
const formattedQuery = `?purchaseOptions=${clickedThing}`;
17+
const { getFarms } = this.context;
18+
const { onChangePage } = this.props;
19+
getFarms(formattedQuery);
20+
onChangePage();
2521
}
2622

2723
handleSeeAllClick = () => {
28-
this.context.getFarms('')
29-
this.props.onChangePage()
24+
const { getFarms } = this.context;
25+
const { onChangePage } = this.props;
26+
getFarms('');
27+
onChangePage();
3028
}
3129

3230
render() {
33-
const productsList = this.context.products.map((product, index) =>
34-
<li key={index} onClick={() => this.handleProductClick(product)}>{product}</li>)
35-
const purchaseOptionsList = this.context.purchaseOptions.map((purchaseOption, index) =>
36-
<li key={index} onClick={() => this.handlePurchaseOptionClick(purchaseOption)}>{purchaseOption}</li>)
31+
const { products } = this.context;
32+
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>);
3735

3836
return (
3937
<div className="dropdown">
40-
<button className="dropdown__button">See Categories <FontAwesomeIcon icon='caret-down' /></button>
38+
<button type="button" className="dropdown__button">
39+
See Categories
40+
<FontAwesomeIcon icon="caret-down" />
41+
</button>
4142
<div className="dropdown__content">
4243
<h5>Products</h5>
4344
<ul className="dropdown__products">
@@ -51,8 +52,16 @@ class Dropdown extends Component {
5152
</div>
5253
</div>
5354

54-
)
55+
);
5556
}
5657
}
5758

58-
export default Dropdown
59+
export default Dropdown;
60+
61+
Dropdown.defaultProps = {
62+
products: [],
63+
purchaseOptions: [],
64+
onChangePage: () => {},
65+
};
66+
67+
Dropdown.contextType = FarmContext;

‎src/components/FilterModal/FilterModal.js

+71-58
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,129 @@
1-
import React, { Component } from 'react'
2-
import FarmContext from '../../contexts/FarmContext'
3-
import './FilterModal.css'
1+
/* eslint-disable react/no-array-index-key */
2+
import React, { Component } from 'react';
3+
import FarmContext from '../../contexts/FarmContext';
4+
import './FilterModal.css';
45

56

67
class FilterModal extends Component {
7-
static defaultProps = {
8-
onUpdateProducts: () => {},
9-
onUpdatePurchaseOptions: () => {},
8+
constructor(props) {
9+
super(props);
10+
this.state = {
11+
products: [],
12+
purchaseOptions: [],
13+
};
1014
}
1115

12-
static contextType = FarmContext
13-
14-
state = {
15-
products: [],
16-
purchaseOptions: []
17-
}
18-
19-
onUpdateProducts = e => {
20-
const productsArray = this.state.products
16+
onUpdateProducts = (e) => {
17+
const { products } = this.state;
18+
const productsArray = products;
2119
if (e.target.checked) {
22-
productsArray.push(e.target.value)
23-
this.setState({ products: productsArray })
20+
productsArray.push(e.target.value);
21+
this.setState({ products: productsArray });
2422
} else if (!e.target.checked) {
25-
const removedProducts = productsArray.filter(product => product !== e.target.value)
26-
this.setState({ products: removedProducts })
23+
const removedProducts = productsArray.filter(
24+
(product) => product !== e.target.value,
25+
);
26+
this.setState({ products: removedProducts });
2727
}
28-
2928
}
3029

31-
onUpdatePurchaseOptions = e => {
32-
const purchaseOptionsArray = this.state.purchaseOptions
30+
onUpdatePurchaseOptions = (e) => {
31+
const { purchaseOptions } = this.state;
32+
const purchaseOptionsArray = purchaseOptions;
3333
if (e.target.checked) {
34-
purchaseOptionsArray.push(e.target.value)
35-
this.setState({ purchaseOptions: purchaseOptionsArray })
34+
purchaseOptionsArray.push(e.target.value);
35+
this.setState({ purchaseOptions: purchaseOptionsArray });
3636
} else if (!e.target.checked) {
37-
const removedPurchaseOptions = purchaseOptionsArray.filter(option => option !== e.target.value)
38-
this.setState({ purchaseOptions: removedPurchaseOptions })
37+
const removedPurchaseOptions = purchaseOptionsArray.filter(
38+
(option) => option !== e.target.value,
39+
);
40+
this.setState({ purchaseOptions: removedPurchaseOptions });
3941
}
40-
4142
}
4243

43-
handleSubmit = e => {
44-
e.preventDefault()
45-
this.props.onUpdateOptions(this.state.products, this.state.purchaseOptions)
46-
this.props.handleClose()
44+
handleSubmit = (e) => {
45+
e.preventDefault();
46+
const { onUpdateOptions, handleClose } = this.props;
47+
const { products, purchaseOptions } = this.state;
48+
onUpdateOptions(products, purchaseOptions);
49+
handleClose();
4750
}
4851

49-
render () {
50-
const showHideClassName = this.props.show ? 'filter-modal display-block' : 'filter-modal display-none'
52+
render() {
53+
const { show, handleClose } = this.props;
54+
const showHideClassName = show ? 'filter-modal display-block' : 'filter-modal display-none';
5155

52-
const { products } = this.context
53-
const { purchaseOptions } = this.context
56+
const { products, purchaseOptions } = this.context;
5457

55-
const productCheckboxes = products.map((product, index) =>
58+
const productCheckboxes = products.map((product, index) => (
5659
<li key={index}>
57-
<label className='filter-modal__checkbox--label' htmlFor={'product' + index}>
58-
<input
59-
type='checkbox'
60-
id={'product' + index}
61-
name={'product' + index}
60+
<label className="filter-modal__checkbox--label" htmlFor={`product${index}`}>
61+
<input
62+
type="checkbox"
63+
id={`product${index}`}
64+
name={`product${index}`}
6265
value={product}
63-
onChange={this.onUpdateProducts.bind(this)} />
64-
<span className='filter-modal__checkbox--custom'></span>
66+
onChange={this.onUpdateProducts.bind(this)}
67+
/>
68+
<span className="filter-modal__checkbox--custom" />
6569
{product}
6670
</label>
67-
</li>)
71+
</li>
72+
));
6873

69-
const purchaseOptionCheckboxes = purchaseOptions.map((purchaseOption, index) =>
74+
const purchaseOptionCheckboxes = purchaseOptions.map((purchaseOption, index) => (
7075
<li key={index}>
71-
<label className='filter-modal__checkbox--label' htmlFor={'purchaseOption' + index}>
76+
<label className="filter-modal__checkbox--label" htmlFor={`purchaseOption${index}`}>
7277
<input
73-
type='checkbox'
74-
id={'purchaseOption' + index}
75-
name={'purchaseOption' + index}
78+
type="checkbox"
79+
id={`purchaseOption${index}`}
80+
name={`purchaseOption${index}`}
7681
value={purchaseOption}
7782
onChange={this.onUpdatePurchaseOptions.bind(this)} />
78-
<span className='filter-modal__checkbox--custom'></span>
83+
<span className="filter-modal__checkbox--custom" />
7984
{purchaseOption}
8085
</label>
81-
</li>)
86+
</li>
87+
));
8288

8389
return (
8490
<div className={showHideClassName}>
85-
<div className='filter-modal__main'>
91+
<div className="filter-modal__main">
8692
<form onSubmit={this.handleSubmit}>
8793
<div>
8894
<div>
8995
Filter by product type:
9096
</div>
91-
<ul className='filter-modal__products'>
97+
<ul className="filter-modal__products">
9298
{productCheckboxes}
9399
</ul>
94100
</div>
95101
<div>
96102
<div>
97103
Filter by purchase option:
98104
</div>
99-
<ul className='filter-modal__purchase-options'>
105+
<ul className="filter-modal__purchase-options">
100106
{purchaseOptionCheckboxes}
101107
</ul>
102108
</div>
103-
<button type='button' onClick={this.props.handleClose}>
109+
<button type="button" onClick={handleClose}>
104110
Close
105111
</button>
106-
<button type='submit'>
112+
<button type="submit">
107113
Filter
108114
</button>
109115
</form>
110116
</div>
111117
</div>
112-
)
118+
);
113119
}
114120
}
115121

116-
export default FilterModal
122+
export default FilterModal;
123+
124+
FilterModal.defaultProps = {
125+
onUpdateProducts: () => {},
126+
onUpdatePurchaseOptions: () => {},
127+
};
128+
129+
FilterModal.contextType = FarmContext;

‎src/index.js

+18-10
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
import { BrowserRouter} from 'react-router-dom';
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'
7-
import App from './components/App/App.jsx';
8-
import AppError from '../src/components/AppError/AppError'
3+
import { BrowserRouter } from 'react-router-dom';
4+
import { library } from '@fortawesome/fontawesome-svg-core';
5+
import {
6+
faSearch,
7+
faHeart as faHeartSolid,
8+
faChevronLeft,
9+
faCaretDown,
10+
faFilter,
11+
faUser,
12+
} from '@fortawesome/free-solid-svg-icons';
13+
import { faHeart as faHeartRegular } from '@fortawesome/free-regular-svg-icons';
14+
import App from './components/App/App';
15+
import AppError from './components/AppError/AppError';
916
import './index.css';
1017

1118
library.add(
@@ -15,13 +22,14 @@ library.add(
1522
faChevronLeft,
1623
faCaretDown,
1724
faFilter,
18-
faUser
19-
)
25+
faUser,
26+
);
2027

2128
ReactDOM.render(
2229
<AppError>
2330
<BrowserRouter>
2431
<App />
2532
</BrowserRouter>
26-
</AppError>,
27-
document.getElementById('root'));
33+
</AppError>,
34+
document.getElementById('root'),
35+
);

0 commit comments

Comments
 (0)