From efc0011d6a0750d42f823783cde6610edf0ee98a Mon Sep 17 00:00:00 2001
From: Keiffer Acoba <keiffer.acoba@gmail.com>
Date: Fri, 17 Jul 2020 02:47:00 -0400
Subject: [PATCH 1/3] Create ErrorNotFound component

---
 .../components/ErrorNotFound/LandingButton.js | 26 +++++++++++++++++++
 .../src/components/ErrorNotFound/index.js     | 17 ++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 frontend/src/components/ErrorNotFound/LandingButton.js
 create mode 100644 frontend/src/components/ErrorNotFound/index.js

diff --git a/frontend/src/components/ErrorNotFound/LandingButton.js b/frontend/src/components/ErrorNotFound/LandingButton.js
new file mode 100644
index 00000000..ab2cbd6d
--- /dev/null
+++ b/frontend/src/components/ErrorNotFound/LandingButton.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import Button from 'react-bootstrap/Button';
+
+import { LANDING } from '../../constants/routes.js';
+
+/**
+ * Component that redirects the user back to the landing page when they
+ * encounter a 404 error.
+ */
+const LandingButton = () => {
+  const history = useHistory();
+
+  function goToLanding() {
+    history.push(LANDING);
+  }
+
+  return (
+    <Button type='button' onClick={goToLanding} variant='primary' size='lg'>
+      Return to Home
+    </Button>
+  );
+}
+
+export default SignInButton;
diff --git a/frontend/src/components/ErrorNotFound/index.js b/frontend/src/components/ErrorNotFound/index.js
new file mode 100644
index 00000000..179ded76
--- /dev/null
+++ b/frontend/src/components/ErrorNotFound/index.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import LandingButton from './LandingButton.js';
+
+class ErrorNotFound extends React.Component {
+  /** @inheritdoc */
+  render() {
+    return (
+      <div>
+        <h1>Error 404 Page Not Found</h1>
+        <p>Oops, looks like the page you were looking for doesn't exist.</p>
+        <LandingButton />
+      </div>
+    );
+  }
+};
+
+export default ErrorNotFound;

From fce954f9936b3a5fd93f18a5c6a7d6f482b9190c Mon Sep 17 00:00:00 2001
From: Keiffer Acoba <keiffer.acoba@gmail.com>
Date: Fri, 17 Jul 2020 02:54:10 -0400
Subject: [PATCH 2/3] Add ErrorNotFound component to the App component Router

---
 frontend/src/components/App/index.js              | 15 ++++++++++-----
 .../src/components/ErrorNotFound/LandingButton.js |  2 +-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/App/index.js b/frontend/src/components/App/index.js
index 9e07350b..cee02b6b 100644
--- a/frontend/src/components/App/index.js
+++ b/frontend/src/components/App/index.js
@@ -1,10 +1,11 @@
 import React from 'react';
-import {BrowserRouter as Router, Route} from 'react-router-dom';
+import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
 
 import LandingPage from '../Landing';
 import SignInPage from '../SignIn'
 import ViewActivitiesPage from '../ViewActivities';
 import ViewTripsPage from '../ViewTrips';
+import ErrorNotFoundPage from '../ErrorNotFound';
 import * as ROUTES from '../../constants/routes';
 
 /**
@@ -16,10 +17,14 @@ class App extends React.Component {
     return (
       <Router>
         <div>
-          <Route exact path={ROUTES.LANDING} component={LandingPage} />
-          <Route path={ROUTES.SIGN_IN} component={SignInPage} />
-          <Route path={ROUTES.VIEW_TRIPS} component={ViewTripsPage} />
-          <Route path={ROUTES.VIEW_ACTIVITIES + '/:tripId'} component={ViewActivitiesPage} />
+          <Switch>
+            <Route exact path={ROUTES.LANDING} component={LandingPage} />
+            <Route path={ROUTES.SIGN_IN} component={SignInPage} />
+            <Route path={ROUTES.VIEW_TRIPS} component={ViewTripsPage} />
+            <Route path={ROUTES.VIEW_ACTIVITIES + '/:tripId'} component={ViewActivitiesPage} />
+            {/* The ErrorNotFound component MUST be at the bottom of the Router! */}
+            <Route component={ErrorNotFoundPage} />
+          </Switch>
         </div>
       </Router>
     );
diff --git a/frontend/src/components/ErrorNotFound/LandingButton.js b/frontend/src/components/ErrorNotFound/LandingButton.js
index ab2cbd6d..67e81aa6 100644
--- a/frontend/src/components/ErrorNotFound/LandingButton.js
+++ b/frontend/src/components/ErrorNotFound/LandingButton.js
@@ -23,4 +23,4 @@ const LandingButton = () => {
   );
 }
 
-export default SignInButton;
+export default LandingButton;

From 80c10241324bb8fb9c2ee38c1982feda44d1d37a Mon Sep 17 00:00:00 2001
From: Keiffer Acoba <keiffer.acoba@gmail.com>
Date: Tue, 21 Jul 2020 20:03:55 -0400
Subject: [PATCH 3/3] Restructure ErrorNotFound component into a general Error
 component

---
 frontend/src/components/App/index.js          |  4 ++--
 .../src/components/ErrorNotFound/index.js     | 17 ---------------
 .../components/Errors/ErrorPageNotFound.js    | 21 +++++++++++++++++++
 .../GoToLandingButton.js}                     |  4 ++--
 frontend/src/components/Errors/index.js       |  5 +++++
 5 files changed, 30 insertions(+), 21 deletions(-)
 delete mode 100644 frontend/src/components/ErrorNotFound/index.js
 create mode 100644 frontend/src/components/Errors/ErrorPageNotFound.js
 rename frontend/src/components/{ErrorNotFound/LandingButton.js => Errors/GoToLandingButton.js} (88%)
 create mode 100644 frontend/src/components/Errors/index.js

diff --git a/frontend/src/components/App/index.js b/frontend/src/components/App/index.js
index cee02b6b..603d4876 100644
--- a/frontend/src/components/App/index.js
+++ b/frontend/src/components/App/index.js
@@ -5,7 +5,7 @@ import LandingPage from '../Landing';
 import SignInPage from '../SignIn'
 import ViewActivitiesPage from '../ViewActivities';
 import ViewTripsPage from '../ViewTrips';
-import ErrorNotFoundPage from '../ErrorNotFound';
+import { ErrorPageNotFound } from '../Errors';
 import * as ROUTES from '../../constants/routes';
 
 /**
@@ -23,7 +23,7 @@ class App extends React.Component {
             <Route path={ROUTES.VIEW_TRIPS} component={ViewTripsPage} />
             <Route path={ROUTES.VIEW_ACTIVITIES + '/:tripId'} component={ViewActivitiesPage} />
             {/* The ErrorNotFound component MUST be at the bottom of the Router! */}
-            <Route component={ErrorNotFoundPage} />
+            <Route component={ErrorPageNotFound} />
           </Switch>
         </div>
       </Router>
diff --git a/frontend/src/components/ErrorNotFound/index.js b/frontend/src/components/ErrorNotFound/index.js
deleted file mode 100644
index 179ded76..00000000
--- a/frontend/src/components/ErrorNotFound/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import LandingButton from './LandingButton.js';
-
-class ErrorNotFound extends React.Component {
-  /** @inheritdoc */
-  render() {
-    return (
-      <div>
-        <h1>Error 404 Page Not Found</h1>
-        <p>Oops, looks like the page you were looking for doesn't exist.</p>
-        <LandingButton />
-      </div>
-    );
-  }
-};
-
-export default ErrorNotFound;
diff --git a/frontend/src/components/Errors/ErrorPageNotFound.js b/frontend/src/components/Errors/ErrorPageNotFound.js
new file mode 100644
index 00000000..8ff00568
--- /dev/null
+++ b/frontend/src/components/Errors/ErrorPageNotFound.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import GoToLandingButton from './GoToLandingButton.js';
+
+/**
+ * Error component displayed when the user attempts to navigate to a page of the
+ * website that does not exist.
+ */
+class ErrorPageNotFound extends React.Component {
+  /** @inheritdoc */
+  render() {
+    return (
+      <div>
+        <h1>Error 404 Page Not Found</h1>
+        <p>Oops, looks like the page you were looking for doesn't exist.</p>
+        <GoToLandingButton />
+      </div>
+    );
+  }
+};
+
+export default ErrorPageNotFound;
diff --git a/frontend/src/components/ErrorNotFound/LandingButton.js b/frontend/src/components/Errors/GoToLandingButton.js
similarity index 88%
rename from frontend/src/components/ErrorNotFound/LandingButton.js
rename to frontend/src/components/Errors/GoToLandingButton.js
index 67e81aa6..144fa6cd 100644
--- a/frontend/src/components/ErrorNotFound/LandingButton.js
+++ b/frontend/src/components/Errors/GoToLandingButton.js
@@ -9,7 +9,7 @@ import { LANDING } from '../../constants/routes.js';
  * Component that redirects the user back to the landing page when they
  * encounter a 404 error.
  */
-const LandingButton = () => {
+const GoToLandingButton = () => {
   const history = useHistory();
 
   function goToLanding() {
@@ -23,4 +23,4 @@ const LandingButton = () => {
   );
 }
 
-export default LandingButton;
+export default GoToLandingButton;
diff --git a/frontend/src/components/Errors/index.js b/frontend/src/components/Errors/index.js
new file mode 100644
index 00000000..b1ac1f35
--- /dev/null
+++ b/frontend/src/components/Errors/index.js
@@ -0,0 +1,5 @@
+import ErrorPageNotFound from './ErrorPageNotFound.js';
+
+export {
+  ErrorPageNotFound
+}