Merge pull request #97 from googleinterns/struct-to-dict-objs

Refactor Objects in ViewTrips Directory

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

@@ -2,6 +2,7 @@ import * as firebase from 'firebase/app';
 
 import authUtils from '../AuthUtils';
 import { getTimestampFromISODateString } from './time.js'
+import * as DB from '../../constants/database.js';
 
 /**
  * Return a string containing the cleaned text input.
@@ -56,17 +57,20 @@ export async function getCollaboratorUidArray(collaboratorEmailArr) {
 export async function formatTripData(rawTripObj) {
   const defaultName = "Untitled Trip";
   const defaultDestination = "No Destination"
-  const collaboratorUidArr = await getCollaboratorUidArray(rawTripObj.collaboratorEmails);
+  const collaboratorUidArr = await getCollaboratorUidArray(
+                                          rawTripObj[DB.TRIPS_COLLABORATORS]);
 
   const formattedTripObj = {
-    trip_creation_time: firebase.firestore.Timestamp.now(),
-    name:               getCleanedTextInput(rawTripObj.name, defaultName),
-    description:        rawTripObj.description,
-    destination:        getCleanedTextInput(rawTripObj.destination,
-                                                 defaultDestination),
-    start_date:         getTimestampFromISODateString(rawTripObj.startDate),
-    end_date:           getTimestampFromISODateString(rawTripObj.endDate),
-    collaborators:      collaboratorUidArr,
+    [DB.TRIPS_UPDATE_TIMESTAMP]: firebase.firestore.Timestamp.now(),
+    [DB.TRIPS_TITLE]: getCleanedTextInput(rawTripObj[DB.TRIPS_TITLE], defaultName),
+    [DB.TRIPS_DESCRIPTION]: rawTripObj[DB.TRIPS_DESCRIPTION],
+    [DB.TRIPS_DESTINATION]:
+        getCleanedTextInput(rawTripObj[DB.TRIPS_DESTINATION], defaultDestination),
+    [DB.TRIPS_START_DATE]:
+        getTimestampFromISODateString(rawTripObj[DB.TRIPS_START_DATE]),
+    [DB.TRIPS_END_DATE]:
+        getTimestampFromISODateString(rawTripObj[DB.TRIPS_END_DATE]),
+    [DB.TRIPS_COLLABORATORS]: collaboratorUidArr,
   };
 
   return formattedTripObj;

frontend/src/components/Utils/time.test.js

@@ -129,7 +129,6 @@ test('ISODate empty input tests', () => {
   expect(utils.getISODate(testDate, null)).toBe(expected);
 });
 
-
 const mockTimeNow = 0;
 jest.mock('firebase', () => ({
     firestore: {

frontend/src/components/ViewTrips/save-trip-modal.js

@@ -39,7 +39,7 @@ class SaveTripModal extends React.Component {
     super(props);
 
     // Create Refs to reference form input elements
-    this.nameRef = React.createRef();
+    this.titleRef = React.createRef();
     this.descriptionRef = React.createRef();
     this.destinationRef = React.createRef();
     this.startDateRef = React.createRef();
@@ -57,7 +57,9 @@ class SaveTripModal extends React.Component {
     if (this.isAddTripForm) {
       collaboratorsRefArr.push(React.createRef());
     } else {
-      for (let i = 1; i < this.props.defaultFormObj.collaborators.length; i++) {
+      const numCollaborators =
+          this.props.defaultFormObj[DB.TRIPS_COLLABORATORS].length;
+      for (let i = 1; i < numCollaborators; i++) {
         collaboratorsRefArr.push(React.createRef())
       }
     }
@@ -113,17 +115,16 @@ class SaveTripModal extends React.Component {
    * Formats/cleans the form data and saves the Trip document in firestore.
    */
   saveTrip = async () => {
-    const tripData = await formatTripData(
-        {
-          name: this.nameRef.current.value,
-          description: this.descriptionRef.current.value,
-          destination: this.destinationRef.current.value,
-          startDate: this.startDateRef.current.value,
-          endDate: this.endDateRef.current.value,
-          collaboratorEmails:
-              this.state.collaboratorsRefArr.map(ref => ref.current.value),
-        }
-    );
+    const rawTripData = {
+      [DB.TRIPS_TITLE]: this.titleRef.current.value,
+      [DB.TRIPS_DESCRIPTION]: this.descriptionRef.current.value,
+      [DB.TRIPS_DESTINATION]: this.destinationRef.current.value,
+      [DB.TRIPS_START_DATE]: this.startDateRef.current.value,
+      [DB.TRIPS_END_DATE]: this.endDateRef.current.value,
+      [DB.TRIPS_COLLABORATORS]:
+          this.state.collaboratorsRefArr.map(ref => ref.current.value),
+    };
+    const tripData = await formatTripData(rawTripData);
 
     if (this.isAddTripForm) {
       this.addNewTrip(tripData);
@@ -175,12 +176,12 @@ class SaveTripModal extends React.Component {
         <Form>
           <Modal.Body>
             {createFormGroup(
-                 'tripNameGroup',                         // controlId
-                 'Trip Name',                             // formLabel
-                 'text',                                  // inputType
-                  this.nameRef,                           // ref
-                  'Enter Trip Name',                      // placeholder
-                  this.getDefaultFormField(DB.TRIPS_NAME) // defaultVal
+                 'tripTitleGroup',                         // controlId
+                 'Trip Title',                             // formLabel
+                 'text',                                   // inputType
+                  this.titleRef,                           // ref
+                  'Enter Trip Title',                      // placeholder
+                  this.getDefaultFormField(DB.TRIPS_TITLE) // defaultVal
             )}
             {createFormGroup(
                   'tripDescGroup',                               // controlId

frontend/src/components/ViewTrips/trip.js

@@ -6,6 +6,7 @@ import authUtils from '../AuthUtils';
 import { timestampToISOString, getDateRangeString } from '../Utils/time.js';
 import DeleteTripButton from './delete-trip-button.js';
 import ViewActivitiesButton from './view-activities-button.js';
+import * as DB from '../../constants/database.js';
 
 /**
  * Return collaborator emails corresponding to the collaborator uid's
@@ -39,12 +40,13 @@ export function moveCurUserEmailToFront(collaboratorEmailArr) {
  *        created whenever this key is updated
  */
 const Trip = (props) => {
-  const name = props.tripData.name;
-  const description = props.tripData.description;
-  const destination = props.tripData.destination;
-  const startDateTimestamp = props.tripData.start_date;
-  const endDateTimestamp = props.tripData.end_date;
-  const collaboratorUidArr = props.tripData.collaborators;
+  // Unpack trip document data.
+  const title = props.tripData[DB.TRIPS_TITLE];
+  const description = props.tripData[DB.TRIPS_DESCRIPTION];
+  const destination = props.tripData[DB.TRIPS_DESTINATION];
+  const startDateTimestamp = props.tripData[DB.TRIPS_START_DATE];
+  const endDateTimestamp = props.tripData[DB.TRIPS_END_DATE];
+  const collaboratorUidArr = props.tripData[DB.TRIPS_COLLABORATORS];
   const [collaboratorEmailsStr, setCollaboratorEmailsStr] = useState('');
 
   useEffect(() => {
@@ -68,18 +70,20 @@ const Trip = (props) => {
     return () => { componentStillMounted = false; };
   }, [collaboratorUidArr]);
 
+  // Re-package trip document data with correctly formatted data for the
+  // SaveTripModal component to use when filling out form input default values.
   const formattedTripData = {
-    name:          name,
-    description:   description,
-    destination:   destination,
-    start_date:    timestampToISOString(startDateTimestamp),
-    end_date:      timestampToISOString(endDateTimestamp),
-    collaborators: collaboratorEmailsStr.split(', ')
+    [DB.TRIPS_TITLE]: title,
+    [DB.TRIPS_DESCRIPTION]: description,
+    [DB.TRIPS_DESTINATION]: destination,
+    [DB.TRIPS_START_DATE]: timestampToISOString(startDateTimestamp),
+    [DB.TRIPS_END_DATE]: timestampToISOString(endDateTimestamp),
+    [DB.TRIPS_COLLABORATORS]: collaboratorEmailsStr.split(', '),
   };
 
   return (
     <div>
-      <h2>{name}</h2>
+      <h2>{title}</h2>
       <p>{destination}</p>
       <p>{getDateRangeString(startDateTimestamp, endDateTimestamp)}</p>
       <p>{description}</p>

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

@@ -9,8 +9,8 @@ import Trip from './trip.js';
 const db = app.firestore();
 
 /**
- * Returns a `<div>` element with an error message. The error message `error`
- * will be logged but not seen by the user.
+ * Returns a `<div>` element with a predefined error message after logging the
+ * error message `error` obtained from `componentDidMount` catch statement.
  *
  * TODO(Issue #98): Turn this func into component and add to Errors directory.
  *
@@ -61,7 +61,7 @@ class TripsContainer extends React.Component {
     const curUserUid = authUtils.getCurUserUid();
     db.collection(DB.COLLECTION_TRIPS)
         .where(DB.TRIPS_COLLABORATORS, 'array-contains', curUserUid)
-        .orderBy(DB.TRIPS_CREATION_TIME, 'desc')
+        .orderBy(DB.TRIPS_UPDATE_TIMESTAMP, 'desc')
         .onSnapshot(querySnapshot => {
           const tripsArr = querySnapshot.docs.map(doc =>
               ( <Trip

frontend/src/constants/database.js

@@ -2,13 +2,13 @@
  * This file specifies the database collection and field names.
  */
 export const COLLECTION_TRIPS = 'trips';
-export const TRIPS_NAME = 'name';
+export const TRIPS_TITLE = 'title';
 export const TRIPS_DESCRIPTION = 'description';
 export const TRIPS_DESTINATION = 'destination';
 export const TRIPS_COLLABORATORS = 'collaborators';
 export const TRIPS_START_DATE = 'start_date';
 export const TRIPS_END_DATE = 'end_date';
-export const TRIPS_CREATION_TIME = 'trip_creation_time';
+export const TRIPS_UPDATE_TIMESTAMP = 'trip_update_timestamp';
 
 export const COLLECTION_ACTIVITIES = 'activities';
 export const ACTIVITIES_START_TIME = 'start_time';