diff --git a/lib/actions/user.js b/lib/actions/user.js
index b5c094073..61c43ffd7 100644
--- a/lib/actions/user.js
+++ b/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))
diff --git a/lib/components/user/saved-trip-editor.js b/lib/components/user/saved-trip-editor.js
index d2cc9b21e..eb5124ea6 100644
--- a/lib/components/user/saved-trip-editor.js
+++ b/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: () => ,
- title: 'Danger zone'
- }
- ]
- }
+ const paneSequence = [
+ {
+ pane: panes.basics,
+ title: 'Trip information'
+ },
+ {
+ pane: panes.notifications,
+ title: 'Trip notifications'
+ }
+ ]
return (
<>
diff --git a/lib/components/user/saved-trip-list.js b/lib/components/user/saved-trip-list.js
index 9969a5d3c..a2f6879db 100644
--- a/lib/components/user/saved-trip-list.js
+++ b/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, Glyphicon, 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'
@@ -12,59 +14,39 @@ import withLoggedInUserSupport from './with-logged-in-user-support'
/**
* This component displays the list of saved trips for the logged-in user.
*/
-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 => () => {
- const { id } = trip
- this.props.routeTo(`/savedtrips/${id}`)
- }
-
- render () {
- const { trips } = this.props
-
- // TODO: Improve navigation.
- const accountLink =
Back to My Account
- let content
-
- if (!trips || trips.length === 0) {
- content = (
- <>
- {accountLink}
- You have no saved trips
- Perform a trip search from the map first.
- >
- )
- } else {
- // Stack the saved trip summaries. When the user clicks on one, they can edit that trip.
- content = (
- <>
- {accountLink}
- My saved trips
- Click on a saved trip below to modify it.
-
- {trips.map((trip, index) => (
-
- ))}
-
- >
- )
- }
+const SavedTripList = ({ trips }) => {
+ // TODO: Improve navigation.
+ const accountLink = Back to My Account
+ let content
- return (
-
- {/* TODO: Do mobile view. */}
-
-
-
+ if (!trips || trips.length === 0) {
+ content = (
+ <>
+ {accountLink}
+ You have no saved trips
+ Perform a trip search from the map first.
+ >
+ )
+ } else {
+ // Stack the saved trip summaries. When the user clicks on one, they can edit that trip.
+ content = (
+ <>
+ {accountLink}
+ My saved trips
+ {trips.map((trip, index) => )}
+ >
)
}
+
+ return (
+
+ {/* TODO: Do mobile view. */}
+
+
+ {content}
+
+
+ )
}
// connect to the redux store
@@ -75,11 +57,85 @@ const mapStateToProps = (state, ownProps) => {
}
}
-const mapDispatchToProps = {
- routeTo: uiActions.routeTo
-}
+const mapDispatchToProps = {}
export default withLoggedInUserSupport(
withLoginRequired(connect(mapStateToProps, mapDispatchToProps)(SavedTripList)),
true
)
+
+/**
+ * This class manages events and rendering for one item in the saved trip list.
+ */
+class TripListItem 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.)
+ */
+ _handleEditTrip = () => {
+ const { routeTo, trip } = this.props
+ routeTo(`/savedtrips/${trip.id}`)
+ }
+
+ /**
+ * Pauses or resumes the specified trip.
+ */
+ _handlePauseOrResumeMonitoring = () => {
+ const { createOrUpdateUserMonitoredTrip, trip } = this.props
+ const newTrip = clone(trip)
+ newTrip.isActive = !newTrip.isActive
+
+ // Silent update of existing trip.
+ createOrUpdateUserMonitoredTrip(newTrip, false, true)
+ }
+
+ /**
+ * Deletes a trip from persistence.
+ * (The operation also refetches the redux monitoredTrips for the logged-in user.)
+ */
+ _handleDeleteTrip = async () => {
+ if (confirm('Would you like to remove this trip?')) {
+ const { deleteUserMonitoredTrip, trip } = this.props
+ await deleteUserMonitoredTrip(trip.id)
+ }
+ }
+
+ render () {
+ const { trip } = this.props
+ return (
+
+
+ {trip.tripName}
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+}
+
+// connect to the redux store
+const itemMapStateToProps = () => {}
+
+const itemMapDispatchToProps = {
+ createOrUpdateUserMonitoredTrip: userActions.createOrUpdateUserMonitoredTrip,
+ deleteUserMonitoredTrip: userActions.deleteUserMonitoredTrip,
+ routeTo: uiActions.routeTo
+}
+
+const ConnectedTripListItem = connect(itemMapStateToProps, itemMapDispatchToProps)(TripListItem)
diff --git a/lib/components/user/saved-trip-screen.js b/lib/components/user/saved-trip-screen.js
index 70932da42..9febb617c 100644
--- a/lib/components/user/saved-trip-screen.js
+++ b/lib/components/user/saved-trip-screen.js
@@ -87,19 +87,6 @@ class SavedTripScreen extends Component {
this.props.routeTo('/savedtrips')
}
- /**
- * Deletes a trip from persistence and returns to the saved trips screen.
- */
- _handleDeleteTrip = async () => {
- if (confirm('Would you like to remove this trip?')) {
- const { deleteUserMonitoredTrip } = this.props
- const { monitoredTrip } = this.state
- await deleteUserMonitoredTrip(monitoredTrip.id)
-
- this._goToSavedTrips()
- }
- }
-
_handleSaveNewTrip = async () => {
await this._updateMonitoredTrip()
this._goToTripPlanner()
@@ -199,7 +186,6 @@ class SavedTripScreen extends Component {
monitoredTrip={monitoredTrip}
onCancel={isCreating ? this._goToTripPlanner : this._goToSavedTrips}
onComplete={isCreating ? this._handleSaveNewTrip : this._handleSaveTripEdits}
- onDeleteTrip={this._handleDeleteTrip}
panes={this._panes}
/>
@@ -224,7 +210,6 @@ const mapStateToProps = (state, ownProps) => {
const mapDispatchToProps = {
createOrUpdateUserMonitoredTrip: userActions.createOrUpdateUserMonitoredTrip,
- deleteUserMonitoredTrip: userActions.deleteUserMonitoredTrip,
routeTo: uiActions.routeTo
}
diff --git a/lib/components/user/trip-summary-pane.js b/lib/components/user/trip-summary-pane.js
index eea9ba233..73041d971 100644
--- a/lib/components/user/trip-summary-pane.js
+++ b/lib/components/user/trip-summary-pane.js
@@ -19,8 +19,7 @@ class TripSummaryPane extends Component {
)
return (
-
-
{monitoredTrip.tripName}
+ <>
@@ -34,7 +33,7 @@ class TripSummaryPane extends Component {
: 'Disabled'}
-
+ >
)
}
}