Skip to content

Commit 0c6706a

Browse files
mefellowsmefellows
committed
chore: fix react
1 parent 8f57a7c commit 0c6706a

File tree

10 files changed

+135
-65
lines changed

10 files changed

+135
-65
lines changed

‎consumer/src/App.css

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.App {
2+
text-align: center;
3+
}
4+
5+
.App-logo {
6+
height: 40vmin;
7+
pointer-events: none;
8+
}
9+
10+
@media (prefers-reduced-motion: no-preference) {
11+
.App-logo {
12+
animation: App-logo-spin infinite 20s linear;
13+
}
14+
}
15+
16+
.App-header {
17+
background-color: #282c34;
18+
min-height: 100vh;
19+
display: flex;
20+
flex-direction: column;
21+
align-items: center;
22+
justify-content: center;
23+
font-size: calc(10px + 2vmin);
24+
color: white;
25+
}
26+
27+
.App-link {
28+
color: #61dafb;
29+
}
30+
31+
@keyframes App-logo-spin {
32+
from {
33+
transform: rotate(0deg);
34+
}
35+
to {
36+
transform: rotate(360deg);
37+
}
38+
}

‎consumer/src/App.js

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import 'spectre.css/dist/spectre-icons.min.css';
55
import 'spectre.css/dist/spectre-exp.min.css';
66
import Heading from "./Heading";
77
import Layout from "./Layout";
8-
import {withRouter} from "react-router";
98
import API from "./api";
109
import PropTypes from 'prop-types';
1110

@@ -81,13 +80,8 @@ class App extends React.Component {
8180
});
8281
this.determineVisibleProducts();
8382
})
84-
.catch(e => {
85-
this.props.history.push({
86-
pathname: "/error",
87-
state: {
88-
error: e.toString()
89-
}
90-
});
83+
.catch(() => {
84+
this.setState({error: true})
9185
});
9286
}
9387

@@ -115,6 +109,10 @@ class App extends React.Component {
115109
}
116110

117111
render() {
112+
if (this.state.error) {
113+
throw Error("unable to fetch product data")
114+
}
115+
118116
return (
119117
<Layout>
120118
<Heading text="Products" href="/"/>
@@ -140,4 +138,4 @@ App.propTypes = {
140138
).isRequired
141139
};
142140

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

‎consumer/src/ErrorBoundary.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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+
>
33+
</pre>
34+
</div>
35+
</Layout>
36+
);
37+
}
38+
return this.props.children;
39+
}
40+
}
41+
42+
ErrorBoundary.propTypes = {
43+
children: PropTypes.object.isRequired
44+
};

‎consumer/src/Layout.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ function Layout(props) {
1414
}
1515

1616
Layout.propTypes = {
17-
children: PropTypes.elementType.isRequired
17+
children: PropTypes.array.isRequired
1818
};
1919

2020
export default Layout;

‎consumer/src/ProductPage.js

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,18 @@ import 'spectre.css/dist/spectre-icons.min.css';
44
import 'spectre.css/dist/spectre-exp.min.css';
55
import Layout from "./Layout";
66
import Heading from "./Heading";
7-
import {withRouter} from "react-router";
87
import API from "./api";
9-
import PropTypes from 'prop-types';
108

119
class ProductPage extends React.Component {
12-
constructor(props) {
10+
constructor(props) {
1311
super(props);
1412

13+
const bits = window.location.pathname.split("/")
14+
1515
this.state = {
1616
loading: true,
1717
product: {
18-
id: props.match.params.id
18+
id: bits[bits.length-1]
1919
}
2020
};
2121
}
@@ -26,18 +26,15 @@ class ProductPage extends React.Component {
2626
loading: false,
2727
product: r
2828
});
29-
}).catch(e => {
30-
console.error("failed to load product " + this.state.product.id, e);
31-
this.props.history.push({
32-
pathname: "/error",
33-
state: {
34-
error: e.toString()
35-
}
36-
});
37-
});
29+
}).catch(() => {
30+
this.setState({error: true})
31+
})
3832
}
3933

4034
render() {
35+
if (this.state.error) {
36+
throw Error("unable to fetch product data")
37+
}
4138
const productInfo = (
4239
<div>
4340
<p>ID: {this.state.product.id}</p>
@@ -61,10 +58,10 @@ class ProductPage extends React.Component {
6158
}
6259

6360
ProductPage.propTypes = {
64-
match: PropTypes.array.isRequired,
65-
history: PropTypes.shape({
66-
push: PropTypes.func.isRequired
67-
}).isRequired
61+
// match: PropTypes.array.isRequired,
62+
// history: PropTypes.shape({
63+
// push: PropTypes.func.isRequired
64+
// }).isRequired
6865
};
6966

70-
export default withRouter(ProductPage);
67+
export default ProductPage;

‎consumer/src/api.js

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -22,25 +22,13 @@ export class API {
2222
return `${this.url}${path}`
2323
}
2424

25-
generateAuthToken() {
26-
return "Bearer " + new Date().toISOString()
27-
}
28-
2925
async getAllProducts() {
30-
return axios.get(this.withPath("/products"), {
31-
headers: {
32-
"Authorization": this.generateAuthToken()
33-
}
34-
})
26+
return axios.get(this.withPath("/products"))
3527
.then(r => r.data);
3628
}
3729

3830
async getProduct(id) {
39-
return axios.get(this.withPath("/product/" + id), {
40-
headers: {
41-
"Authorization": this.generateAuthToken()
42-
}
43-
})
31+
return axios.get(this.withPath("/products/" + id))
4432
.then(r => r.data);
4533
}
4634
}

‎consumer/src/api.spec.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ describe("API", () => {
3535
"version": "v1"
3636
};
3737
nock(API.url)
38-
.get('/product/50')
38+
.get('/products/50')
3939
.reply(200, product, {'Access-Control-Allow-Origin': '*'});
4040
const respProduct = await API.getProduct("50");
4141
expect(respProduct).toEqual(product);

‎consumer/src/index.js

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,25 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'
4-
import './index.css';
5-
import App from './App';
1+
import React from "react";
2+
import ReactDOM from "react-dom/client";
3+
import { BrowserRouter, Routes, Route } from "react-router-dom";
4+
import "./index.css";
5+
import App from "./App";
66
import ProductPage from "./ProductPage";
7-
import ErrorPage from "./ErrorPage";
7+
import ErrorBoundary from "./ErrorBoundary";
88

99
const routing = (
10-
<Router>
11-
<div>
12-
<Switch>
13-
<Route path="/error">
14-
<ErrorPage/>
15-
</Route>
16-
<Route path="/products/:id">
17-
<ProductPage/>
18-
</Route>
19-
<Route path="/">
20-
<App/>
21-
</Route>
22-
</Switch>
23-
</div>
24-
</Router>
10+
<BrowserRouter history="">
11+
<div>
12+
<ErrorBoundary>
13+
<Routes>
14+
<Route path="/" element={<App />} />
15+
<Route path="/products/">
16+
<Route path=":id" element={<ProductPage />} />
17+
</Route>
18+
</Routes>
19+
</ErrorBoundary>
20+
</div>
21+
</BrowserRouter>
2522
);
2623

27-
ReactDOM.render(routing, document.getElementById('root'));
24+
const root = ReactDOM.createRoot(document.getElementById("root"));
25+
root.render(routing);

‎consumer/src/logo.svg

Lines changed: 1 addition & 0 deletions
Loading

‎consumer/src/setupTests.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
// jest-dom adds custom jest matchers for asserting on DOM nodes.
2+
// allows you to do things like:
3+
// expect(element).toHaveTextContent(/react/i)
4+
// learn more: https://github.com/testing-library/jest-dom
5+
// import '@testing-library/jest-dom';
6+
17
// jest-dom adds custom jest matchers for asserting on DOM nodes.
28
// allows you to do things like:
39
// expect(element).toHaveTextContent(/react/i)

0 commit comments

Comments
 (0)