diff --git a/frontend/src/components/ViewActivities/activityfns.js b/frontend/src/components/ViewActivities/activityfns.js index 2d9f4cd1..2a1c4d4a 100644 --- a/frontend/src/components/ViewActivities/activityfns.js +++ b/frontend/src/components/ViewActivities/activityfns.js @@ -62,10 +62,8 @@ export function sortByDate(tripActivities) { activities.set(dateKey, new Set([activity])); } } - // Sort activities by date. let activitiesSorted = Array.from(activities).sort(compareActivities); - return activitiesSorted; } diff --git a/frontend/src/components/ViewActivities/activitylist.js b/frontend/src/components/ViewActivities/activitylist.js index 068c0312..2e33f40a 100644 --- a/frontend/src/components/ViewActivities/activitylist.js +++ b/frontend/src/components/ViewActivities/activitylist.js @@ -8,17 +8,33 @@ import app from '../Firebase'; const db = app.firestore(); /** - * Gets the list of activities from the server. + * ReactJS class component for the list of activities. * - * @param {string} tripId The trip ID. - * @return {ActivityInfo[]} The list of trip activities. + * @property {Object} props ReactJS props. + * @property {string} tripId The tripID. */ -export async function getActivityList(tripId) { - let tripActivities = []; - - return db.collection(DB.COLLECTION_TRIPS).doc(tripId) - .collection(DB.COLLECTION_ACTIVITIES).get() - .then(querySnapshot => { +class ActivityList extends React.Component { + /** @override */ + constructor(props) { + super(props); + this.state = { days : [] }; + + this.getActivityList = this.getActivityList.bind(this); + } + + /** + * Gets the list of activities from the server. + * + * This function sets `this.state.days` to the sorted days. + * + * @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 => { console.log(doc.data()); let data = doc.data(); @@ -27,29 +43,18 @@ export async function getActivityList(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); + if (data[DB.ACTIVITIES_START_TIME] !== undefined) { // Not in new mode. + // 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) }); }); - return tripActivities; - }); -} - -/** - * React component for the list of activities. - * - * @param {Object} props ReactJS props. - * @param {string} props.tripId The trip's ID. - */ -class ActivityList extends React.Component { - /** @override */ - constructor(props) { - super(props); - this.state = { days : [] }; + } /** @@ -60,18 +65,10 @@ class ActivityList extends React.Component { * 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. - * - * This function also expects `this.props.tripId` to exist. */ async componentDidMount() { if (this.state === null || this.props.tripId === null) { return; } - let tripActivities = await getActivityList(this.props.tripId); - if (tripActivities === null) { - this.setState({days: null}); - return; - } - this.setState({days: activityFns.sortByDate(tripActivities)}); - console.log(this.state.days); + await this.getActivityList(this.props.tripId); } /** @override */ @@ -82,6 +79,7 @@ class ActivityList extends React.Component { } else if (this.state.days.length === 0) { return (

Plan your trip here!

); } + return (
{this.state.days.map((item, index) => (