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) => (