Edit Trip Implementation

frontend/src/components/Utils/filter-input.js

@@ -48,9 +48,9 @@ export function getCollaboratorUidArray(collaboratorEmailArr) {
  * attacks. Thus, no sanitization is needed for text inputs besides providing a
  * default value in a Trip field where applicable.
  *
- * @param {Object} rawTripObj A JS Object containing the raw form data from the
+ * @param {!Object} rawTripObj A JS Object containing the raw form data from the
  *     add trip form.
- * @return {Object} Formatted/cleaned version of `rawTripObj` holding the data
+ * @return {!Object} Formatted/cleaned version of `rawTripObj` holding the data
  *     for the new Trip document that is to be created.
  */
 export function formatTripData(rawTripObj) {

frontend/src/components/Utils/temp-auth-utils.js

@@ -2,15 +2,15 @@
  * @fileoverview This is a temporary file that is used to implement 'fake'
  * versions of the Auth utility functions used in the ViewTrips components.
  *
- * TODO(Issue 55): Remove this whole file function and replace any imports to
+ * TODO(Issue #55): Remove this whole file function and replace any imports to
  *                 this file with Auth utils.
  */
 
 
 /**
  * Temporary hardcoded function that returns the current users email.
  *
- * @return Hardcoded user email string.
+ * @return {string} Hardcoded user email string.
  */
 export function getCurUserEmail() {
   return 'matt.murdock';
@@ -19,7 +19,7 @@ export function getCurUserEmail() {
 /**
  * Temporary hardcoded function that returns the current users uid.
  *
- * @return Hardcoded user uid string.
+ * @return {string} Hardcoded user uid string.
  */
 export function getCurUserUid() {
   return getUserUidFromUserEmail(getCurUserEmail());

frontend/src/components/Utils/time.js

@@ -61,7 +61,7 @@ export function timestampToFormatted(msTimestamp, timezone = "America/New_York")
 /**
  * Return a Firestore Timestamp corresponding to the date in `dateStr`.
  *
- * @param {string} dateStr String containing a date in the form 'yyyy-mm-dd'.
+ * @param {string} dateStr String containing a date in the form 'YYYY-MM-DD'.
  * @return {firebase.firestore.Timestamp} Firestore timestamp object created.
  */
 export function getTimestampFromDateString(dateStr) {
@@ -73,3 +73,13 @@ export function getTimestampFromDateString(dateStr) {
   const date = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
   return firebase.firestore.Timestamp.fromDate(date);
 }
+
+/**
+ * Formats a Firestore timestamp into a date string in ISO format.
+ *
+ * @param {firebase.firestore.Timestamp} timestamp Firestore timestamp object.
+ * @return {string} ISO formatted date string: "YYYY-MM-DD or 2020-05-12".
+ */
+export function timestampToISOString(timestamp) {
+  return timestamp.toDate().toISOString().substring(0,10);
+}

frontend/src/components/ViewTrips/index.js

@@ -19,14 +19,7 @@ class ViewTrips extends React.Component {
                    refreshTripsContainer: false,
                    refreshSaveTripModal: false,
                    tripId: null,
-                   placeholderObj: {
-                                     name:          null,
-                                     description:   null,
-                                     destination:   null,
-                                     startDate:     null,
-                                     endDate:       null,
-                                     collaborators: []
-                                   }
+                   defaultFormObj: null,
                  };
   }
 
@@ -75,14 +68,7 @@ class ViewTrips extends React.Component {
   showAddTripModal = () => {
     this.setState({
       tripId: null,
-      placeholderObj: {
-        name:          'Enter Trip Name',
-        description:   'Enter Trip Description',
-        destination:   'Enter Trip Destination',
-        startDate:     '',
-        endDate:       '',
-        collaborators: ['person@email.xyz']
-      }
+      defaultFormObj: null,
     });
     this.showSaveTripModal();
   }
@@ -94,19 +80,11 @@ class ViewTrips extends React.Component {
    * to ensure the modal has the visual characteristics of an "edit trip" modal
    * and overwrites and existing Trip document in the database.
    *
-   * TODO(Issue #69): Get individual tripId and trip data for placeholderObj.
    */
-  showEditTripModal = () => {
+  showEditTripModal = (tripId, tripData) => {
     this.setState({
-      tripId: null,
-      placeholderObj: {
-        name:          null,
-        description:   null,
-        destination:   null,
-        startDate:     null,
-        endDate:       null,
-        collaborators: []
-      }
+      tripId: tripId,
+      defaultFormObj: tripData
     });
     this.showSaveTripModal();
   }
@@ -121,7 +99,7 @@ class ViewTrips extends React.Component {
           handleClose={this.hideSaveTripModal}
           refreshTripsContainer={this.refreshTripsContainer}
           tripId={this.state.tripId}
-          placeholderObj={this.state.placeholderObj}
+          defaultFormObj={this.state.defaultFormObj}
           key={this.state.refreshSaveTripModal}
         />
         <div className="manage-trips-bar">
@@ -130,6 +108,7 @@ class ViewTrips extends React.Component {
           </Button>
         </div>
         <TripsContainer
+          handleEditTrip={this.showEditTripModal}
           key={this.state.refreshTripsContainer}
         />
       </div>

frontend/src/components/ViewTrips/save-trip-form-elements.js

@@ -0,0 +1,143 @@
+import React from 'react';
+
+import { Form }  from 'react-bootstrap';
+
+/**
+ * Returns a Form.Control element with input type 'text' and other props
+ * specified by the function parameters.
+ *
+ * @param {React.RefObject} ref Ref attached to the value inputted in the form.
+ * @param {string} placeholder Placeholder text value in the form input.
+ * @param {?string} defaultText Optional default text value in the form input.
+ *     Null if no default text.
+ * @return {JSX.Element} The Form.Control element.
+ */
+function createTextFormControl(ref, placeholder, defaultText) {
+  return (
+    <Form.Control
+      type='text'
+      placeholder={placeholder}
+      defaultValue={defaultText}
+      ref={ref}
+    />
+  );
+}
+
+/**
+ * Returns a Form.Control element with input type 'date' and other props
+ * specified by the function parameters.
+ *
+ * @param {React.RefObject} ref Ref attached to the date inputted in the form.
+ * @param {?string} defaultDate Optional default ISO date string placed in the
+ *     form input. Null if no default date.
+ * @return {JSX.Element} The Form.Control element.
+ */
+function createDateFormControl(ref, defaultDate) {
+  return (
+    <Form.Control
+      type='date'
+      ref={ref}
+      defaultValue={defaultDate}
+    />
+  );
+}
+
+/**
+ * Returns a Form.Control element with input type 'email' and other props
+ * specified by the function parameters.
+ *
+ * @param {React.RefObject} ref Ref attached to the value inputted in the form.
+ * @param {number} idx Index of the email Form.Control used for key prop.
+ * @param {string} placeholder Placeholder text value in the form input.
+ * @param {?Array<string>} defaultEmailArr Array of the emails to be displayed
+ *     in the default form fields. Null if no default emails.
+ * @return {JSX.Element} The Form.Control element.
+ */
+function createEmailFormControl(ref, idx, placeholder, defaultEmailArr) {
+  if (defaultEmailArr === null) {
+    return (
+      <Form.Control
+        type='email'
+        placeholder={placeholder}
+        ref={ref}
+        key={idx}
+      />
+    );
+  }
+  return (
+    <Form.Control
+      type='email'
+      placeholder={placeholder}
+      defaultValue={defaultEmailArr[idx + 1]}
+      ref={ref}
+      key={idx}
+    />
+  );
+}
+
+/**
+ * Returns multiple Form.Control elements with input type 'email' and other
+ * props specified by the function parameters.
+ *
+ * One is added to the index of the emails show in order to display all
+ * collaborators except the current user.
+ *
+ * TODO(Issue #67): Email verification before submitting the form.
+ *
+ * TODO(Issue #72): More intuitive remove collaborator when !`isAddTripForm`.
+ *
+ * @param {!Array<React.RefObject>} refArr Array of refs attached to the
+ *     emails inputted in the form.
+ * @param {boolean} isAddTripForm True if form is adding new trip, false if
+ *     form is editting existing trip.
+ * @param {string} placeholder Placeholder text value in the form input.
+ * @param {?Array<string>} defaultEmailArr Array of the emails to be displayed
+ *     in the default form fields.
+ * @return {JSX.Element} The Form.Control elements.
+ */
+function createMultiFormControl(refArr, placeholder, defaultEmailArr) {
+  return (
+    <>
+      {refArr.map((ref, idx) =>
+        createEmailFormControl(ref, idx, placeholder, defaultEmailArr)
+      )}
+    </>
+  );
+}
+
+/**
+ * Returns a Form.Group element with components specified by the input args.
+ *
+ * @param {string} controlId Prop that accessibly wires the nested label and
+ *                           input prop.
+ * @param {string} formLabel Label/title for the form input.
+ * @param {string} inputType Input type of the form.
+ * @param {!React.RefObject} ref Ref attached to the values inputted in the form.
+ * @param {string} placeholder Placeholder text value in the form input.
+ * @param {?string|?Array<string>} defaultVal Default value in the form input.
+ * @return {JSX.Element} The Form.Group element.
+ */
+export function createFormGroup(controlId, formLabel, inputType,
+                          ref, placeholder, defaultVal) {
+  let formControl;
+  switch(inputType) {
+    case 'text':
+      formControl = createTextFormControl(ref, placeholder, defaultVal);
+      break;
+    case 'date':
+      formControl = createDateFormControl(ref, defaultVal);
+      break;
+    case 'emails':
+      formControl = createMultiFormControl(ref, placeholder, defaultVal);
+      break;
+    default:
+      console.error('There should be no other input type')
+  }
+
+  return (
+    <Form.Group controlId={controlId}>
+      <Form.Label>{formLabel}</Form.Label>
+      {formControl}
+    </Form.Group>
+  )
+}