chore(deps): update all deps bar axios

.eslintrc.json

@@ -1,18 +1,15 @@
 {
   "settings": {
     "react": {
-      "version": "16.12.0"
+      "version": "18.12.0"
     }
   },
   "env": {
     "browser": true,
     "es6": true,
     "jest": true
   },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended"
-  ],
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
   "globals": {
     "Atomics": "readonly",
     "SharedArrayBuffer": "readonly",
@@ -26,9 +23,6 @@
     "ecmaVersion": 2018,
     "sourceType": "module"
   },
-  "plugins": [
-    "react"
-  ],
-  "rules": {
-  }
-}
+  "plugins": ["react"],
+  "rules": {}
+}

package.json

@@ -3,13 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "axios": "^0.21.2",
-    "prop-types": "15.7.2",
-    "react": "^16.13.1",
-    "react-dom": "16.12.0",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "^3.4.3",
+    "axios": "^0.27.2",
+    "prop-types": "15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "18.2.0",
+    "react-router": "^6.4.2",
+    "react-router-dom": "^6.4.2",
+    "react-scripts": "5.0.1",
     "spectre.css": "^0.5.9"
   },
   "scripts": {
@@ -20,7 +20,10 @@
     "test:pact": "cross-env CI=true react-scripts test --testTimeout 30000 pact.spec.js"
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
   },
   "browserslist": {
     "production": [
@@ -35,19 +38,12 @@
     ]
   },
   "devDependencies": {
+    "@babel/preset-react": "^7.18.6",
     "@pact-foundation/pact": "^10.1.4",
-    "@testing-library/jest-dom": "4.2.4",
-    "@typescript-eslint/eslint-plugin": "^2.34.0",
-    "@typescript-eslint/parser": "^2.34.0",
-    "babel-eslint": "^10.1.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
     "cross-env": "^7.0.3",
-    "dotenv": "^8.2.0",
-    "eslint": "^6.8.0",
-    "eslint-config-react-app": "^5.2.1",
-    "eslint-plugin-flowtype": "^3.13.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.21.3",
-    "eslint-plugin-react-hooks": "^1.7.0"
+    "dotenv": "^16.0.3"
   }
 }

src/App.js

@@ -1,19 +1,18 @@
 import React from 'react';
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import 'spectre.css/dist/spectre.min.css';
 import 'spectre.css/dist/spectre-icons.min.css';
 import 'spectre.css/dist/spectre-exp.min.css';
-import Heading from "./Heading";
-import Layout from "./Layout";
-import {withRouter} from "react-router-dom";
-import API from "./api";
+import Heading from './Heading';
+import Layout from './Layout';
+import API from './api';
 import PropTypes from 'prop-types';
 
 const productPropTypes = {
   product: PropTypes.shape({
     id: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
-    type: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired
   }).isRequired
 };
 
@@ -23,34 +22,37 @@ function ProductTableRow(props) {
       <td>{props.product.name}</td>
       <td>{props.product.type}</td>
       <td>
-        <Link className="btn btn-link" to={{
-          pathname: "/products/" + props.product.id,
-          state: {
-            product: props.product
-          }
-        }}>See more!</Link>
+        <Link
+          className="btn btn-link"
+          to={{
+            pathname: '/products/' + props.product.id,
+            state: {
+              product: props.product
+            }
+          }}
+        >
+          See more!
+        </Link>
       </td>
     </tr>
   );
 }
 ProductTableRow.propTypes = productPropTypes;
 
 function ProductTable(props) {
-  const products = props.products.map(p => (
-    <ProductTableRow key={p.id} product={p}/>
+  const products = props.products.map((p) => (
+    <ProductTableRow key={p.id} product={p} />
   ));
   return (
     <table className="table table-striped table-hover">
       <thead>
-      <tr>
-        <th>Name</th>
-        <th>Type</th>
-        <th/>
-      </tr>
+        <tr>
+          <th>Name</th>
+          <th>Type</th>
+          <th />
+        </tr>
       </thead>
-      <tbody>
-      {products}
-      </tbody>
+      <tbody>{products}</tbody>
     </table>
   );
 }
@@ -74,70 +76,76 @@ class App extends React.Component {
 
   componentDidMount() {
     API.getAllProducts()
-      .then(r => {
+      .then((r) => {
         this.setState({
           loading: false,
           products: r
         });
         this.determineVisibleProducts();
       })
-      .catch(e => {
-        this.props.history.push({
-          pathname: "/error",
-          state: {
-            error: e.toString()
-          }
-        });
+      .catch(() => {
+        this.setState({ error: true });
       });
   }
 
   determineVisibleProducts() {
     const findProducts = (search) => {
       search = search.toLowerCase();
-      return this.state.products.filter(p =>
-        p.id.toLowerCase().includes(search)
-        || p.name.toLowerCase().includes(search)
-        || p.type.toLowerCase().includes(search)
-      )
+      return this.state.products.filter(
+        (p) =>
+          p.id.toLowerCase().includes(search) ||
+          p.name.toLowerCase().includes(search) ||
+          p.type.toLowerCase().includes(search)
+      );
     };
     this.setState((s) => {
       return {
         visibleProducts: s.searchText ? findProducts(s.searchText) : s.products
-      }
+      };
     });
   }
 
   onSearchTextChange(e) {
     this.setState({
       searchText: e.target.value
     });
-    this.determineVisibleProducts()
+    this.determineVisibleProducts();
   }
 
   render() {
+    if (this.state.error) {
+      throw Error('unable to fetch product data');
+    }
+
     return (
       <Layout>
-        <Heading text="Products" href="/"/>
+        <Heading text="Products" href="/" />
         <div className="form-group col-2">
-          <label className="form-label" htmlFor="input-product-search">Search</label>
-          <input id="input-product-search" className="form-input" type="text"
-               value={this.state.searchText} onChange={this.onSearchTextChange}/>
+          <label className="form-label" htmlFor="input-product-search">
+            Search
+          </label>
+          <input
+            id="input-product-search"
+            className="form-input"
+            type="text"
+            value={this.state.searchText}
+            onChange={this.onSearchTextChange}
+          />
         </div>
-        {
-          this.state.loading ?
-            <div className="loading loading-lg centered"/> :
-            <ProductTable products={this.state.visibleProducts}/>
-        }
+        {this.state.loading ? (
+          <div className="loading loading-lg centered" />
+        ) : (
+          <ProductTable products={this.state.visibleProducts} />
+        )}
       </Layout>
     );
   }
 }
 
 App.propTypes = {
   history: PropTypes.shape({
-      push: PropTypes.func.isRequired
-    }
-  ).isRequired
+    push: PropTypes.func.isRequired
+  }).isRequired
 };
 
-export default withRouter(App);
+export default App;

src/ErrorBoundary.js

@@ -0,0 +1,43 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Layout from "./Layout";
+import Heading from "./Heading";
+
+export default class ErrorBoundary extends React.Component {
+  state = { has_error: false };
+
+  componentDidCatch() {
+    this.setState({ has_error: true });
+  }
+
+  render() {
+    if (this.state.has_error) {
+      return (
+        <Layout>
+          <Heading text="Sad times :(" href="/" />
+          <div className="columns">
+            <img
+              className="column col-6"
+              style={{
+                height: "100%",
+              }}
+              src={"/sad_panda.gif"}
+              alt="sad_panda"
+            />
+            <pre
+              className="code column col-6"
+              style={{
+                wordWrap: "break-word",
+              }}
+            ></pre>
+          </div>
+        </Layout>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+ErrorBoundary.propTypes = {
+  children: PropTypes.object.isRequired,
+};