Merge pull request #38 from googleinterns/feed-trip-data-react

Serve All Trip Details to UI in React

frontend/src/components/ViewTrips/trip.js

@@ -1,4 +1,29 @@
 import React from 'react';
+import Button from 'react-bootstrap/Button';
+
+import ViewActivitiesButton from './view-activities-button.js';
+
+/**
+ * Returns the date range of the trip associated with the Trip document data
+ * `tripObj`.
+ *
+ * Notes:
+ *  - tripObj will always contain valid start_date and end_date fields.
+ *  - When the Firestore Timestamps contained in `tripObj` converted to js
+ *    dates, the months are 0 indexed rather than 1 indexed so they must be
+ *    incremented by 1 in order for the month to be correct.
+ *
+ * @param {firebase.firestore.DocumentData} tripObj Object containing the fields
+ *    and values for a Trip document.
+ * @return Date range of the trip (if it exists).
+ */
+export function getDateRange(tripObj) {
+  const startDate = tripObj.start_date.toDate();
+  const endDate = tripObj.end_date.toDate();
+  return `${startDate.getMonth() + 1}/${startDate.getDate()}/`  +
+      `${startDate.getFullYear()} - ${endDate.getMonth() + 1}/` +
+      `${endDate.getDate()}/${endDate.getFullYear()}`;
+}
 
 /**
  * Component corresponding to the container containing an individual trip.
@@ -7,11 +32,6 @@ import React from 'react';
  * when trips are added and/or editted. Thus, no error checking is done here
  * on the 'display' side.
  *
- * TODO(Issue 17): Feed all the Trip Doc data to the UI.
- * Temporarily, only the title and associated document ID are included in a
- * text element for each trip <div> element. This is done to simple test the
- * query functionality.
- *
  * @param {Object} props These are the props for this component:
  * - tripObj: JS object holding a Trip document fields and corresponding values.
  * - tripId: Document ID for the current Trip document.
@@ -20,7 +40,14 @@ const Trip = (props) => {
   return (
     <div>
       <h2>{props.tripObj.name}</h2>
-      <p>Doc Id: {props.tripId}</p>
+      <p>{props.tripObj.description}</p>
+      <p>{getDateRange(props.tripObj)}</p>
+      <p>{props.tripObj.destination}</p>
+      <p>{props.tripObj.collaborators.join(', ')}</p>
+
+      {/* TODO(Issue 15): Add edit trip page. */}
+      <Button type='button' onClick={null} variant='primary'>Edit</Button>
+      <ViewActivitiesButton tripId={props.tripId} />
     </div>
   );
 };

frontend/src/components/ViewTrips/trip.test.js

@@ -0,0 +1,27 @@
+import * as firebase from 'firebase/app';
+import 'firebase/firebase-firestore';
+
+import { getDateRange } from './trip.js'
+
+test('getDateRange test', () => {
+  // Dates used for both test and expected date strings.
+  const startMonth = 12;
+  const startDay = 17;
+  const startYear = 1995;
+  const endMonth = 5;
+  const endDay = 24;
+  const endYear = 1996;
+
+  // Note that the months in JS dates are 0 indexed rather than 1 indexed so
+  // they must be decremented by 1 in order for the month to be correct.
+  const testStartDate = firebase.firestore.Timestamp.fromDate(
+      new Date(startYear, startMonth - 1, startDay));
+  const testEndDate = firebase.firestore.Timestamp.fromDate(
+      new Date(endYear, endMonth - 1, endDay));
+  const testTripObj = {start_date: testStartDate, end_date: testEndDate};
+  const testDateRange = getDateRange(testTripObj);
+
+  const expectedDateRange = `${startMonth}/${startDay}/${startYear} - ` +
+        `${endMonth}/${endDay}/${endYear}`;
+  expect(testDateRange).toEqual(expectedDateRange);
+})

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import Trip from './trip.js';
-import * as DATABASE from '../../constants/database.js';
+import * as DB from '../../constants/database.js';
 
 
 /**
@@ -15,8 +15,8 @@ import * as DATABASE from '../../constants/database.js';
  *    containing the query results with zero or more Trip  documents.
  */
 function queryUserTrips(db, userEmail) {
-  return db.collection(DATABASE.COLLECTION_TRIPS)
-      .where(DATABASE.TRIPS_COLLABORATORS, 'array-contains', userEmail)
+  return db.collection(DB.COLLECTION_TRIPS)
+      .where(DB.TRIPS_COLLABORATORS, 'array-contains', userEmail)
       .get();
 }
 

frontend/src/components/ViewTrips/view-activities-button.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import Button from 'react-bootstrap/Button';
+
+import { VIEW_ACTIVITIES } from '../../constants/routes.js';
+
+/**
+ * Component used for the ViewTrips page to redirect to the ViewActivities page.
+ */
+const ViewActivitiesButton = (props) => {
+  const history = useHistory();
+
+  function goToViewActivities() {
+    history.push(`${VIEW_ACTIVITIES}/${props.tripId}`);
+  }
+
+  return (
+    <Button type='button' onClick={goToViewActivities} variant='primary'>
+      View Activities!
+    </Button>
+  );
+}
+
+export default ViewActivitiesButton;

frontend/src/components/ViewTrips/view-activities-button.test.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+
+import ViewActivitiesButton from './view-activities-button.js';
+import { VIEW_ACTIVITIES } from '../../constants/routes.js';
+
+// Mock the push function from react-router-dom's useHistory.
+const mockHistoryPush = jest.fn();
+jest.mock('react-router-dom', () => ({
+  useHistory: () => ({
+    push: mockHistoryPush
+  })
+}));
+
+describe('SignInButton component', () => {
+  test('Redirects to ViewActivities page on click', () => {
+    const testTripId = 'abc123';
+    const { getByText } = render(<ViewActivitiesButton tripId={testTripId}/>);
+    fireEvent.click(getByText('View Activities!'));
+    expect(mockHistoryPush).toBeCalledWith(`${VIEW_ACTIVITIES}/${testTripId}`);
+  })
+});