Time, part 1: Activity timezone utils and dropdown.

frontend/package.json

@@ -8,7 +8,8 @@
     "@testing-library/user-event": "^7.2.1",
     "bootstrap": "^4.5.0",
     "firebase": "^7.15.5",
-    "history": "^5.0.0",
+    "moment-timezone": "^0.5.31",
+    "history": "^5.0.0"
     "react": "^16.13.1",
     "react-bootstrap": "1.0.1",
     "react-dom": "^16.13.1",

frontend/src/components/Utils/time.js

@@ -1,3 +1,5 @@
+import * as moment from 'moment-timezone';
+import { countryCodes } from '../../constants/countries.js';
 import * as firebase from 'firebase/app';
 
 /**
@@ -6,7 +8,7 @@ import * as firebase from 'firebase/app';
  *
  * @param {int} msTimestamp Timestamp in milliseconds of desired date.
  * @param {string} timezone Timezone in which to convert.
- * @returns {string} Time formatted into desired pretty string.
+ * @return {string} Time formatted into desired pretty string.
  */
 export function timestampToTimeFormatted(msTimestamp, timezone = 'America/New_York') {
   const date = new Date(msTimestamp);
@@ -24,7 +26,7 @@ export function timestampToTimeFormatted(msTimestamp, timezone = 'America/New_Yo
  *
  * @param {int} msTimestamp Timestamp in milliseconds of desired date.
  * @param {string} timezone Timezone in which to convert.
- * @returns {string} Time formatted into desired pretty string.
+ * @return {string} Time formatted into desired pretty string.
  */
 export function timestampToDateFormatted(msTimestamp, timezone='America/New_York') {
   const date = new Date(msTimestamp);
@@ -44,7 +46,7 @@ export function timestampToDateFormatted(msTimestamp, timezone='America/New_York
  * 
  * @param {int} msTimestamp Timestamp in milliseconds of desired date.
  * @param {string} timezone Timezone in which to convert.
- * @returns {string} Time formatted into desired pretty string.
+ * @return {string} Time formatted into desired pretty string.
  */
 export function timestampToFormatted(msTimestamp, timezone = 'America/New_York') {
   let date = new Date(msTimestamp);
@@ -85,3 +87,22 @@ export function getTimestampFromDateString(dateStr) {
 export function timestampToISOString(timestamp) {
   return timestamp.toDate().toISOString().substring(0,10);
 }
+
+/**
+ * Returns all the time zones in a country (in displayable format).
+ * 
+ * @param {string} countryName The name of the country for which to get the time zones.
+ * @return {string[]} The list of time zones in the provided country.
+ */
+export function timezonesForCountry(countryName) {
+  let zones;
+  try {
+    const countryCode = countryCodes[countryName];
+    zones = moment.tz.zonesForCountry(countryCode);
+  } catch (e) {
+    zones = moment.tz.names(); // List of all timezones.
+  }
+  return zones.map(e => {
+    return e.replace(/[_]/g, ' ');
+  });
+}

frontend/src/components/ViewActivities/activity.js

@@ -2,18 +2,10 @@ import React from 'react';
 import * as time from '../Utils/time.js';
 import * as DB from '../../constants/database.js'
 import '../../styles/activities.css';
-import { getField, writeActivity } from './activityfns.js';
-import { Accordion, Button, Card, Col, Form, Row } from 'react-bootstrap';
+import EditActivity from './editActivity.js';
+import { Accordion, Card } from 'react-bootstrap';
+import * as utils from './activityfns.js';
 
-/**
- * Return a dropdown of all the timezones.
- * 
- * @return {HTML} Dropdown of all the timezones.
- */
-function timezonePicker() {
-  // TODO: Make this dropdown. (#51)
-  return <div></div>
-}
 
 /**
  * React component for a single activity. 
@@ -33,32 +25,6 @@ class Activity extends React.Component {
     this.setEditActivity = this.setEditActivity.bind(this);
     this.finishEditActivity = this.finishEditActivity.bind(this);
     this.displayCard = this.displayCard.bind(this);
-    this.editActivity = this.editActivity.bind(this);
-
-    // References. 
-    this.editTitleRef = React.createRef();
-    this.editStartDateRef = React.createRef();
-    this.editEndDateRef = React.createRef();
-    this.editStartTimeRef = React.createRef();
-    this.editEndTimeRef = React.createRef();
-    this.editDescriptionRef = React.createRef();
-  }
-
-  /**
-   * Edit an activity in the database upon form submission.
-   * TODO: Update times as well! This only does the text field forms (#64).
-   */
-  editActivity() {
-    let newVals = {};
-    if (this.editTitleRef.current.value !== '') {
-      newVals[DB.ACTIVITIES_TITLE] = this.editTitleRef.current.value;
-    }
-    if (this.editDescriptionRef.current.value !== '') {
-      newVals[DB.ACTIVITIES_DESCRIPTION] = this.editDescriptionRef.current.value;
-    }
-    if (Object.keys(newVals).length !== 0) {
-      writeActivity(this.props.activity.tripId, this.props.activity.id, newVals);
-    }
   }
 
   /**
@@ -75,8 +41,6 @@ class Activity extends React.Component {
    */
   finishEditActivity(event) {
     this.setState({editing: false});
-    event.preventDefault();
-    this.editActivity();
   };
 
   /**
@@ -87,40 +51,15 @@ class Activity extends React.Component {
     if (!this.state.editing) { // View mode.
       return (
         <Card.Body onClick={this.setEditActivity}>
-          <p>Start time: {time.timestampToFormatted(activity[DB.ACTIVITIES_START_TIME])} </p>
-          <p>End time: {time.timestampToFormatted(activity[DB.ACTIVITIES_END_TIME])} </p>
+          <p>{utils.getField(activity, DB.ACTIVITIES_DESCRIPTION, '')}</p>
+          <p>Start time: {time.timestampToFormatted(activity[DB.ACTIVITIES_START_TIME])} 
+            {utils.getField(activity, DB.ACTIVITIES_START_COUNTRY, '', ' at ')}</p>
+          <p>End time: {time.timestampToFormatted(activity[DB.ACTIVITIES_END_TIME])} 
+            {utils.getField(activity, DB.ACTIVITIES_END_COUNTRY, '', ' at ')}</p>
         </Card.Body>
       );
     } else { // Edit mode.
-      return (
-        // TODO: Save form. (#48)
-        <Form className='activity-editor' onSubmit={this.finishEditActivity}>
-          <Form.Group as={Row} controlId='formActivityTitle'>
-            <Col sm={2}><Form.Label>Title:</Form.Label></Col>
-            <Col><Form.Control type='text' placeholder={activity[DB.ACTIVITIES_TITLE]} ref={this.editTitleRef}/></Col>
-          </Form.Group>
-          <Form.Group as={Row} controlId='formActivityStartTime'>
-            <Col sm={2}><Form.Label>From:</Form.Label></Col>
-            <Col sm={4}><Form.Control type='date' label='date' ref={this.editStartDateRef}/></Col>
-            <Col sm={2}><Form.Control type='time' label='time' ref={this.editStartTimeRef}/></Col>
-            <Col sm={1}>{timezonePicker()}</Col>
-          </Form.Group>
-          <Form.Group as={Row} controlId='formActivityEndTime'>
-            <Col sm={2}><Form.Label>To:</Form.Label></Col>
-            <Col sm={4}><Form.Control type='date' label='date' ref={this.editEndDateRef}/></Col>
-            <Col sm={2}><Form.Control type='time' label='time' ref={this.editEndTimeRef}/></Col>
-            <Col sm={1}>{timezonePicker()}</Col>
-          </Form.Group>
-          <Form.Group as={Row} controlId='formActivityDescription'>
-            <Col sm={2}><Form.Label>Description:</Form.Label></Col>
-            <Col><Form.Control type='text' 
-              placeholder={getField(activity, DB.ACTIVITIES_DESCRIPTION, 'Add some details!')}
-              ref={this.editDescriptionRef} />
-            </Col>
-          </Form.Group>
-          <Button type='submit' className='float-right'>Done!</Button>
-        </Form>
-      )
+      return ( <EditActivity activity={this.props.activity} submitFunction={this.finishEditActivity} />);
     }
   }
 

frontend/src/components/ViewActivities/activityfns.js

@@ -17,7 +17,7 @@ const db = app.firestore();
 
 /**
  * A single activity day. A single instance looks like:
- * <pre><code> ['MM/DD/YYYY', [activities on that day]] </code></pre>
+ * <pre><code> ['MM/DD/YYYY', [activities on that day]]</code></pre>
  * @typedef {Array.<string, ActivityInfo[]>} DayOfActivities
  * 
  */
@@ -53,7 +53,7 @@ export function sortByDate(tripActivities) {
 }
 
 /**
- * Put <code>a</code> and <code>b</code> in display order. 
+ * Put<code>a</code> and<code>b</code> in display order. 
  * This function is a comparator.
  * @param {ActivityInfo} a Dictionary representing activity a and its fields. 
  * @param {ActivityInfo} b Dictionary representing activity b and its fields.
@@ -77,13 +77,14 @@ export function compareActivities(a, b) {
  * @param {ActivityInfo} activity The activity from which to get the field.
  * @param {string} fieldName Name of field to get.
  * @param {*} defaultValue Value if field is not found/is null.
+ * @param {string} prefix The prefix to put before a returned value if the field exists.
  * @return {*} <code>activity[fieldName]</code> if possible, else <code>defaultValue</code>.
  */
-export function getField(activity, fieldName, defaultValue) {
+export function getField(activity, fieldName, defaultValue, prefix=''){
   if (activity[fieldName] === null || activity[fieldName] === undefined) {
     return defaultValue;
   }
-  return activity[fieldName];
+  return prefix + activity[fieldName];
 }
 
 /**

frontend/src/components/ViewActivities/activityfns.test.js

@@ -96,4 +96,6 @@ test('getField', () => {
   const activity = {field1: 'yes'};
   expect(activityFns.getField(activity, 'field1', 'nooo')).toBe('yes');
   expect(activityFns.getField(activity, 'field2', 4)).toBe(4);
+  expect(activityFns.getField(activity, 'field1', 'nooo', 'aww ')).toBe('aww yes');
+  expect(activityFns.getField(activity, 'field2', 4, ' and')).toBe(4);
 })