diff --git a/frontend/src/components/Errors/ErrorGeneral.js b/frontend/src/components/Errors/ErrorGeneral.js
new file mode 100644
index 00000000..1b8e7fd8
--- /dev/null
+++ b/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 (
+
+
+ Oops, looks like something went wrong. Please wait a few minutes and
+ try again.
+
+
+
+ );
+ }
+}
+
+export default ErrorGeneral
diff --git a/frontend/src/components/Errors/ErrorTripNotFound.js b/frontend/src/components/Errors/ErrorTripNotFound.js
new file mode 100644
index 00000000..9a61fa18
--- /dev/null
+++ b/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 (
+
+
Sorry, we couldn't find the trip you were looking for.
+
+
+ );
+ }
+}
+
+export default ErrorTripNotFound;
diff --git a/frontend/src/components/Errors/GoToTripsButton.js b/frontend/src/components/Errors/GoToTripsButton.js
new file mode 100644
index 00000000..7c3ae2fa
--- /dev/null
+++ b/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 (
+
+ );
+}
+
+export default GoToTripsButton;
diff --git a/frontend/src/components/Errors/index.js b/frontend/src/components/Errors/index.js
index b1ac1f35..95e8b122 100644
--- a/frontend/src/components/Errors/index.js
+++ b/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
+};
diff --git a/frontend/src/components/ViewActivities/index.js b/frontend/src/components/ViewActivities/index.js
index 2160f979..1e9f48a6 100644
--- a/frontend/src/components/ViewActivities/index.js
+++ b/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,13 +54,7 @@ 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 (
-
- Oops, looks like something went wrong. Please wait a few minutes and
- try again.
-
- );
+ return
;
}
// Case where the trip details are still being fetched.
if (this.state.isLoading) {
@@ -68,17 +62,11 @@ class ViewActivities extends React.Component {
// deployed build lol.
return
Loading Part 2: Electric Boogaloo
;
}
- // 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
Sorry, we couldn't find the trip you were looking for.
;
- }
- // 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
Sorry, you're not authorized to view this trip.
;
+ // 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
;
}
else {
return (
diff --git a/frontend/src/components/ViewActivities/index.test.js b/frontend/src/components/ViewActivities/index.test.js
index 71b35cd4..c9bf8160 100644
--- a/frontend/src/components/ViewActivities/index.test.js
+++ b/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) => (