Delete Trips

frontend/src/components/ViewTrips/delete-trip-button.js

@@ -0,0 +1,119 @@
+import React from 'react';
+
+import app from '../Firebase/';
+import Button from 'react-bootstrap/Button';
+
+import * as DB from '../../constants/database.js';
+
+const db = app.firestore();
+const LIMIT_QUERY_DOCS_RETRIEVED = 5;
+
+/**
+ * Component used to delete a Trip.
+ *
+ *
+ * @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) => {
+  /**
+   * Deletes documents in query with a batch delete.
+   *
+   * This was taken from the delete collection snippets in the documentation
+   * at https://firebase.google.com/docs/firestore/manage-data/delete-data.
+   *
+   * @param {firebase.firestore.Firestore} db Firestore database instance.
+   * @param {firebase.firestore.Query} query Query containing documents from
+   *     the activities subcollection of a trip documents.
+   * @param {Function} resolve Resolve function that returns a void Promise.
+   */
+  async function deleteQueryBatch(db, query, resolve) {
+    const snapshot = await query.get();
+
+    const batchSize = snapshot.size;
+    if (batchSize === 0) {
+      // When there are no documents left, we are done.
+      resolve();
+      return;
+    }
+
+    // Delete documents in a batch.
+    const batch = db.batch();
+    snapshot.docs.forEach((doc) => {
+      batch.delete(doc.ref);
+    });
+    await batch.commit();
+
+    // Recurse on the next process tick, to avoid
+    // exploding the stack.
+    process.nextTick(() => {
+      deleteQueryBatch(db, query, resolve);
+    });
+  }
+
+  /**
+   * Deletes a trip's subcollection of activities corresponding to the
+   * `tripId` prop.
+   *
+   * This was adapted from the delete collection snippets in the documentation
+   * at https://firebase.google.com/docs/firestore/manage-data/delete-data.
+   *
+   * TODO(Issue #81): Consider deleting data with callable cloud function
+   * https://firebase.google.com/docs/firestore/solutions/delete-collections.
+   */
+  async function deleteTripActivities() {
+    const query = db.collection(DB.COLLECTION_TRIPS)
+        .doc(props.tripId)
+        .collection(DB.COLLECTION_ACTIVITIES)
+        .orderBy(DB.ACTIVITIES_TITLE)
+        .limit(LIMIT_QUERY_DOCS_RETRIEVED);
+
+    return new Promise((resolve, reject) => {
+      deleteQueryBatch(db, query, resolve).catch(reject);
+    });
+  }
+
+  /**
+   * 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' +
+        ' action cannot be undone!')) {
+      await deleteTripActivities()
+          .then(() => {
+            console.log("Activity subcollection successfully deleted for trip" +
+                        " with id: ", props.tripId);
+          })
+          .catch(error => {
+            console.error("Error deleting activities subcollection: ", error);
+          });
+
+      db.collection(DB.COLLECTION_TRIPS)
+          .doc(props.tripId)
+          .delete()
+          .then(() => {
+            console.log("Document successfully deleted with id: ", props.tripId);
+          }).catch(error => {
+            console.error("Error removing document: ", error);
+          });
+
+      props.refreshTripsContainer();
+   }
+  }
+
+  return (
+    <Button
+      type='button'
+      variant='primary'
+      onClick={deleteTrip} >
+      Delete Trip
+    </Button>
+  );
+}
+
+export default DeleteTripsButton;

frontend/src/components/ViewTrips/index.js

@@ -109,6 +109,7 @@ class ViewTrips extends React.Component {
         </div>
         <TripsContainer
           handleEditTrip={this.showEditTripModal}
+          refreshTripsContainer={this.refreshTripsContainer}
           key={this.state.refreshTripsContainer}
         />
       </div>

frontend/src/components/ViewTrips/trip.js

@@ -4,6 +4,7 @@ import Button from 'react-bootstrap/Button';
 
 import { timestampToISOString } from '../Utils/time.js';
 import { getUserEmailFromUid } from '../Utils/temp-auth-utils.js';
+import DeleteTripButton from './delete-trip-button.js';
 import ViewActivitiesButton from './view-activities-button.js';
 
 /**
@@ -52,6 +53,8 @@ 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
  */
@@ -79,6 +82,10 @@ const Trip = (props) => {
       <p>{description}</p>
       <p>{collaboratorEmailsStr}</p>
 
+      <DeleteTripButton
+        tripId={props.tripId}
+        refreshTripsContainer={props.refreshTripsContainer}
+      />
       <Button
         type='button'
         onClick={() => props.handleEditTrip(props.tripId, formattedTripData)}

frontend/src/components/ViewTrips/trips-container.js

@@ -29,19 +29,22 @@ function queryUserTrips(db) {
  * `<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.
+ *     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`.
+ *     of Trip React/HTML elements corresponding to the Trip documents included
+ *     in `querySnapshot`.
  */
-function serveTrips(querySnapshot, handleEditTrip) {
+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}
           />
         )
@@ -70,6 +73,8 @@ 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
@@ -86,7 +91,8 @@ class TripsContainer extends React.Component {
     try {
       const querySnapshot = await queryUserTrips(db);
       let tripsContainer = await serveTrips(querySnapshot,
-                                            this.props.handleEditTrip);
+                                            this.props.handleEditTrip,
+                                            this.props.refreshTripsContainer);
       this.setState({ trips: tripsContainer });
     }
     catch (error) {