Fix issue affecting stops from showing up when toggling a route; Add …

…polylines to map to depict route paths
UCSD · Jun 25, 2018 · 7c01122 · 7c01122
1 parent d32aaab
commit 7c01122
Show file tree

Hide file tree

Showing 8 changed files with 181 additions and 102 deletions.
diff --git a/app/AppSettings.js b/app/AppSettings.js
@@ -8,6 +8,10 @@ module.exports = {
 	WEATHER_API_URL: 'https://w3wyps9yje.execute-api.us-west-2.amazonaws.com/prod/forecast?',
 	SURF_API_URL: 'https://kusyfng6mg.execute-api.us-west-2.amazonaws.com/prod/v1/surf',
 	SHUTTLE_STOPS_API_URL: 'https://ies4wyrlx9.execute-api.us-west-2.amazonaws.com/prod/v2/stops/',
+
+	/* DEV ROUTE, REMOVE BEFORE DEPLOYING! */
+	SHUTTLE_PATHS_URL: ' https://11wl1gc3v9.execute-api.us-west-2.amazonaws.com/dev/polylines/',
+
 	SHUTTLE_VEHICLES_API_URL: 'https://hjr84cay81.execute-api.us-west-2.amazonaws.com/prod?route=',
 	DINING_API_URL: 'https://pg83tslbyi.execute-api.us-west-2.amazonaws.com/prod/v3/dining',
 	EVENTS_API_URL: 'https://2jjml3hf27.execute-api.us-west-2.amazonaws.com/prod/events/student',

diff --git a/app/reducers/shuttle.js b/app/reducers/shuttle.js
@@ -20,6 +20,9 @@ function shuttle(state = initialState, action) {
 			newState.lastUpdated = action.nowTime
 			return newState
 		case 'TOGGLE_ROUTE':
+			if (action.newRoute && action.route) {
+				newState.routes[action.route] = action.newRoute
+			}
 			newState.toggles = action.newToggles
 			newState.stops = action.newStops
 			return newState

diff --git a/app/sagas/shuttleSaga.js b/app/sagas/shuttleSaga.js
@@ -6,7 +6,11 @@ import {
 	select,
 	takeLatest
 } from 'redux-saga/effects'
-import { fetchShuttleArrivalsByStop, fetchVehiclesByRoute } from '../services/shuttleService'
+import {
+	fetchShuttleArrivalsByStop,
+	fetchVehiclesByRoute,
+	fetchRoutePolyline
+} from '../services/shuttleService'
 import { SHUTTLE_API_TTL } from '../AppSettings'
 
 const getShuttle = state => (state.shuttle)
@@ -15,9 +19,10 @@ function* toggleRoute(action) {
 	const { toggles, stops, routes } = yield select(getShuttle)
 	const { route } = action
 
+	let newRoute = null
 	const newToggles = Object.assign({}, toggles)
 	// Performs a deep copy of stops
-	let newStops = JSON.parse(JSON.stringify(stops))
+	const newStops = JSON.parse(JSON.stringify(stops))
 
 	if (toggles[route]) {
 		// If route is on, toggle off
@@ -28,10 +33,7 @@ function* toggleRoute(action) {
 			if (stops[stop]) {
 				const newStop = { ...stops[stop] }
 				delete newStop.routes[route]
-				newStops = {
-					...newStops,
-					newStop
-				}
+				newStops[stop] = newStop
 			}
 		})
 	} else {
@@ -45,10 +47,7 @@ function* toggleRoute(action) {
 					if (stops[stop]) {
 						const newStop = { ...stops[stop] }
 						delete newStop.routes[route]
-						newStops = {
-							...newStops,
-							newStop
-						}
+						newStops[stop] = newStop
 					}
 				})
 			}
@@ -57,24 +56,32 @@ function* toggleRoute(action) {
 		// Turn route on
 		newToggles[route] = true
 
+		// Add polylines to route
+		const polylines = yield call(fetchRoutePolyline, route)
+		if (polylines) {
+			newRoute = {
+				...routes[route],
+				polylines
+			}
+		}
+
 		// Add route to stops
 		Object.keys(routes[route].stops).forEach((stop) => {
 			if (stops[stop]) {
 				const newStop = {
 					...stops[stop],
 					routes: {}
 				}
-				newStop.routes[route] = routes[route]
-				newStops = {
-					...newStops,
-					newStop
-				}
+				newStop.routes[route] = true
+				newStops[stop] = newStop
 			}
 		})
 	}
 
 	yield put({
 		type: 'TOGGLE_ROUTE',
+		route,
+		newRoute,
 		newToggles,
 		newStops
 	})

diff --git a/app/services/shuttleService.js b/app/services/shuttleService.js
@@ -2,7 +2,8 @@ import {
 	SHUTTLE_ROUTES_MASTER,
 	SHUTTLE_STOPS_MASTER_NO_ROUTES,
 	SHUTTLE_STOPS_API_URL,
-	SHUTTLE_VEHICLES_API_URL
+	SHUTTLE_VEHICLES_API_URL,
+	SHUTTLE_PATHS_URL
 } from '../AppSettings'
 
 export function fetchShuttleArrivalsByStop(stopID) {
@@ -41,3 +42,12 @@ export function fetchMasterRoutes() {
 			return null
 		})
 }
+
+export function fetchRoutePolyline(routeId) {
+	return fetch(SHUTTLE_PATHS_URL + routeId)
+		.then(response => response.json())
+		.catch((err) => {
+			console.log('Error fetchRoutePolyline' + err)
+			return null
+		})
+}
diff --git a/app/views/map/Map.js b/app/views/map/Map.js
@@ -35,6 +35,7 @@ export class Map extends React.Component {
 		super(props)
 
 		this.state = {
+			toggledRoute: null,
 			searchInput: null,
 			selectedResult: 0,
 			allowScroll: false,
@@ -55,6 +56,12 @@ export class Map extends React.Component {
 				}
 			})
 		}
+
+		Object.keys(this.props.toggles).forEach((route) => {
+			if (this.props.toggles[route]) {
+				this.state.currentToggledRoute = route
+			}
+		})
 	}
 
 	componentDidMount() {
@@ -240,7 +247,11 @@ export class Map extends React.Component {
 	toggleRoute = (route) => {
 		this.pressIcon()
 		this.props.toggle(route)
-		this.setState({	vehicles: {} })
+		if (this.state.currentToggledRoute === route) {
+			this.setState({ vehicles: {}, currentToggledRoute: null })
+		} else {
+			this.setState({	vehicles: {}, currentToggledRoute: route })
+		}
 	}
 
 	render() {
@@ -256,6 +267,10 @@ export class Map extends React.Component {
 				</View>
 			)
 		} else if (this.props.location.coords) {
+			let polylines = null
+			if (this.state.currentToggledRoute) {
+				polylines = this.props.routes[this.state.currentToggledRoute].polylines
+			}
 			return (
 				<View>
 					<SearchNavButton
@@ -299,6 +314,7 @@ export class Map extends React.Component {
 								}
 								shuttle={this.props.shuttle_stops}
 								vehicles={this.state.vehicles}
+								polylines={polylines}
 							/>
 						</View>
 						<View
@@ -350,6 +366,7 @@ const mapStateToProps = (state, props) => (
 		location: state.location.position,
 		locationPermission: state.location.permission,
 		toggles: state.shuttle.toggles,
+		routes: state.shuttle.routes,
 		shuttle_routes: state.shuttle.routes,
 		shuttle_stops: state.shuttle.stops,
 		vehicles: state.shuttle.vehicles,