From 6f5eb87717d70031d535bab012208180fb8f22b6 Mon Sep 17 00:00:00 2001
From: Patrick Fic <pfic@outlook.com>
Date: Mon, 30 Dec 2019 08:10:50 -0800
Subject: [PATCH] Added error general error boundary page.

---
 client/src/App/App.js                         | 47 ++++++++++---------
 .../error-boundary.component.jsx              | 31 ++++++++++++
 client/src/pages/manage/manage.page.jsx       | 27 +++++------
 3 files changed, 70 insertions(+), 35 deletions(-)
 create mode 100644 client/src/components/error-boundary/error-boundary.component.jsx

diff --git a/client/src/App/App.js b/client/src/App/App.js
index 587e3356d..07fe638d4 100644
--- a/client/src/App/App.js
+++ b/client/src/App/App.js
@@ -8,6 +8,7 @@ import "./App.css";
 //Component Imports
 import LoadingSpinner from "../components/loading-spinner/loading-spinner.component";
 import AlertComponent from "../components/alert/alert.component";
+import ErrorBoundary from "../components/error-boundary/error-boundary.component";
 
 import { auth } from "../firebase/firebase.utils";
 import { UPSERT_USER } from "../graphql/user.queries";
@@ -19,7 +20,9 @@ import PrivateRoute from "../utils/private-route";
 const LandingPage = lazy(() => import("../pages/landing/landing.page"));
 const ManagePage = lazy(() => import("../pages/manage/manage.page"));
 const SignInPage = lazy(() => import("../pages/sign-in/sign-in.page"));
-const Unauthorized = lazy(() => import("../pages/unauthorized/unauthorized.component"));
+const Unauthorized = lazy(() =>
+  import("../pages/unauthorized/unauthorized.component")
+);
 
 export default () => {
   const apolloClient = useApolloClient();
@@ -105,26 +108,28 @@ export default () => {
   return (
     <div>
       <Switch>
-        <Suspense fallback={<div>Suspended Loading...</div>}>
-          <Route exact path="/" component={LandingPage} />
-          <Route exact path="/unauthorized" component={Unauthorized} />
-          <Route
-            exact
-            path="/signin"
-            render={() =>
-              HookCurrentUser.data.currentUser ? (
-                <Redirect to="/manage" />
-              ) : (
-                <SignInPage />
-              )
-            }
-          />
-          <PrivateRoute
-            isAuthorized={HookCurrentUser.data.currentUser ? true : false}
-            path="/manage"
-            component={ManagePage}
-          />
-        </Suspense>
+        <ErrorBoundary>
+          <Suspense fallback={<div>Suspended Loading...</div>}>
+            <Route exact path="/" component={LandingPage} />
+            <Route exact path="/unauthorized" component={Unauthorized} />
+            <Route
+              exact
+              path="/signin"
+              render={() =>
+                HookCurrentUser.data.currentUser ? (
+                  <Redirect to="/manage" />
+                ) : (
+                  <SignInPage />
+                )
+              }
+            />
+            <PrivateRoute
+              isAuthorized={HookCurrentUser.data.currentUser ? true : false}
+              path="/manage"
+              component={ManagePage}
+            />
+          </Suspense>
+        </ErrorBoundary>
       </Switch>
     </div>
   );
diff --git a/client/src/components/error-boundary/error-boundary.component.jsx b/client/src/components/error-boundary/error-boundary.component.jsx
new file mode 100644
index 000000000..63ae12f57
--- /dev/null
+++ b/client/src/components/error-boundary/error-boundary.component.jsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+class ErrorBoundary extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      hasErrored: false,
+      error: null
+    };
+  }
+
+  static getDerivedStateFromError(error) {
+    //process the error
+    console.log("error", error);
+    return { hasErrored: true, error };
+  }
+
+  componentDidCatch(error, info) {
+    console.log("error", error);
+    console.log("info", info);
+  }
+
+  render() {
+    if (this.state.hasErrored === true) {
+      return <div>Uh oh, something went wrong. {this.state.error}</div>;
+    } else {
+      return this.props.children;
+    }
+  }
+}
+export default ErrorBoundary;
diff --git a/client/src/pages/manage/manage.page.jsx b/client/src/pages/manage/manage.page.jsx
index 0aba41cea..2ea7d207d 100644
--- a/client/src/pages/manage/manage.page.jsx
+++ b/client/src/pages/manage/manage.page.jsx
@@ -3,12 +3,9 @@ import { Route } from "react-router";
 import { Layout, BackTop } from "antd";
 
 //Component Imports
-// import WhiteBoardPage from "../white-board/white-board.page";
-// import JobsPage from "../jobs/jobs.page";
-// import JobsDetailPage from "../jobs-detail/jobs-detail.page";
-
 import HeaderContainer from "../../components/header/header.container";
 import FooterComponent from "../../components/footer/footer.component";
+import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
 
 const WhiteBoardPage = lazy(() => import("../white-board/white-board.page"));
 const JobsPage = lazy(() => import("../jobs/jobs.page"));
@@ -24,17 +21,19 @@ export default function Manage({ match }) {
       </Header>
 
       <Content>
-        <Suspense
-          fallback={<div>TODO: Suspended Loading in Manage Page...</div>}
-        >
-          <Route exact path={`${match.path}`} component={WhiteBoardPage} />
+        <ErrorBoundary>
+          <Suspense
+            fallback={<div>TODO: Suspended Loading in Manage Page...</div>}
+          >
+            <Route exact path={`${match.path}`} component={WhiteBoardPage} />
 
-          <Route exact path={`${match.path}/jobs`} component={JobsPage} />
-          <Route
-            path={`${match.path}/jobs/:jobId`}
-            component={JobsDetailPage}
-          />
-        </Suspense>
+            <Route exact path={`${match.path}/jobs`} component={JobsPage} />
+            <Route
+              path={`${match.path}/jobs/:jobId`}
+              component={JobsDetailPage}
+            />
+          </Suspense>
+        </ErrorBoundary>
       </Content>
 
       <Footer>