From b068a0b42d67e7b6fc072c857fe8c219c796c625 Mon Sep 17 00:00:00 2001
From: Zach Ghera <zpghera00@gmail.com>
Date: Wed, 22 Jul 2020 13:47:38 -0400
Subject: [PATCH 01/11] Remove  state, func, and all associated references.

---
 .../components/ViewTrips/delete-trip-button.js |  8 +-------
 frontend/src/components/ViewTrips/index.js     | 18 ------------------
 .../components/ViewTrips/save-trip-modal.js    |  4 ----
 frontend/src/components/ViewTrips/trip.js      |  7 +------
 4 files changed, 2 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/ViewTrips/delete-trip-button.js b/frontend/src/components/ViewTrips/delete-trip-button.js
index 7b54297b..3561df75 100644
--- a/frontend/src/components/ViewTrips/delete-trip-button.js
+++ b/frontend/src/components/ViewTrips/delete-trip-button.js
@@ -14,8 +14,6 @@ const LIMIT_QUERY_DOCS_RETRIEVED = 5;
  *
  * @param {Object} props These are the props for this component:
  * - tripId: Document ID for the current Trip document.
- * - refreshTripsContainer: Handler that refreshes the TripsContainer
- *        component upon trip creation (Remove when fix Issue #62).
  */
 const DeleteTripsButton = (props) => {
    /**
@@ -78,8 +76,6 @@ const DeleteTripsButton = (props) => {
   /**
    * Deletes a trip and its subcollection of activities corrsponding to the
    * `tripId` prop and then refreshes the TripsContainer component.
-   *
-   * TODO(Issue #62): Remove refreshTripsContainer.
    */
   async function deleteTrip() {
     if (window.confirm('Are you sure you want to delete this trip? This' +
@@ -101,9 +97,7 @@ const DeleteTripsButton = (props) => {
           }).catch(error => {
             console.error("Error removing document: ", error);
           });
-
-      props.refreshTripsContainer();
-   }
+    }
   }
 
   return (
diff --git a/frontend/src/components/ViewTrips/index.js b/frontend/src/components/ViewTrips/index.js
index 08ce2971..19a1c731 100644
--- a/frontend/src/components/ViewTrips/index.js
+++ b/frontend/src/components/ViewTrips/index.js
@@ -16,27 +16,12 @@ class ViewTrips extends React.Component {
   constructor() {
     super();
     this.state = { showModal: false,
-                   refreshTripsContainer: false,
                    refreshSaveTripModal: false,
                    tripId: null,
                    defaultFormObj: null,
                  };
   }
 
-  /**
-   * Handler that flips `refreshTripsContainer` property which causes that
-   * TripsContainer component to be reloaded.
-   *
-   * This allows a trip creator's view trips page to be updated in real time.
-   *
-   * In the future, the use of refreshTripContainer and the key prop on Trips
-   * container should be removed with the addition of real time listening with
-   * onShapshot (Issue #62).
-   */
-  refreshTripsContainer = () => {
-    this.setState({ refreshTripsContainer: !this.state.refreshTripsContainer });
-  }
-
   /**
    * Handler that flips `refreshSaveTripModal` property which causes that
    * save/edit trip component to be reloaded.
@@ -97,7 +82,6 @@ class ViewTrips extends React.Component {
         <SaveTripModal
           show={this.state.showModal}
           handleClose={this.hideSaveTripModal}
-          refreshTripsContainer={this.refreshTripsContainer}
           tripId={this.state.tripId}
           defaultFormObj={this.state.defaultFormObj}
           key={this.state.refreshSaveTripModal}
@@ -109,8 +93,6 @@ class ViewTrips extends React.Component {
         </div>
         <TripsContainer
           handleEditTrip={this.showEditTripModal}
-          refreshTripsContainer={this.refreshTripsContainer}
-          key={this.state.refreshTripsContainer}
         />
       </div>
     );
diff --git a/frontend/src/components/ViewTrips/save-trip-modal.js b/frontend/src/components/ViewTrips/save-trip-modal.js
index 00a2a352..f1e892a3 100644
--- a/frontend/src/components/ViewTrips/save-trip-modal.js
+++ b/frontend/src/components/ViewTrips/save-trip-modal.js
@@ -162,8 +162,6 @@ function createFormGroup(controlId, formLabel, inputType,
  * @param {Object} props These are the props for this component:
  * - show: Boolean that determines if the add trips modal should be displayed.
  * - handleClose: Event handler responsible for closing the add trips modal.
- * - refreshTripsContainer: Handler that refreshes the TripsContainer
- *        component upon trip creation (Remove when fix Issue #62).
  * - tripId: For adding a new trip, this will be null. For editting an existing
  *        trip, this will the document id associated with the trip.
  * - defaultFormObj: Object containing the placeholder/default values for the
@@ -272,12 +270,10 @@ class SaveTripModal extends React.Component {
   /**
    * Handles submission of the form which includes:
    *  - Creation of the trip.
-   *  - Refreshing the trips container.
    *  - Closing the modal.
    */
   handleSubmitForm = () => {
     this.saveTrip();
-    this.props.refreshTripsContainer();
     this.props.handleClose();
   }
 
diff --git a/frontend/src/components/ViewTrips/trip.js b/frontend/src/components/ViewTrips/trip.js
index 0bbbcd5c..22e6a0fa 100644
--- a/frontend/src/components/ViewTrips/trip.js
+++ b/frontend/src/components/ViewTrips/trip.js
@@ -52,8 +52,6 @@ export function getCollaboratorEmails(collaboratorUidArr) {
  * - tripData: Object holding a Trip document fields and corresponding values.
  * - tripId: Document ID for the current Trip document.
  * - handleEditTrip: Handler that displays the edit trip modal.
- * - refreshTripsContainer: Handler that refreshes the TripsContainer
- *        component upon trip creation (Remove when fix Issue #62).
  * - key: Special React attribute that ensures a new Trip instance is
  *        created whenever this key is updated
  */
@@ -81,10 +79,7 @@ const Trip = (props) => {
       <p>{description}</p>
       <p>{collaboratorEmailsStr}</p>
 
-      <DeleteTripButton
-        tripId={props.tripId}
-        refreshTripsContainer={props.refreshTripsContainer}
-      />
+      <DeleteTripButton tripId={props.tripId} />
       <Button
         type='button'
         onClick={() => props.handleEditTrip(props.tripId, formattedTripData)}

From 9f0fe8a112d8fd708b12ea2e710ffd51366d1710 Mon Sep 17 00:00:00 2001
From: Zach Ghera <zpghera00@gmail.com>
Date: Wed, 22 Jul 2020 13:48:26 -0400
Subject: [PATCH 02/11] Complete initial integration of onSnapshot listener for
 real-time updates.

---
 .../components/ViewTrips/trips-container.js   | 84 ++++++-------------
 1 file changed, 24 insertions(+), 60 deletions(-)

diff --git a/frontend/src/components/ViewTrips/trips-container.js b/frontend/src/components/ViewTrips/trips-container.js
index 7a10f20b..1a17f8d4 100644
--- a/frontend/src/components/ViewTrips/trips-container.js
+++ b/frontend/src/components/ViewTrips/trips-container.js
@@ -8,51 +8,6 @@ import Trip from './trip.js';
 
 const db = app.firestore();
 
-/**
- * Returns a promise of a query object containg the array of Trip Documents
- * corresponding to the trips that the current user is a collaborator on.
- *
- * @param {firebase.firestore.Firestore} db The Firestore database instance.
- * @return {Promise<!firebase.firestore.QuerySnapshot>} Promise object
- *    containing the query results with zero or more Trip  documents.
- */
-function queryUserTrips(db) {
-  const curUserUid = getCurUserUid();
-  return db.collection(DB.COLLECTION_TRIPS)
-      .where(DB.TRIPS_COLLABORATORS, 'array-contains', curUserUid)
-      .orderBy(DB.TRIPS_CREATION_TIME, 'desc')
-      .get();
-}
-
-/**
- * Grabs Trips query result from `queryUserTrips()` and returns an array of
- * `<Trip>` elements as defined in `trip.js`.
- *
- * @param {Promise<!firebase.firestore.QuerySnapshot>} querySnapshot Promise
- *     object containing the query results with zero or more Trip documents.
- * @param {EventHandler} handleEditTrip Displays the edit trip modal.
- * @param {EventHandler} refreshTripsContainer Refreshed the TripsContainer
- *     component (Remove when fix Issue #62).
- * @return {Promise<!Array<Trip>>} Promise object containing an array
- *     of Trip React/HTML elements corresponding to the Trip documents included
- *     in `querySnapshot`.
- */
-function serveTrips(querySnapshot, handleEditTrip, refreshTripsContainer) {
-  return new Promise(function(resolve) {
-    const tripsContainer = querySnapshot.docs.map(doc =>
-        ( <Trip
-            tripData={doc.data()}
-            tripId={doc.id}
-            handleEditTrip={handleEditTrip}
-            refreshTripsContainer={refreshTripsContainer}
-            key={doc.id}
-          />
-        )
-    );
-    resolve(tripsContainer);
-  });
-}
-
 /**
  * Returns a `<div>` element with the specified error message.
  *
@@ -73,10 +28,6 @@ function getErrorElement(error) {
  *
  * @param {Object} props These are the props for this component:
  * - handleEditTrip: Handler that displays the edit trip modal.
- * - refreshTripsContainer: Handler that refreshes the TripsContainer
- *        component upon trip creation (Remove when fix Issue #62).
- * - key: Special React attribute that ensures a new TripsContainer instance is
- *        created whenever this key is updated (Remove when fix Issue #62).
  * @extends React.Component
  */
 class TripsContainer extends React.Component {
@@ -86,19 +37,32 @@ class TripsContainer extends React.Component {
     this.state = {trips: []};
   }
 
+  serveUserTrips = () => {
+    const curUserUid = getCurUserUid();
+    db.collection(DB.COLLECTION_TRIPS)
+        .where(DB.TRIPS_COLLABORATORS, 'array-contains', curUserUid)
+        .orderBy(DB.TRIPS_CREATION_TIME, 'desc')
+        .onSnapshot(querySnapshot => {
+          const tripsContainer = querySnapshot.docs.map(doc =>
+              ( <Trip
+                  tripData={doc.data()}
+                  tripId={doc.id}
+                  handleEditTrip={this.props.handleEditTrip}
+                  key={doc.id}
+                />
+              )
+          );
+
+          this.setState({ trips: tripsContainer });
+        }, (error) => {
+          let errorElement = getErrorElement(error);
+          this.setState({ trips: errorElement });
+        });
+  }
+
   /** @inheritdoc */
   async componentDidMount() {
-    try {
-      const querySnapshot = await queryUserTrips(db);
-      let tripsContainer = await serveTrips(querySnapshot,
-                                            this.props.handleEditTrip,
-                                            this.props.refreshTripsContainer);
-      this.setState({ trips: tripsContainer });
-    }
-    catch (error) {
-      let errorElement = await getErrorElement(error);
-      this.setState({ trips: errorElement });
-    }
+    this.serveUserTrips();
   }
 
   /** @inheritdoc */

From e1ca5d43cce27ba0710a71d7a28e69cf0edb7098 Mon Sep 17 00:00:00 2001
From: Zach Ghera <zpghera00@gmail.com>
Date: Wed, 22 Jul 2020 14:44:56 -0400
Subject: [PATCH 03/11] Add documentation to componentDidMount and change
 annotation to override.

---
 .../components/ViewTrips/trips-container.js   | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ViewTrips/trips-container.js b/frontend/src/components/ViewTrips/trips-container.js
index 1a17f8d4..06113213 100644
--- a/frontend/src/components/ViewTrips/trips-container.js
+++ b/frontend/src/components/ViewTrips/trips-container.js
@@ -18,7 +18,13 @@ const db = app.firestore();
 function getErrorElement(error) {
   return new Promise(function(resolve) {
     console.log(`Error in Trips Container: ${error}`);
-  resolve(( <div><p>Error: Unable to load your trips.</p></div> ));
+    resolve(
+      <div>
+        <p>Oops, it looks like we were unable to load your trips.
+                      Please wait a few minutes and try again.
+        </p>
+      </div>
+    );
   });
 }
 
@@ -37,7 +43,19 @@ class TripsContainer extends React.Component {
     this.state = {trips: []};
   }
 
-  serveUserTrips = () => {
+  /**
+   * When the TripsContainer mounts, a listener is attached to the QuerySnapshot
+   * event that grabs all trip documents where the current user uid is contained
+   * in the collaborator uid array (collaborators field). This allows real-time
+   * updates for all collaborators on a trip whenever a trip is updated (add,
+   * edit, or delete).
+   *
+   * In the case where there is an error, an error component is returned in
+   * place of the array of trips.
+   *
+   * @override
+   */
+  async componentDidMount() {
     const curUserUid = getCurUserUid();
     db.collection(DB.COLLECTION_TRIPS)
         .where(DB.TRIPS_COLLABORATORS, 'array-contains', curUserUid)
@@ -60,11 +78,6 @@ class TripsContainer extends React.Component {
         });
   }
 
-  /** @inheritdoc */
-  async componentDidMount() {
-    this.serveUserTrips();
-  }
-
   /** @inheritdoc */
   render() {
     return (

From 830b75f247aec203acff8da353b7a890431d2364 Mon Sep 17 00:00:00 2001
From: Zach Ghera <zpghera00@gmail.com>
Date: Wed, 22 Jul 2020 21:55:55 -0400
Subject: [PATCH 04/11] Delete extra line.

---
 frontend/src/components/ViewTrips/save-trip-modal.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/ViewTrips/save-trip-modal.js b/frontend/src/components/ViewTrips/save-trip-modal.js
index e96df7ea..3e059d45 100644
--- a/frontend/src/components/ViewTrips/save-trip-modal.js
+++ b/frontend/src/components/ViewTrips/save-trip-modal.js
@@ -126,7 +126,6 @@ class SaveTripModal extends React.Component {
     } else {
       this.updateExistingTrip(this.props.tripId, tripData);
     }
-
   }
 
   /**

From dbd5dc6c3d49b3fdc4f5214d792b41d032c7cd2d Mon Sep 17 00:00:00 2001
From: Zach Ghera <zpghera00@gmail.com>
Date: Thu, 23 Jul 2020 14:52:26 -0400
Subject: [PATCH 05/11] Add todo to move getErrElement into component.

---
 frontend/src/components/ViewTrips/trips-container.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/components/ViewTrips/trips-container.js b/frontend/src/components/ViewTrips/trips-container.js
index dbbca078..182c7916 100644
--- a/frontend/src/components/ViewTrips/trips-container.js
+++ b/frontend/src/components/ViewTrips/trips-container.js
@@ -11,6 +11,8 @@ const db = app.firestore();
 /**
  * Returns a `<div>` element with the specified error message.
  *
+ * TODO(Issue #9.): Turn this func into component and add to Errors directory.
+ *
  * @param {string} error Error message in `componentDidMount` catch statement.
  * @return {Promise<HTMLDivElement>} Promise object containing a `<div>` element
  *    with the error message `error` inside.

From 294f5bc970bb993491aef87e594f4c5e8d94046e Mon Sep 17 00:00:00 2001
From: Zach Ghera <zpghera00@gmail.com>
Date: Wed, 29 Jul 2020 08:56:59 -0400
Subject: [PATCH 06/11] Add correct issue number for todo in getErrorElement.

---
 frontend/src/components/ViewTrips/trips-container.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ViewTrips/trips-container.js b/frontend/src/components/ViewTrips/trips-container.js
index 182c7916..c95698c6 100644
--- a/frontend/src/components/ViewTrips/trips-container.js
+++ b/frontend/src/components/ViewTrips/trips-container.js
@@ -11,7 +11,7 @@ const db = app.firestore();
 /**
  * Returns a `<div>` element with the specified error message.
  *
- * TODO(Issue #9.): Turn this func into component and add to Errors directory.
+ * TODO(Issue #98): Turn this func into component and add to Errors directory.
  *
  * @param {string} error Error message in `componentDidMount` catch statement.
  * @return {Promise<HTMLDivElement>} Promise object containing a `<div>` element

From 6bbde686a3eabbc066799067950d367f86a95528 Mon Sep 17 00:00:00 2001
From: Zach Ghera <zpghera00@gmail.com>
Date: Wed, 29 Jul 2020 10:28:22 -0400
Subject: [PATCH 07/11] Rename trips state to tripsContainer and tripsContainer
 local var to tripArr for more clarity.

---
 frontend/src/components/ViewTrips/trips-container.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ViewTrips/trips-container.js b/frontend/src/components/ViewTrips/trips-container.js
index c95698c6..a9c11ae2 100644
--- a/frontend/src/components/ViewTrips/trips-container.js
+++ b/frontend/src/components/ViewTrips/trips-container.js
@@ -42,7 +42,7 @@ class TripsContainer extends React.Component {
   /** @inheritdoc */
   constructor(props) {
     super(props);
-    this.state = {trips: []};
+    this.state = {tripsContainer: []};
   }
 
   /**
@@ -63,7 +63,7 @@ class TripsContainer extends React.Component {
         .where(DB.TRIPS_COLLABORATORS, 'array-contains', curUserUid)
         .orderBy(DB.TRIPS_CREATION_TIME, 'desc')
         .onSnapshot(querySnapshot => {
-          const tripsContainer = querySnapshot.docs.map(doc =>
+          const tripsArr = querySnapshot.docs.map(doc =>
               ( <Trip
                   tripData={doc.data()}
                   tripId={doc.id}
@@ -73,17 +73,17 @@ class TripsContainer extends React.Component {
               )
           );
 
-          this.setState({ trips: tripsContainer });
+          this.setState({ tripsContainer: tripsArr });
         }, (error) => {
           let errorElement = getErrorElement(error);
-          this.setState({ trips: errorElement });
+          this.setState({ tripsContainer: errorElement });
         });
   }
 
   /** @inheritdoc */
   render() {
     return (
-      <div>{this.state.trips}</div>
+      <div>{this.state.tripsContainer}</div>
     );
   }
 }

From e2afe0260a86f48196f72ec64490fda3cfa88367 Mon Sep 17 00:00:00 2001
From: Zach Ghera <zpghera00@gmail.com>
Date: Wed, 29 Jul 2020 10:28:50 -0400
Subject: [PATCH 08/11] Make errorElement const.

---
 frontend/src/components/ViewTrips/trips-container.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ViewTrips/trips-container.js b/frontend/src/components/ViewTrips/trips-container.js
index a9c11ae2..9cb95752 100644
--- a/frontend/src/components/ViewTrips/trips-container.js
+++ b/frontend/src/components/ViewTrips/trips-container.js
@@ -75,7 +75,7 @@ class TripsContainer extends React.Component {
 
           this.setState({ tripsContainer: tripsArr });
         }, (error) => {
-          let errorElement = getErrorElement(error);
+          const errorElement = getErrorElement(error);
           this.setState({ tripsContainer: errorElement });
         });
   }

From e36fb9f73513ad23766dcb504bcd54b211b3f77e Mon Sep 17 00:00:00 2001
From: Zach Ghera <zpghera00@gmail.com>
Date: Wed, 29 Jul 2020 17:18:56 -0400
Subject: [PATCH 09/11] Fix syntax that broke tests.

---
 frontend/src/components/Utils/time.test.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Utils/time.test.js b/frontend/src/components/Utils/time.test.js
index 4c86be07..196c21c6 100644
--- a/frontend/src/components/Utils/time.test.js
+++ b/frontend/src/components/Utils/time.test.js
@@ -97,7 +97,7 @@ test('other date ISODate format', () => {
   expect(actualSingapore).toEqual(expectedSingapore);
 });
 
-test('24h empty input tests', () => {  
+test('24h empty input tests', () => {
   const testDate = new Date(Date.UTC(2020, 7, 23, 2, 3, 2, 4)).getTime();
   const expected = '02:03';
   expect(utils.get24hTime(testDate, '')).toBe(expected);
@@ -120,16 +120,15 @@ test('other time 24h format', () => {
   const actualSingapore = utils.get24hTime(testDate, TZ_SINGAPORE);
   expect(actualCentral).toEqual(expectedCentral);
   expect(actualSingapore).toEqual(expectedSingapore);
-})
+});
 
-test('ISODate empty input tests', () => {  
+test('ISODate empty input tests', () => {
   const testDate = new Date(Date.UTC(2020, 7, 23, 2, 3, 2, 4)).getTime();
   const expected = '2020-08-23';
   expect(utils.getISODate(testDate, '')).toBe(expected);
   expect(utils.getISODate(testDate, null)).toBe(expected);
-})
- })
-})
+});
+
 const mockTimeNow = 0;
 jest.mock('firebase/app', () => ({
     firestore: {

From 861d27316618e4875a1965147f42be8e3494cd50 Mon Sep 17 00:00:00 2001
From: Zach Ghera <zpghera00@gmail.com>
Date: Wed, 29 Jul 2020 17:26:04 -0400
Subject: [PATCH 10/11] Revert "Fix syntax that broke tests."

This reverts commit e36fb9f73513ad23766dcb504bcd54b211b3f77e. This change was made in a separate PR (#117) rather than in this branch.
---
 frontend/src/components/Utils/time.test.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Utils/time.test.js b/frontend/src/components/Utils/time.test.js
index 196c21c6..4c86be07 100644
--- a/frontend/src/components/Utils/time.test.js
+++ b/frontend/src/components/Utils/time.test.js
@@ -97,7 +97,7 @@ test('other date ISODate format', () => {
   expect(actualSingapore).toEqual(expectedSingapore);
 });
 
-test('24h empty input tests', () => {
+test('24h empty input tests', () => {  
   const testDate = new Date(Date.UTC(2020, 7, 23, 2, 3, 2, 4)).getTime();
   const expected = '02:03';
   expect(utils.get24hTime(testDate, '')).toBe(expected);
@@ -120,15 +120,16 @@ test('other time 24h format', () => {
   const actualSingapore = utils.get24hTime(testDate, TZ_SINGAPORE);
   expect(actualCentral).toEqual(expectedCentral);
   expect(actualSingapore).toEqual(expectedSingapore);
-});
+})
 
-test('ISODate empty input tests', () => {
+test('ISODate empty input tests', () => {  
   const testDate = new Date(Date.UTC(2020, 7, 23, 2, 3, 2, 4)).getTime();
   const expected = '2020-08-23';
   expect(utils.getISODate(testDate, '')).toBe(expected);
   expect(utils.getISODate(testDate, null)).toBe(expected);
-});
-
+})
+ })
+})
 const mockTimeNow = 0;
 jest.mock('firebase/app', () => ({
     firestore: {

From 985ca72a310a2a966ad8d4013b631690509f0b1c Mon Sep 17 00:00:00 2001
From: Zach Ghera <zpghera00@gmail.com>
Date: Wed, 29 Jul 2020 23:37:27 -0400
Subject: [PATCH 11/11] Change getErrorElement back to synchronous.

Issue earlier with error component must have been a different error that was accidentally fixed when switching to the asynchronous version of this function.
---
 .../components/ViewTrips/trips-container.js   | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/ViewTrips/trips-container.js b/frontend/src/components/ViewTrips/trips-container.js
index 9cb95752..00af7183 100644
--- a/frontend/src/components/ViewTrips/trips-container.js
+++ b/frontend/src/components/ViewTrips/trips-container.js
@@ -9,25 +9,25 @@ import Trip from './trip.js';
 const db = app.firestore();
 
 /**
- * Returns a `<div>` element with the specified error message.
+ * Returns a `<div>` element with an error message. The error message `error`
+ * will be logged but not seen by the user.
  *
  * TODO(Issue #98): Turn this func into component and add to Errors directory.
  *
  * @param {string} error Error message in `componentDidMount` catch statement.
- * @return {Promise<HTMLDivElement>} Promise object containing a `<div>` element
- *    with the error message `error` inside.
+ * @return {HTMLDivElement} `<div>` element containing the error message that
+ *     the user will see on the view trips page.
  */
 function getErrorElement(error) {
-  return new Promise(function(resolve) {
-    console.log(`Error in Trips Container: ${error}`);
-    resolve(
-      <div>
-        <p>Oops, it looks like we were unable to load your trips.
-                      Please wait a few minutes and try again.
-        </p>
-      </div>
-    );
-  });
+  console.log(`Error in Trips Container: ${error}`);
+
+  return (
+    <div>
+      <p>Oops, it looks like we were unable to load your trips.
+                    Please wait a few minutes and try again.
+      </p>
+    </div>
+  );
 }
 
 /**