fix(SavedTripList): Add trip editing commands to saved trips list.

lib/actions/user.js

@@ -128,10 +128,10 @@ export function createOrUpdateUser (userData) {
 
 /**
  * Updates a logged-in user's monitored trip,
- * then, if that was successful, refreshes the redux monitoredTrips
- * with the updated trip.
+ * then, if that was successful, alerts (optional)
+ * and refreshes the redux monitoredTrips with the updated trip.
  */
-export function createOrUpdateUserMonitoredTrip (tripData, isNew) {
+export function createOrUpdateUserMonitoredTrip (tripData, isNew, silentOnSuccess) {
   return async function (dispatch, getState) {
     const { otp, user } = getState()
     const { otp_middleware: otpMiddleware = null } = otp.config.persistence
@@ -148,7 +148,9 @@ export function createOrUpdateUserMonitoredTrip (tripData, isNew) {
 
       // TODO: improve the UI feedback messages for this.
       if (result.status === 'success' && result.data) {
-        alert('Your preferences have been saved.')
+        if (!silentOnSuccess) {
+          alert('Your preferences have been saved.')
+        }
 
         // Reload user's monitored trips after add/update.
         await dispatch(fetchUserMonitoredTrips(accessToken))

lib/components/user/saved-trip-editor.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import { Button } from 'react-bootstrap'
 
 import StackedPaneDisplay from './stacked-pane-display'
 
@@ -11,39 +10,19 @@ const SavedTripEditor = ({
   monitoredTrip,
   onCancel,
   onComplete,
-  onDeleteTrip,
   panes
 }) => {
   if (monitoredTrip) {
-    let paneSequence
-    if (isCreating) {
-      paneSequence = [
-        {
-          pane: panes.basics,
-          title: 'Trip information'
-        },
-        {
-          pane: panes.notifications,
-          title: 'Trip notifications'
-        }
-      ]
-    } else {
-      paneSequence = [
-        {
-          pane: panes.basics,
-          title: 'Trip overview'
-        },
-        {
-          pane: panes.notifications,
-          title: 'Trip notifications'
-        },
-        {
-          // TODO: Find a better place for this.
-          pane: () => <Button bsStyle='danger' onClick={onDeleteTrip}>Delete Trip</Button>,
-          title: 'Danger zone'
-        }
-      ]
-    }
+    const paneSequence = [
+      {
+        pane: panes.basics,
+        title: 'Trip information'
+      },
+      {
+        pane: panes.notifications,
+        title: 'Trip notifications'
+      }
+    ]
 
     return (
       <>

lib/components/user/saved-trip-list.js

@@ -1,9 +1,11 @@
+import clone from 'clone'
 import React, { Component } from 'react'
-import { Button, ButtonGroup } from 'react-bootstrap'
+import { Button, ButtonGroup, Panel } from 'react-bootstrap'
 import { connect } from 'react-redux'
 import { withLoginRequired } from 'use-auth0-hooks'
 
 import * as uiActions from '../../actions/ui'
+import * as userActions from '../../actions/user'
 import DesktopNav from '../app/desktop-nav'
 import LinkButton from './link-button'
 import TripSummaryPane from './trip-summary-pane'
@@ -17,11 +19,32 @@ class SavedTripList extends Component {
    * Navigate to the saved trip's URL #/savedtrips/trip-id-123.
    * (There shouldn't be a need to encode the ids from Mongo.)
    */
-  _handleTripSelect = trip => () => {
+  _handleEditTrip = trip => () => {
     const { id } = trip
     this.props.routeTo(`/savedtrips/${id}`)
   }
 
+  /**
+   * Pauses or resumes the specified trip.
+   */
+  _handlePauseOrResumeMonitoring = trip => async () => {
+    const newTrip = clone(trip)
+    newTrip.isActive = !newTrip.isActive
+
+    // Silent update of existing trip.
+    await this.props.createOrUpdateUserMonitoredTrip(newTrip, false, true)
+  }
+
+  /**
+   * Deletes a trip from persistence
+   * and refetches the redux monitoredTrips for the logged-in user.
+   */
+  _handleDeleteTrip = trip => async () => {
+    if (confirm('Would you like to remove this trip?')) {
+      await this.props.deleteUserMonitoredTrip(trip.id)
+    }
+  }
+
   render () {
     const { trips } = this.props
 
@@ -44,13 +67,24 @@ class SavedTripList extends Component {
           {accountLink}
           <h1>My saved trips</h1>
           <p>Click on a saved trip below to modify it.</p>
-          <ButtonGroup vertical block>
-            {trips.map((trip, index) => (
-              <Button key={index} onClick={this._handleTripSelect(trip)} style={{textAlign: 'left'}}>
+
+          {trips.map((trip, index) => (
+            <Panel key={index}>
+              <Panel.Heading>
+                <Panel.Title componentClass='h3'>{trip.tripName}</Panel.Title>
+              </Panel.Heading>
+              <Panel.Body>
                 <TripSummaryPane monitoredTrip={trip} />
-              </Button>
-            ))}
-          </ButtonGroup>
+                <ButtonGroup>
+                  <Button bsSize='small' onClick={this._handlePauseOrResumeMonitoring(trip)}>
+                    {trip.isActive ? 'Pause' : 'Monitor' /* TODO: Find better word for 'Monitor' */ }
+                  </Button>
+                  <Button bsSize='small' onClick={this._handleEditTrip(trip)}>Edit</Button>
+                  <Button bsSize='small' onClick={this._handleDeleteTrip(trip)}>Delete</Button>
+                </ButtonGroup>
+              </Panel.Body>
+            </Panel>
+          ))}
         </>
       )
     }
@@ -59,9 +93,9 @@ class SavedTripList extends Component {
       <div className='otp'>
         {/* TODO: Do mobile view. */}
         <DesktopNav />
-        <form className='container'>
+        <div className='container'>
           {content}
-        </form>
+        </div>
       </div>
     )
   }
@@ -76,6 +110,8 @@ const mapStateToProps = (state, ownProps) => {
 }
 
 const mapDispatchToProps = {
+  createOrUpdateUserMonitoredTrip: userActions.createOrUpdateUserMonitoredTrip,
+  deleteUserMonitoredTrip: userActions.deleteUserMonitoredTrip,
   routeTo: uiActions.routeTo
 }
 

lib/components/user/trip-summary-pane.js

@@ -19,8 +19,7 @@ class TripSummaryPane extends Component {
       )
 
       return (
-        <div>
-          <h3>{monitoredTrip.tripName}</h3>
+        <>
           <TripSummary monitoredTrip={monitoredTrip} />
 
           <p>
@@ -34,7 +33,7 @@ class TripSummaryPane extends Component {
                 : 'Disabled'}
             </b>
           </p>
-        </div>
+        </>
       )
     }
   }