Skip to content

Commit 68295be

Browse files
YOU54FYOU54F
committed
chore(deps): update all deps bar axios
1 parent 7c19d1c commit 68295be

11 files changed

+24248
-25497
lines changed

‎.eslintrc.json

+5-11
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
11
{
22
"settings": {
33
"react": {
4-
"version": "16.12.0"
4+
"version": "18.12.0"
55
}
66
},
77
"env": {
88
"browser": true,
99
"es6": true,
1010
"jest": true
1111
},
12-
"extends": [
13-
"eslint:recommended",
14-
"plugin:react/recommended"
15-
],
12+
"extends": ["eslint:recommended", "plugin:react/recommended"],
1613
"globals": {
1714
"Atomics": "readonly",
1815
"SharedArrayBuffer": "readonly",
@@ -26,9 +23,6 @@
2623
"ecmaVersion": 2018,
2724
"sourceType": "module"
2825
},
29-
"plugins": [
30-
"react"
31-
],
32-
"rules": {
33-
}
34-
}
26+
"plugins": ["react"],
27+
"rules": {}
28+
}

‎package-lock.json

+24,000-25,252
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+16-20
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"axios": "^0.21.2",
7-
"prop-types": "15.7.2",
8-
"react": "^16.13.1",
9-
"react-dom": "16.12.0",
10-
"react-router": "^5.2.0",
11-
"react-router-dom": "^5.2.0",
12-
"react-scripts": "^3.4.3",
6+
"axios": "^0.27.2",
7+
"prop-types": "15.8.1",
8+
"react": "^18.2.0",
9+
"react-dom": "18.2.0",
10+
"react-router": "^6.4.2",
11+
"react-router-dom": "^6.4.2",
12+
"react-scripts": "5.0.1",
1313
"spectre.css": "^0.5.9"
1414
},
1515
"scripts": {
@@ -20,7 +20,10 @@
2020
"test:pact": "cross-env CI=true react-scripts test --testTimeout 30000 pact.spec.js"
2121
},
2222
"eslintConfig": {
23-
"extends": "react-app"
23+
"extends": [
24+
"react-app",
25+
"react-app/jest"
26+
]
2427
},
2528
"browserslist": {
2629
"production": [
@@ -35,19 +38,12 @@
3538
]
3639
},
3740
"devDependencies": {
41+
"@babel/preset-react": "^7.18.6",
3842
"@pact-foundation/pact": "^10.1.4",
39-
"@testing-library/jest-dom": "4.2.4",
40-
"@typescript-eslint/eslint-plugin": "^2.34.0",
41-
"@typescript-eslint/parser": "^2.34.0",
42-
"babel-eslint": "^10.1.0",
43+
"@testing-library/jest-dom": "^5.16.5",
44+
"@testing-library/react": "^13.4.0",
45+
"@testing-library/user-event": "^13.5.0",
4346
"cross-env": "^7.0.3",
44-
"dotenv": "^8.2.0",
45-
"eslint": "^6.8.0",
46-
"eslint-config-react-app": "^5.2.1",
47-
"eslint-plugin-flowtype": "^3.13.0",
48-
"eslint-plugin-import": "^2.22.1",
49-
"eslint-plugin-jsx-a11y": "^6.3.1",
50-
"eslint-plugin-react": "^7.21.3",
51-
"eslint-plugin-react-hooks": "^1.7.0"
47+
"dotenv": "^16.0.3"
5248
}
5349
}

‎src/App.js

+58-50
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
11
import React from 'react';
2-
import {Link} from 'react-router-dom';
2+
import { Link } from 'react-router-dom';
33
import 'spectre.css/dist/spectre.min.css';
44
import 'spectre.css/dist/spectre-icons.min.css';
55
import 'spectre.css/dist/spectre-exp.min.css';
6-
import Heading from "./Heading";
7-
import Layout from "./Layout";
8-
import {withRouter} from "react-router-dom";
9-
import API from "./api";
6+
import Heading from './Heading';
7+
import Layout from './Layout';
8+
import API from './api';
109
import PropTypes from 'prop-types';
1110

1211
const productPropTypes = {
1312
product: PropTypes.shape({
1413
id: PropTypes.string.isRequired,
1514
name: PropTypes.string.isRequired,
16-
type: PropTypes.string.isRequired,
15+
type: PropTypes.string.isRequired
1716
}).isRequired
1817
};
1918

@@ -23,34 +22,37 @@ function ProductTableRow(props) {
2322
<td>{props.product.name}</td>
2423
<td>{props.product.type}</td>
2524
<td>
26-
<Link className="btn btn-link" to={{
27-
pathname: "/products/" + props.product.id,
28-
state: {
29-
product: props.product
30-
}
31-
}}>See more!</Link>
25+
<Link
26+
className="btn btn-link"
27+
to={{
28+
pathname: '/products/' + props.product.id,
29+
state: {
30+
product: props.product
31+
}
32+
}}
33+
>
34+
See more!
35+
</Link>
3236
</td>
3337
</tr>
3438
);
3539
}
3640
ProductTableRow.propTypes = productPropTypes;
3741

3842
function ProductTable(props) {
39-
const products = props.products.map(p => (
40-
<ProductTableRow key={p.id} product={p}/>
43+
const products = props.products.map((p) => (
44+
<ProductTableRow key={p.id} product={p} />
4145
));
4246
return (
4347
<table className="table table-striped table-hover">
4448
<thead>
45-
<tr>
46-
<th>Name</th>
47-
<th>Type</th>
48-
<th/>
49-
</tr>
49+
<tr>
50+
<th>Name</th>
51+
<th>Type</th>
52+
<th />
53+
</tr>
5054
</thead>
51-
<tbody>
52-
{products}
53-
</tbody>
55+
<tbody>{products}</tbody>
5456
</table>
5557
);
5658
}
@@ -74,70 +76,76 @@ class App extends React.Component {
7476

7577
componentDidMount() {
7678
API.getAllProducts()
77-
.then(r => {
79+
.then((r) => {
7880
this.setState({
7981
loading: false,
8082
products: r
8183
});
8284
this.determineVisibleProducts();
8385
})
84-
.catch(e => {
85-
this.props.history.push({
86-
pathname: "/error",
87-
state: {
88-
error: e.toString()
89-
}
90-
});
86+
.catch(() => {
87+
this.setState({ error: true });
9188
});
9289
}
9390

9491
determineVisibleProducts() {
9592
const findProducts = (search) => {
9693
search = search.toLowerCase();
97-
return this.state.products.filter(p =>
98-
p.id.toLowerCase().includes(search)
99-
|| p.name.toLowerCase().includes(search)
100-
|| p.type.toLowerCase().includes(search)
101-
)
94+
return this.state.products.filter(
95+
(p) =>
96+
p.id.toLowerCase().includes(search) ||
97+
p.name.toLowerCase().includes(search) ||
98+
p.type.toLowerCase().includes(search)
99+
);
102100
};
103101
this.setState((s) => {
104102
return {
105103
visibleProducts: s.searchText ? findProducts(s.searchText) : s.products
106-
}
104+
};
107105
});
108106
}
109107

110108
onSearchTextChange(e) {
111109
this.setState({
112110
searchText: e.target.value
113111
});
114-
this.determineVisibleProducts()
112+
this.determineVisibleProducts();
115113
}
116114

117115
render() {
116+
if (this.state.error) {
117+
throw Error('unable to fetch product data');
118+
}
119+
118120
return (
119121
<Layout>
120-
<Heading text="Products" href="/"/>
122+
<Heading text="Products" href="/" />
121123
<div className="form-group col-2">
122-
<label className="form-label" htmlFor="input-product-search">Search</label>
123-
<input id="input-product-search" className="form-input" type="text"
124-
value={this.state.searchText} onChange={this.onSearchTextChange}/>
124+
<label className="form-label" htmlFor="input-product-search">
125+
Search
126+
</label>
127+
<input
128+
id="input-product-search"
129+
className="form-input"
130+
type="text"
131+
value={this.state.searchText}
132+
onChange={this.onSearchTextChange}
133+
/>
125134
</div>
126-
{
127-
this.state.loading ?
128-
<div className="loading loading-lg centered"/> :
129-
<ProductTable products={this.state.visibleProducts}/>
130-
}
135+
{this.state.loading ? (
136+
<div className="loading loading-lg centered" />
137+
) : (
138+
<ProductTable products={this.state.visibleProducts} />
139+
)}
131140
</Layout>
132141
);
133142
}
134143
}
135144

136145
App.propTypes = {
137146
history: PropTypes.shape({
138-
push: PropTypes.func.isRequired
139-
}
140-
).isRequired
147+
push: PropTypes.func.isRequired
148+
}).isRequired
141149
};
142150

143-
export default withRouter(App);
151+
export default App;

‎src/ErrorBoundary.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import Layout from "./Layout";
4+
import Heading from "./Heading";
5+
6+
export default class ErrorBoundary extends React.Component {
7+
state = { has_error: false };
8+
9+
componentDidCatch() {
10+
this.setState({ has_error: true });
11+
}
12+
13+
render() {
14+
if (this.state.has_error) {
15+
return (
16+
<Layout>
17+
<Heading text="Sad times :(" href="/" />
18+
<div className="columns">
19+
<img
20+
className="column col-6"
21+
style={{
22+
height: "100%",
23+
}}
24+
src={"/sad_panda.gif"}
25+
alt="sad_panda"
26+
/>
27+
<pre
28+
className="code column col-6"
29+
style={{
30+
wordWrap: "break-word",
31+
}}
32+
></pre>
33+
</div>
34+
</Layout>
35+
);
36+
}
37+
return this.props.children;
38+
}
39+
}
40+
41+
ErrorBoundary.propTypes = {
42+
children: PropTypes.object.isRequired,
43+
};

‎src/ErrorPage.js

-40
This file was deleted.

0 commit comments

Comments
 (0)