feature/add-catch-all-route (#223)

* Underline Fixed (191)

* ErrorPage.tsx

* Updated ErrorPage to pass lint.

* Updated changes based on To's feedback.

* Updated based on lint.

src/app/App.tsx

@@ -16,6 +16,7 @@ import { EventPage } from "../pages/EventPage";
 import { EventsPage } from "../pages/EventsPage";
 import { PersonPage } from "../pages/PersonPage";
 import { PeoplePage } from "../pages/PeoplePage";
+import { ErrorPage } from "../pages/ErrorPage";
 
 import { SEARCH_TYPE } from "../pages/SearchPage/types";
 
@@ -101,6 +102,7 @@ function App() {
                 <Route exact path="/people/:id">
                   <PersonPage />
                 </Route>
+                <Route path="*" component={ErrorPage} />
               </Switch>
             </Main>
             <Footer footerLinksSections={municipality.footerLinksSections} />

src/containers/FetchDataContainer/FetchDataContainer.tsx

@@ -1,6 +1,7 @@
 import React, { FC, ReactNode } from "react";
 
 import { Loader } from "semantic-ui-react";
+import ErrorPage from "../../pages/ErrorPage/ErrorPage";
 
 interface FetchDataContainerProps {
   isLoading: boolean;
@@ -17,9 +18,7 @@ const FetchDataContainer: FC<FetchDataContainerProps> = ({
     return <Loader active size="massive" />;
   }
   if (error) {
-    // Display the error for now.
-    // TODO: throw the error and catch it with a general error boundary that displays the error page.
-    return <span>{error.toString()}</span>;
+    return <ErrorPage error={error} />;
   }
   return <>{children}</>;
 };

src/pages/ErrorPage/ErrorPage.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from "react";
+import { useHistory } from "react-router-dom";
+
+interface ErrorPageProps {
+  error?: any;
+}
+
+const ErrorPage: FC<ErrorPageProps> = ({ error }: ErrorPageProps) => {
+  const history = useHistory();
+  const errorText = error ? error.toString() : "";
+
+  return (
+    <div>
+      <h1 className="mzp-u-title-sm">Sorry, we can’t find that page.</h1>
+      <p>{errorText}</p>
+      <button className="mzp-c-button mzp-t-secondary mzp-t-md" onClick={() => history.goBack()}>
+        Back
+      </button>
+    </div>
+  );
+};
+
+export default ErrorPage;

src/pages/ErrorPage/index.ts

@@ -0,0 +1 @@
+export { default as ErrorPage } from "./ErrorPage";