Sync development into main (#31)

* Sync development into main

* Fix

src/components/ErrorBoundary.jsx

@@ -2,25 +2,60 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { Typography } from "@material-ui/core";
 
+const reload = () => {
+  window.location.reload();
+};
 export default class ErrorBoundary extends Component {
   state = {
     error: "",
     errorInfo: "",
     hasError: false,
   };
+
   static getDerivedStateFromError(error) {
     return { hasError: true, error };
   }
+
   componentDidCatch(error, errorInfo) {
     this.setState({ errorInfo });
   }
+
   render() {
-    if (this.state.hasError)
+    if (this.state.hasError) {
+      if (this.state.error && this.state.error.name === "ChunkLoadError") {
+        reload();
+        return;
+      }
+
       return (
-        <Typography variant="h3" align="center">
-          Oops. An React JS Error Occured.
-        </Typography>
+        <div
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+          }}
+        >
+          <Typography variant="h3" align="center">
+            Sorry, an error has occured and been logged
+          </Typography>
+          <Typography
+            variant="h5"
+            align="center"
+            style={{
+              cursor: "pointer",
+              textDecorationColor: "Blue",
+              textDecorationStyle: "solid",
+              textDecorationLine: "underline",
+              color: "Blue",
+            }}
+            onClick={reload}
+          >
+            Click to reload
+          </Typography>
+        </div>
       );
+    }
     return this.props.children;
   }
 }