import React from 'react';
import * as activityFns from './activityfns.js';
import ActivityDay from './activityday.js';
import '../../styles/activities.css';
import * as DB from '../../constants/database.js';
import app from '../Firebase';

const db = app.firestore();

/**
 * ReactJS class for the list of activities. 
 * 
 * @property {Object} props ReactJS props.
 * @property {string} tripId The tripID.
 */
class ActivityList extends React.Component {
  /** @inheritdoc */
  constructor(props) {
    super(props);
    this.state = { days : [] };

    this.getActivityList = this.getActivityList.bind(this);
  }

  /**
   * Gets the list of activities from the server. 
   * 
   * @param {string} tripId The trip ID.
   */
  async getActivityList(tripId) {
    
    db.collection(DB.COLLECTION_TRIPS).doc(tripId)
    .collection(DB.COLLECTION_ACTIVITIES)
    .onSnapshot(querySnapshot => {
      let tripActivities = [];
      this.setState({days: []});
      querySnapshot.forEach(doc => {
        let data = doc.data();
        data['id'] = doc.id;
        data['tripId'] = tripId;
        
        // TODO: if start date != end date, split into 2 days. (#37)

        // Eliminate nanoseconds, convert to milliseconds.
        data[DB.ACTIVITIES_START_TIME] =
          data[DB.ACTIVITIES_START_TIME]['seconds'] * 1000;         
        data[DB.ACTIVITIES_END_TIME] = 
          data[DB.ACTIVITIES_END_TIME]['seconds'] * 1000;

        tripActivities.push(data);
      });
      this.setState({ days: activityFns.sortByDate(tripActivities) });
    });
    
  }

  /** 
   * @inheritdoc
   * 
   * Get sorted list of activities from the database. 
   * 
   * This function only queries the database if `this.state` is defined.
   * `this.state` gains an entry with key `days` with the list of activities 
   * sorted by date. 
   */
  async componentDidMount() {
    if (this.state === null || this.props.tripId === null) { return; }
    await this.getActivityList(this.props.tripId);
  }

  /** @inheritdoc */
  render() {
    if (this.state === null) { return (<div></div>); }
    if (this.state.days === null) {
      return (<p className='activity-list'>An error has occurred :(</p> );
    } else if (this.state.days.length === 0) {
      return (<p className='activity-list'>Plan your trip here!</p>);
    }

    return (
      <div className='activity-list'>
        {this.state.days.map((item, index) => (
          <ActivityDay date={item[0]} activities={item[1]} key={index}/>
        ))}
      </div>
    );
  }
}

export default ActivityList;

@@ -284,16 +284,26 @@
 S class 
+component 
 for the 
@@ -323,16 +323,16 @@
 ities. %0A
-
  * %0A * @
@@ -463,34 +463,32 @@
 nt %7B%0A  /** @
-inheritdoc
+override
  */%0A  constr
@@ -677,24 +677,92 @@
 ver. %0A   * %0A
+   * This function sets %60this.state.days%60 to the sorted days.%0A   * %0A
    * @param 
@@ -830,21 +830,16 @@
 ipId) %7B%0A
-    %0A
     db.c
@@ -1646,26 +1646,24 @@
  %0A   * @
-inheritdoc
+override
 %0A   * %0A 
@@ -2069,18 +2069,16 @@
 ** @
-inheritdoc
+override
  */%0A

Address PR comments.