Error components for ViewActivities

frontend/src/components/Errors/ErrorGeneral.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import GoToTripsButton from './GoToTripsButton.js';
+
+/**
+ * Error component for any general error that occurs, such as failure fetching
+ * from Firebase.
+ */
+class ErrorGeneral extends React.Component {
+  /** @inheritdoc */
+  render() {
+    return (
+      <div>
+        <p>
+          Oops, looks like something went wrong. Please wait a few minutes and
+          try again.
+        </p>
+        <GoToTripsButton />
+      </div>
+    );
+  }
+}
+
+export default ErrorGeneral

frontend/src/components/Errors/ErrorTripNotFound.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import GoToTripsButton from './GoToTripsButton.js';
+
+/**
+ * Error component displayed when a nonexistent trip is queried for in the
+ * database.
+ */
+class ErrorTripNotFound extends React.Component {
+  /** @inheritdoc */
+  render() {
+    return (
+      <div>
+        <p>Sorry, we couldn't find the trip you were looking for.</p>
+        <GoToTripsButton />
+      </div>
+    );
+  }
+}
+
+export default ErrorTripNotFound;

frontend/src/components/Errors/GoToTripsButton.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import Button from 'react-bootstrap/Button';
+
+import { VIEW_TRIPS } from '../../constants/routes';
+
+/**
+ * A simple Button component that redirects the user back to the VIEW_TRIPS page
+ * that is rendered with each of this file's error components.
+ */
+const GoToTripsButton = () => {
+  const history = useHistory();
+
+  function goToTrips() {
+    history.push(VIEW_TRIPS);
+  }
+
+  return (
+    <Button type='button' onClick={goToTrips} variant='primary' size='lg'>
+      Go Back to Your Trips
+    </Button>
+  );
+}
+
+export default GoToTripsButton;

frontend/src/components/Errors/index.js

@@ -1,5 +1,9 @@
+import ErrorGeneral from './ErrorGeneral.js';
 import ErrorPageNotFound from './ErrorPageNotFound.js';
+import ErrorTripNotFound from './ErrorTripNotFound.js';
 
 export {
-  ErrorPageNotFound
-}
+  ErrorGeneral,
+  ErrorPageNotFound,
+  ErrorTripNotFound
+};

frontend/src/components/ViewActivities/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import ActivityList from './activitylist.js';
 
 import app from '../Firebase';
 
-import { getUserUid } from '../AuthUtils';
 import ActivityList from './activitylist.js';
+import { getCurUserUid } from '../AuthUtils';
+import * as ErrorComponents from '../Errors';
 import * as DB from '../../constants/database.js';
 
 /**
@@ -54,31 +54,19 @@ class ViewActivities extends React.Component {
   render() {
     // Case where there was a Firebase error.
     if (this.state.error !== undefined) {
-      // TODO (Issue #74): Redirect to an error page instead.
-      return (
-        <div>
-          Oops, looks like something went wrong. Please wait a few minutes and
-          try again.
-        </div>
-      );
+      return <div><ErrorComponents.ErrorGeneral /></div>;
     }
     // Case where the trip details are still being fetched.
     if (this.state.isLoading) {
       // TODO (Issue #25): Please remember to make this a blank div in the
       // deployed build lol.
       return <div>Loading Part 2: Electric Boogaloo</div>;
     }
-    // Case where the trip could not be found. A field is returned undefined if
-    // the trip does not exist, so we check that the retrieved collaborators is
-    // undefined.
-    else if (this.state.collaborators === undefined) {
-      // TODO (Issue #74): Redirect to an error page instead.
-      return <div>Sorry, we couldn't find the trip you were looking for.</div>;
-    }
-    // Case where the current user is not authorized to view the page
-    else if (!this.state.collaborators.includes(getUserUid())) {
-      // TODO (Issue #74): Redirect to an error page instead.
-      return <div>Sorry, you're not authorized to view this trip.</div>;
+    // Case where the trip could not be found or the current user is not
+    // authorized to view the trip.
+    else if (this.state.collaborators === undefined ||
+             !this.state.collaborators.includes(getCurUserUid())) {
+      return <div><ErrorComponents.ErrorTripNotFound /></div>;
     }
     else {
       return (

frontend/src/components/ViewActivities/index.test.js

@@ -11,10 +11,10 @@ const RESULT_NOT_AUTHORIZED =
 const RESULT_TRIP_DOESNT_EXIST =
     'Sorry, we couldn\'t find the trip you were looking for.';
 
-// Mock the getUserUid auth utility function to return a fake UID as given by
+// Mock the getCurUserUid auth utility function to return a fake UID as given by
 // FAKE_USER.
 jest.mock('../AuthUtils');
-authUtils.getUserUid.mockReturnValue(FAKE_USER);
+authUtils.getCurUserUid.mockReturnValue(FAKE_USER);
 
 // Mock the ActivityList component to simply render the passed-in tripId.
 jest.mock('./activitylist.js', () => (props) => (