Skip to content

Commit d9768dc

Browse files
author
Soc Sieng
committedJun 12, 2020
style: add eslint and prettier
1 parent 856a7a3 commit d9768dc

23 files changed

+637
-273
lines changed
 

‎.env

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
SKIP_PREFLIGHT_CHECK=true

‎.eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
build/

‎.eslintrc

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"parser": "@typescript-eslint/parser",
3+
"parserOptions": {
4+
"ecmaVersion": 2020,
5+
"sourceType": "module",
6+
"ecmaFeatures": {
7+
"jsx": true
8+
}
9+
},
10+
"extends": [
11+
"react-app",
12+
"prettier/@typescript-eslint",
13+
"plugin:prettier/recommended"
14+
],
15+
"rules": {
16+
"@typescript-eslint/no-empty-function": "off",
17+
"@typescript-eslint/no-explicit-any": "off",
18+
"comma-dangle": ["error", "only-multiline"],
19+
"quote-props": ["error", "consistent"],
20+
"semi": "error",
21+
"sort-imports": "error"
22+
},
23+
"settings": {
24+
"react": {
25+
"version": "detect"
26+
}
27+
},
28+
"env": {
29+
"browser": true,
30+
"node": true
31+
}
32+
}

‎.prettierrc.yml

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Copyright 2020 Google LLC
2+
#
3+
# Licensed under the Apache License, Version 2.0 (the "License");
4+
# you may not use this file except in compliance with the License.
5+
# You may obtain a copy of the License at
6+
#
7+
# http://www.apache.org/licenses/LICENSE-2.0
8+
#
9+
# Unless required by applicable law or agreed to in writing, software
10+
# distributed under the License is distributed on an "AS IS" BASIS,
11+
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
# See the License for the specific language governing permissions and
13+
# limitations under the License.
14+
15+
arrowParens: avoid
16+
printWidth: 120
17+
quoteProps: consistent
18+
semi: true
19+
singleQuote: true
20+
tabWidth: 2
21+
trailingComma: all

‎.vscode/settings.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"editor.codeActionsOnSave": {
3+
"source.fixAll.eslint": true
4+
}
5+
}

‎package-lock.json

+397-100
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+10-8
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,28 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@material-ui/core": "^4.9.14",
6+
"@material-ui/core": "^4.10.2",
77
"@material-ui/icons": "^4.9.1",
88
"@testing-library/jest-dom": "^4.2.4",
99
"@testing-library/react": "^9.5.0",
1010
"@testing-library/user-event": "^7.2.1",
1111
"@types/jest": "^24.9.1",
12-
"@types/node": "^12.12.39",
13-
"@types/react": "^16.9.35",
12+
"@types/node": "^12.12.47",
13+
"@types/react": "^16.9.36",
1414
"@types/react-dom": "^16.9.8",
1515
"react": "^16.13.1",
1616
"react-dom": "^16.13.1",
1717
"react-router-dom": "^5.2.0",
1818
"react-scripts": "3.4.1",
19-
"typescript": "^3.7.5"
19+
"typescript": "^3.9.5"
2020
},
2121
"scripts": {
22+
"lint": "eslint .",
2223
"start": "react-scripts start",
2324
"build": "react-scripts build",
2425
"test": "react-scripts test",
2526
"eject": "react-scripts eject"
2627
},
27-
"eslintConfig": {
28-
"extends": "react-app"
29-
},
3028
"browserslist": {
3129
"production": [
3230
">0.2%",
@@ -40,6 +38,10 @@
4038
]
4139
},
4240
"devDependencies": {
43-
"@types/react-router-dom": "^5.1.5"
41+
"@types/react-router-dom": "^5.1.5",
42+
"eslint": "^7.2.0",
43+
"eslint-config-prettier": "^6.11.0",
44+
"eslint-plugin-prettier": "^3.1.3",
45+
"prettier": "^2.0.5"
4446
}
4547
}

‎src/App.test.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@
1414
* limitations under the License.
1515
*/
1616

17+
import App from './App';
1718
import React from 'react';
1819
import { render } from '@testing-library/react';
19-
import App from './App';
2020

2121
test('renders learn react link', () => {
2222
const { getByText } = render(<App />);

‎src/App.tsx

+9-13
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,18 @@
1414
* limitations under the License.
1515
*/
1616

17-
import React, { useState, useEffect } from 'react';
18-
import {
19-
BrowserRouter as Router,
20-
Switch,
21-
Route,
22-
} from "react-router-dom";
23-
import Home from './Store/Home';
24-
import List from './Store/List';
25-
import ItemDetails from './Store/ItemDetails';
26-
import { StoreData, CategoryDetails, CartItemDetails } from './data/store-data';
27-
import { CartContext } from './Store/CartContext';
28-
import Header from './Store/Header';
17+
import './App.css';
18+
import { CartItemDetails, CategoryDetails, StoreData } from './data/store-data';
19+
import React, { useEffect, useState } from 'react';
20+
import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';
2921
import Cart from './Store/Cart';
22+
import { CartContext } from './Store/CartContext';
3023
import Checkout from './Store/Checkout';
3124
import Confirmation from './Store/Confirmation';
32-
import './App.css';
25+
import Header from './Store/Header';
26+
import Home from './Store/Home';
27+
import ItemDetails from './Store/ItemDetails';
28+
import List from './Store/List';
3329

3430
function App() {
3531
const storeData = new StoreData();

‎src/Store/Cart.tsx

+12-9
Original file line numberDiff line numberDiff line change
@@ -14,26 +14,27 @@
1414
* limitations under the License.
1515
*/
1616

17+
import './Cart.css';
18+
import { Button, Typography } from '@material-ui/core';
1719
import React, { useContext } from 'react';
1820
import { CartContext } from './CartContext';
19-
import { Typography, Button } from '@material-ui/core';
20-
import { StoreData } from '../data/store-data';
2121
import CartItem from './CartItem';
22-
import './Cart.css';
22+
import { StoreData } from '../data/store-data';
2323
import { useHistory } from 'react-router-dom';
2424

25-
interface Props {
26-
}
25+
interface Props {}
2726

28-
const Cart: React.FC<Props> = (props) => {
27+
const Cart: React.FC<Props> = props => {
2928
const { cart } = useContext(CartContext);
3029
const cartSize = StoreData.getCartSize(cart);
3130
const history = useHistory();
3231

3332
return (
3433
<div className="Cart">
3534
<Typography variant="h5">Your Cart</Typography>
36-
<Typography variant="body2" color="textSecondary">({cartSize} {cartSize === 1 ? 'item' : 'items'})</Typography>
35+
<Typography variant="body2" color="textSecondary">
36+
({cartSize} {cartSize === 1 ? 'item' : 'items'})
37+
</Typography>
3738
<div className="cart-items">
3839
{cart.map((item, index) => (
3940
<CartItem key={index} cartItem={item} />
@@ -46,10 +47,12 @@ const Cart: React.FC<Props> = (props) => {
4647
</span>
4748
</div>
4849
<div className="buttons">
49-
<Button variant="outlined" onClick={() => history.push('/checkout')}>Checkout</Button>
50+
<Button variant="outlined" onClick={() => history.push('/checkout')}>
51+
Checkout
52+
</Button>
5053
</div>
5154
</div>
5255
);
53-
}
56+
};
5457

5558
export default Cart;

‎src/Store/CartContext.ts

+2-4
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
* limitations under the License.
1515
*/
1616

17-
import React from 'react';
1817
import { CartItemDetails } from '../data/store-data';
18+
import React from 'react';
1919

2020
let cart: CartItemDetails[] = [];
2121

@@ -26,6 +26,4 @@ const CartContext = React.createContext({
2626
},
2727
});
2828

29-
export {
30-
CartContext,
31-
};
29+
export { CartContext };

‎src/Store/CartItem.tsx

+28-13
Original file line numberDiff line numberDiff line change
@@ -14,24 +14,25 @@
1414
* limitations under the License.
1515
*/
1616

17+
import './List.css';
18+
import { Card, CardContent, IconButton, InputLabel, MenuItem, Select, Typography } from '@material-ui/core';
1719
import React, { useContext } from 'react';
20+
import { CartContext } from './CartContext';
1821
import { CartItemDetails } from '../data/store-data';
19-
import { Card, CardContent, Typography, IconButton, InputLabel, Select, MenuItem } from '@material-ui/core';
2022
import { Close } from '@material-ui/icons';
21-
import './List.css';
22-
import { CartContext } from './CartContext';
2323
import { Link } from 'react-router-dom';
2424

2525
interface Props {
2626
cartItem: CartItemDetails;
2727
}
2828

29-
const CartItem: React.FC<Props> = (props) => {
29+
const CartItem: React.FC<Props> = props => {
3030
const { cart, setCart } = useContext(CartContext);
3131

3232
function handleQuantityChange(quantity: number) {
33-
const index = cart.findIndex(cartItem => cartItem.size === props.cartItem.size
34-
&& cartItem.item.name === props.cartItem.item.name);
33+
const index = cart.findIndex(
34+
cartItem => cartItem.size === props.cartItem.size && cartItem.item.name === props.cartItem.item.name,
35+
);
3536

3637
if (index !== -1) {
3738
const newCart = [...cart];
@@ -44,8 +45,9 @@ const CartItem: React.FC<Props> = (props) => {
4445
}
4546

4647
function handleRemoveClick() {
47-
const index = cart.findIndex(cartItem => cartItem.size === props.cartItem.size
48-
&& cartItem.item.name === props.cartItem.item.name);
48+
const index = cart.findIndex(
49+
cartItem => cartItem.size === props.cartItem.size && cartItem.item.name === props.cartItem.item.name,
50+
);
4951

5052
if (index !== -1) {
5153
const newCart = [...cart];
@@ -71,17 +73,30 @@ const CartItem: React.FC<Props> = (props) => {
7173
</IconButton>
7274
</div>
7375
<div className="second-row">
74-
<InputLabel className="label" id="quantityLabel">Qty</InputLabel>
75-
<Select className="input" labelId="quantityLabel" value={props.cartItem.quantity} onChange={event => handleQuantityChange(Number(event.target.value))}>
76-
{new Array<number>(100).fill(0).map((val, index) => (<MenuItem key={index} value={index + 1}>{index + 1}</MenuItem>))}
76+
<InputLabel className="label" id="quantityLabel">
77+
Qty
78+
</InputLabel>
79+
<Select
80+
className="input"
81+
labelId="quantityLabel"
82+
value={props.cartItem.quantity}
83+
onChange={event => handleQuantityChange(Number(event.target.value))}
84+
>
85+
{new Array<number>(100).fill(0).map((val, index) => (
86+
<MenuItem key={index} value={index + 1}>
87+
{index + 1}
88+
</MenuItem>
89+
))}
7790
</Select>
7891
<InputLabel className="label">Size</InputLabel>
7992
<InputLabel className="label">{props.cartItem.size}</InputLabel>
80-
<InputLabel className="label amount">${(props.cartItem.quantity * props.cartItem.item.price).toFixed(2)}</InputLabel>
93+
<InputLabel className="label amount">
94+
${(props.cartItem.quantity * props.cartItem.item.price).toFixed(2)}
95+
</InputLabel>
8196
</div>
8297
</CardContent>
8398
</Card>
8499
);
85-
}
100+
};
86101

87102
export default CartItem;

‎src/Store/Category.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@
1414
* limitations under the License.
1515
*/
1616

17-
import React from 'react';
18-
import { Link } from 'react-router-dom';
19-
import { Card, CardMedia, CardContent, Typography } from '@material-ui/core';
17+
import './Category.css';
18+
import { Card, CardContent, CardMedia, Typography } from '@material-ui/core';
2019
import { CategoryDetails } from '../data/store-data';
21-
import './Category.css'
20+
import { Link } from 'react-router-dom';
21+
import React from 'react';
2222

23-
const Category: React.FC<CategoryDetails> = (props) => {
23+
const Category: React.FC<CategoryDetails> = props => {
2424
return (
2525
<Link to={`/list/${props.name}`} className="category-link">
2626
<Card className="category-card" elevation={5}>
@@ -31,6 +31,6 @@ const Category: React.FC<CategoryDetails> = (props) => {
3131
</Card>
3232
</Link>
3333
);
34-
}
34+
};
3535

3636
export default Category;

‎src/Store/Checkout.tsx

+11-28
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,13 @@
1414
* limitations under the License.
1515
*/
1616

17+
import './Checkout.css';
18+
import { Button, Checkbox, FormControlLabel, Grid, TextField, Typography } from '@material-ui/core';
1719
import React, { useContext } from 'react';
18-
import { Typography, Grid, TextField, FormControlLabel, Checkbox, Button } from '@material-ui/core';
19-
import { useHistory } from 'react-router-dom';
2020
import { CartContext } from './CartContext';
21-
import './Checkout.css';
21+
import { useHistory } from 'react-router-dom';
2222

23-
interface Props {
24-
}
23+
interface Props {}
2524

2625
const Checkout: React.FC<Props> = () => {
2726
const history = useHistory();
@@ -129,31 +128,13 @@ const Checkout: React.FC<Props> = () => {
129128
</Typography>
130129
<Grid container spacing={3}>
131130
<Grid item xs={12} md={12}>
132-
<TextField
133-
required
134-
id="cardName"
135-
label="Name on card"
136-
fullWidth
137-
autoComplete="cc-name"
138-
/>
131+
<TextField required id="cardName" label="Name on card" fullWidth autoComplete="cc-name" />
139132
</Grid>
140133
<Grid item xs={12} md={12}>
141-
<TextField
142-
required
143-
id="cardNumber"
144-
label="Card number"
145-
fullWidth
146-
autoComplete="cc-number"
147-
/>
134+
<TextField required id="cardNumber" label="Card number" fullWidth autoComplete="cc-number" />
148135
</Grid>
149136
<Grid item xs={12} md={12}>
150-
<TextField
151-
required
152-
id="expDate"
153-
label="Expiry date"
154-
fullWidth
155-
autoComplete="cc-exp"
156-
/>
137+
<TextField required id="expDate" label="Expiry date" fullWidth autoComplete="cc-exp" />
157138
</Grid>
158139
<Grid item xs={12} md={12}>
159140
<TextField
@@ -176,10 +157,12 @@ const Checkout: React.FC<Props> = () => {
176157
</Grid>
177158
</Grid>
178159
<div className="buttons">
179-
<Button variant="outlined" onClick={handleCheckout}>Submit</Button>
160+
<Button variant="outlined" onClick={handleCheckout}>
161+
Submit
162+
</Button>
180163
</div>
181164
</div>
182165
);
183-
}
166+
};
184167

185168
export default Checkout;

‎src/Store/Confirmation.tsx

+8-7
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,14 @@
1414
* limitations under the License.
1515
*/
1616

17+
import './Status.css';
18+
import { Button, Typography } from '@material-ui/core';
1719
import React from 'react';
18-
import { Typography, Button } from '@material-ui/core';
1920
import { useHistory } from 'react-router-dom';
20-
import './Status.css';
2121

22-
interface Props {
23-
}
22+
interface Props {}
2423

25-
const Confirmation: React.FC<Props> = (props) => {
24+
const Confirmation: React.FC<Props> = props => {
2625
const history = useHistory();
2726

2827
return (
@@ -36,11 +35,13 @@ const Confirmation: React.FC<Props> = (props) => {
3635
<em>This is for demo purposes only. You have not been charged, the order is not being processed.</em>
3736
</Typography>
3837
<div className="buttons">
39-
<Button variant="text" onClick={() => history.push('/')}>Continue Shopping</Button>
38+
<Button variant="text" onClick={() => history.push('/')}>
39+
Continue Shopping
40+
</Button>
4041
</div>
4142
</div>
4243
</div>
4344
);
44-
}
45+
};
4546

4647
export default Confirmation;

‎src/Store/Header.tsx

+15-19
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,22 @@
1414
* limitations under the License.
1515
*/
1616

17-
import React, { useContext, useState, useEffect } from 'react';
18-
import { AppBar, Toolbar, IconButton, Typography, Badge, Menu, MenuItem } from '@material-ui/core';
19-
import { StoreData, CategoryDetails } from '../data/store-data';
20-
import { ShoppingCart, Menu as MenuIcon } from '@material-ui/icons';
21-
import { CartContext } from './CartContext';
22-
import { useHistory, Link } from 'react-router-dom';
2317
import './Header.css';
18+
import { AppBar, Badge, IconButton, Menu, MenuItem, Toolbar, Typography } from '@material-ui/core';
19+
import { CategoryDetails, StoreData } from '../data/store-data';
20+
import { Link, useHistory } from 'react-router-dom';
21+
import { Menu as MenuIcon, ShoppingCart } from '@material-ui/icons';
22+
import React, { useContext, useEffect, useState } from 'react';
23+
import { CartContext } from './CartContext';
2424

2525
export default function Header() {
2626
const storeData = new StoreData();
2727
const { cart } = useContext(CartContext);
28-
const [ anchorEl, setAnchorEl ] = useState<Element | null>(null);
28+
const [anchorEl, setAnchorEl] = useState<Element | null>(null);
2929
const [categories, setCategories] = useState([] as CategoryDetails[]);
3030

3131
const history = useHistory();
32-
32+
3333
useEffect(() => {
3434
storeData.getCategories().then(data => setCategories(data));
3535
}, [storeData]);
@@ -45,7 +45,7 @@ export default function Header() {
4545

4646
const handleMenuClose = () => {
4747
setAnchorEl(null);
48-
}
48+
};
4949

5050
const handleCartClick = (event: React.MouseEvent) => {
5151
history.push('/cart');
@@ -57,26 +57,22 @@ export default function Header() {
5757
<IconButton edge="start" color="inherit" aria-label="menu" onClick={handleMenuClick}>
5858
<MenuIcon />
5959
</IconButton>
60-
<Menu
61-
id="simple-menu"
62-
anchorEl={anchorEl}
63-
keepMounted
64-
open={Boolean(anchorEl)}
65-
onClose={handleMenuClose}
66-
>
60+
<Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleMenuClose}>
6761
{categories.map(cat => (
68-
<MenuItem key={cat.name} onClick={event => handleMenuItemClick(cat)}>{cat.title}</MenuItem>
62+
<MenuItem key={cat.name} onClick={event => handleMenuItemClick(cat)}>
63+
{cat.title}
64+
</MenuItem>
6965
))}
7066
</Menu>
7167
<Typography variant="h6" className="heading">
7268
<Link to="/">Shop</Link>
7369
</Typography>
74-
<IconButton edge="end" color="inherit" aria-label="shopping cart" onClick={handleCartClick}>
70+
<IconButton edge="end" color="inherit" aria-label="shopping cart" onClick={handleCartClick}>
7571
<Badge badgeContent={StoreData.getCartSize(cart)} color="secondary">
7672
<ShoppingCart />
7773
</Badge>
7874
</IconButton>
7975
</Toolbar>
8076
</AppBar>
8177
);
82-
}
78+
}

‎src/Store/Home.tsx

+8-6
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,23 @@
1414
* limitations under the License.
1515
*/
1616

17-
import React from 'react';
18-
import Category from './Category';
1917
import './Home.css';
18+
import Category from './Category';
2019
import { CategoryDetails } from '../data/store-data';
20+
import React from 'react';
2121

2222
interface Props {
23-
categories: CategoryDetails[],
23+
categories: CategoryDetails[];
2424
}
2525

26-
const Home: React.FC<Props> = (props) => {
26+
const Home: React.FC<Props> = props => {
2727
return (
2828
<div className="Home">
29-
{props.categories.map(cat => <Category key={cat.name} {...cat}/>)}
29+
{props.categories.map(cat => (
30+
<Category key={cat.name} {...cat} />
31+
))}
3032
</div>
3133
);
32-
}
34+
};
3335

3436
export default Home;

‎src/Store/ItemDetails.tsx

+31-14
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@
1414
* limitations under the License.
1515
*/
1616

17-
import React, { useState, useEffect, useContext } from 'react';
17+
import './ItemDetails.css';
18+
import { Button, Grid, InputLabel, MenuItem, Select, Snackbar, Typography } from '@material-ui/core';
1819
import { ItemDetails as Item, StoreData } from '../data/store-data';
19-
import { useParams, useHistory } from 'react-router-dom';
20-
import { Button, Typography, InputLabel, Select, MenuItem, Grid, Snackbar } from '@material-ui/core';
20+
import React, { useContext, useEffect, useState } from 'react';
21+
import { useHistory, useParams } from 'react-router-dom';
2122
import { CartContext } from './CartContext';
2223
import qs from 'querystring';
23-
import './ItemDetails.css';
2424

2525
function unescapeHtml(text: string) {
2626
const elem = document.createElement('textarea');
@@ -58,20 +58,28 @@ export default function ItemDetails() {
5858

5959
return (
6060
<div className="ItemDetails">
61-
{
62-
item &&
61+
{item && (
6362
<>
6463
<Grid container className="container">
6564
<Grid item xs={12} sm={5}>
6665
<img className="item-details-image" src={item.largeImage} alt={item.title} />
6766
</Grid>
6867
<Grid item xs={12} sm={6} className="content">
6968
<Typography variant="h5">{item.title}</Typography>
70-
<Typography variant="body1" color="textSecondary">${item.price.toFixed(2)}</Typography>
69+
<Typography variant="body1" color="textSecondary">
70+
${item.price.toFixed(2)}
71+
</Typography>
7172
<div className="pickers">
7273
<div className="field-set">
73-
<InputLabel className="label" id="sizeLabel">Size</InputLabel>
74-
<Select className="input" labelId="sizeLabel" value={size} onChange={event => setSize(event.target.value as string)}>
74+
<InputLabel className="label" id="sizeLabel">
75+
Size
76+
</InputLabel>
77+
<Select
78+
className="input"
79+
labelId="sizeLabel"
80+
value={size}
81+
onChange={event => setSize(event.target.value as string)}
82+
>
7583
<MenuItem value="XS">XS</MenuItem>
7684
<MenuItem value="S">S</MenuItem>
7785
<MenuItem value="M">M</MenuItem>
@@ -80,8 +88,15 @@ export default function ItemDetails() {
8088
</Select>
8189
</div>
8290
<div className="field-set">
83-
<InputLabel className="label" id="quantityLabel">Quantity</InputLabel>
84-
<Select className="input" labelId="quantityLabel" value={quantity} onChange={event => setQuantity(Number(event.target.value))}>
91+
<InputLabel className="label" id="quantityLabel">
92+
Quantity
93+
</InputLabel>
94+
<Select
95+
className="input"
96+
labelId="quantityLabel"
97+
value={quantity}
98+
onChange={event => setQuantity(Number(event.target.value))}
99+
>
85100
<MenuItem value="1">1</MenuItem>
86101
<MenuItem value="2">2</MenuItem>
87102
<MenuItem value="3">3</MenuItem>
@@ -97,7 +112,9 @@ export default function ItemDetails() {
97112
</Typography>
98113
</div>
99114
<div className="buttons">
100-
<Button variant="outlined" onClick={addToCart}>Add to Cart</Button>
115+
<Button variant="outlined" onClick={addToCart}>
116+
Add to Cart
117+
</Button>
101118
</div>
102119
</Grid>
103120
</Grid>
@@ -107,7 +124,7 @@ export default function ItemDetails() {
107124
}}
108125
open={snackOpen}
109126
autoHideDuration={5000}
110-
anchorOrigin={{vertical: 'bottom', horizontal: 'center'}}
127+
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
111128
onClose={handleSnackClose}
112129
message={`${item.title} added to cart.`}
113130
action={
@@ -119,7 +136,7 @@ export default function ItemDetails() {
119136
}
120137
/>
121138
</>
122-
}
139+
)}
123140
</div>
124141
);
125142
}

‎src/Store/List.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -14,23 +14,23 @@
1414
* limitations under the License.
1515
*/
1616

17-
import React, { useState, useEffect } from 'react';
18-
import { useParams } from 'react-router-dom';
19-
import { ItemDetails, StoreData, CategoryDetails } from '../data/store-data';
17+
import { CategoryDetails, ItemDetails, StoreData } from '../data/store-data';
18+
import React, { useEffect, useState } from 'react';
2019
import ListItem from './ListItem';
20+
import { useParams } from 'react-router-dom';
2121

2222
interface Props {
23-
categories: CategoryDetails[],
23+
categories: CategoryDetails[];
2424
}
2525

26-
const List: React.FC<Props> = (props) => {
26+
const List: React.FC<Props> = props => {
2727
const storeData = new StoreData();
2828
const [items, setItems] = useState([] as ItemDetails[]);
2929
const [category, setCategory] = useState<CategoryDetails>();
30-
const params = useParams<{listId: string}>();
30+
const params = useParams<{ listId: string }>();
3131

3232
useEffect(() => {
33-
setCategory(props.categories.find(cat => cat.name === params.listId))
33+
setCategory(props.categories.find(cat => cat.name === params.listId));
3434
}, [params.listId, props.categories]);
3535

3636
useEffect(() => {
@@ -45,6 +45,6 @@ const List: React.FC<Props> = (props) => {
4545
))}
4646
</div>
4747
);
48-
}
48+
};
4949

5050
export default List;

‎src/Store/ListItem.tsx

+13-9
Original file line numberDiff line numberDiff line change
@@ -14,30 +14,34 @@
1414
* limitations under the License.
1515
*/
1616

17-
import React from 'react';
17+
import './List.css';
18+
import { Card, CardContent, CardMedia, Typography } from '@material-ui/core';
1819
import { Link, useParams } from 'react-router-dom';
1920
import { ItemDetails } from '../data/store-data';
20-
import { Card, CardMedia, CardContent, Typography } from '@material-ui/core';
21-
import './List.css';
21+
import React from 'react';
2222

2323
interface Props {
2424
item: ItemDetails;
2525
}
2626

27-
const ListItem: React.FC<Props> = (props) => {
28-
const params = useParams<{listId: string}>();
29-
27+
const ListItem: React.FC<Props> = props => {
28+
const params = useParams<{ listId: string }>();
29+
3030
return (
3131
<Link to={`/list/${params.listId}/${props.item.name}`} className="list-item-link">
3232
<Card className="list-item-card" elevation={3}>
3333
<CardMedia image={props.item.image} title={props.item.title} className="list-item-image" />
3434
<CardContent className="list-item-content">
35-
<Typography component="div" className="title">{props.item.title}</Typography>
36-
<Typography variant="body2" color="textSecondary" component="div">${props.item.price.toFixed(2)}</Typography>
35+
<Typography component="div" className="title">
36+
{props.item.title}
37+
</Typography>
38+
<Typography variant="body2" color="textSecondary" component="div">
39+
${props.item.price.toFixed(2)}
40+
</Typography>
3741
</CardContent>
3842
</Card>
3943
</Link>
4044
);
41-
}
45+
};
4246

4347
export default ListItem;

‎src/data/store-data.ts

+7-7
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { StorageProvider } from "./storage-provider";
17+
import { StorageProvider } from './storage-provider';
1818

1919
export interface CategoryDetails {
2020
name: string;
@@ -41,24 +41,24 @@ export interface CartItemDetails {
4141
const categories: CategoryDetails[] = [
4242
{
4343
name: 'mens_outerwear',
44-
title: 'Men\'s Outerwear',
44+
title: "Men's Outerwear",
4545
image: '/images/mens_outerwear.jpg',
4646
},
4747
{
4848
name: 'ladies_outerwear',
49-
title: 'Lady\'s Outerwear',
49+
title: "Lady's Outerwear",
5050
image: '/images/ladies_outerwear.jpg',
5151
},
5252
{
5353
name: 'mens_tshirts',
54-
title: 'Men\'s T-Shirts',
54+
title: "Men's T-Shirts",
5555
image: '/images/mens_tshirts.jpg',
5656
},
5757
{
5858
name: 'ladies_tshirts',
59-
title: 'Lady\'s T-Shirts',
59+
title: "Lady's T-Shirts",
6060
image: '/images/ladies_tshirts.jpg',
61-
}
61+
},
6262
];
6363

6464
const itemCache = new Map<string, Promise<ItemDetails[]>>();
@@ -120,4 +120,4 @@ export class StoreData {
120120
static getCartSize(cart: CartItemDetails[]): number {
121121
return cart.reduce((total, current) => total + current.quantity, 0);
122122
}
123-
}
123+
}

‎src/index.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,17 @@
1414
* limitations under the License.
1515
*/
1616

17-
import React from 'react';
18-
import ReactDOM from 'react-dom';
1917
import './index.css';
20-
import App from './App';
2118
import * as serviceWorker from './serviceWorker';
19+
import App from './App';
20+
import React from 'react';
21+
import ReactDOM from 'react-dom';
2222

2323
ReactDOM.render(
2424
<React.StrictMode>
2525
<App />
2626
</React.StrictMode>,
27-
document.getElementById('root')
27+
document.getElementById('root'),
2828
);
2929

3030
// If you want your app to work offline and load faster, you can change

‎src/serviceWorker.ts

+7-17
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,7 @@ const isLocalhost = Boolean(
3131
// [::1] is the IPv6 localhost address.
3232
window.location.hostname === '[::1]' ||
3333
// 127.0.0.0/8 are considered localhost for IPv4.
34-
window.location.hostname.match(
35-
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
36-
)
34+
window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/),
3735
);
3836

3937
type Config = {
@@ -44,10 +42,7 @@ type Config = {
4442
export function register(config?: Config) {
4543
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
4644
// The URL constructor is available in all browsers that support SW.
47-
const publicUrl = new URL(
48-
process.env.PUBLIC_URL,
49-
window.location.href
50-
);
45+
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
5146
if (publicUrl.origin !== window.location.origin) {
5247
// Our service worker won't work if PUBLIC_URL is on a different origin
5348
// from what our page is served on. This might happen if a CDN is used to
@@ -67,7 +62,7 @@ export function register(config?: Config) {
6762
navigator.serviceWorker.ready.then(() => {
6863
console.log(
6964
'This web app is being served cache-first by a service ' +
70-
'worker. To learn more, visit https://bit.ly/CRA-PWA'
65+
'worker. To learn more, visit https://bit.ly/CRA-PWA',
7166
);
7267
});
7368
} else {
@@ -95,7 +90,7 @@ function registerValidSW(swUrl: string, config?: Config) {
9590
// content until all client tabs are closed.
9691
console.log(
9792
'New content is available and will be used when all ' +
98-
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
93+
'tabs for this page are closed. See https://bit.ly/CRA-PWA.',
9994
);
10095

10196
// Execute callback
@@ -125,15 +120,12 @@ function registerValidSW(swUrl: string, config?: Config) {
125120
function checkValidServiceWorker(swUrl: string, config?: Config) {
126121
// Check if the service worker can be found. If it can't reload the page.
127122
fetch(swUrl, {
128-
headers: { 'Service-Worker': 'script' }
123+
headers: { 'Service-Worker': 'script' },
129124
})
130125
.then(response => {
131126
// Ensure service worker exists, and that we really are getting a JS file.
132127
const contentType = response.headers.get('content-type');
133-
if (
134-
response.status === 404 ||
135-
(contentType != null && contentType.indexOf('javascript') === -1)
136-
) {
128+
if (response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) {
137129
// No service worker found. Probably a different app. Reload the page.
138130
navigator.serviceWorker.ready.then(registration => {
139131
registration.unregister().then(() => {
@@ -146,9 +138,7 @@ function checkValidServiceWorker(swUrl: string, config?: Config) {
146138
}
147139
})
148140
.catch(() => {
149-
console.log(
150-
'No internet connection found. App is running in offline mode.'
151-
);
141+
console.log('No internet connection found. App is running in offline mode.');
152142
});
153143
}
154144

0 commit comments

Comments
 (0)
Please sign in to comment.