hook up a button at the bottom of the BusView to open the map

Author: hawkrives

source/navigation.js

@@ -18,7 +18,7 @@ import {
   BuildingHoursView,
   BuildingHoursDetailView,
 } from './views/building-hours'
-import TransportationView from './views/transportation'
+import TransportationView, {BusMapView} from './views/transportation'
 import SettingsView from './views/settings'
 import SISLoginView from './views/settings/login'
 import CreditsView from './views/settings/credits'
@@ -58,6 +58,7 @@ export const AppNavigator = StackNavigator(
     StudentOrgsDetailView: {screen: StudentOrgsDetailView},
     StudentOrgsView: {screen: StudentOrgsView},
     TransportationView: {screen: TransportationView},
+    BusMapView: {screen: BusMapView},
   },
   {
     navigationOptions: {

source/views/transportation/bus/bus-line.js

@@ -1,17 +1,19 @@
 // @flow
 import React from 'react'
-import {View, StyleSheet, Platform} from 'react-native'
+import {View, Text, StyleSheet, Platform} from 'react-native'
 import type {BusLineType, FancyBusTimeListType} from './types'
 import {getScheduleForNow, getSetOfStopsForNow} from './lib'
 import get from 'lodash/get'
 import zip from 'lodash/zip'
 import head from 'lodash/head'
 import last from 'lodash/last'
+import Icon from 'react-native-vector-icons/Ionicons'
 import moment from 'moment-timezone'
 import * as c from '../../components/colors'
 import {Separator} from '../../components/separator'
 import {BusStopRow} from './bus-stop-row'
-import {ListRow, ListSectionHeader} from '../../components/list'
+import {ListRow, ListSectionHeader, Title, Detail} from '../../components/list'
+import {Row, Column} from '../../components/layout'
 
 const TIME_FORMAT = 'h:mma'
 const TIMEZONE = 'America/Winnipeg'
@@ -65,7 +67,7 @@ const parseTime = (now: moment) => time => {
 }
 
 export class BusLine extends React.PureComponent {
-  props: {line: BusLineType, now: moment}
+  props: {line: BusLineType, now: moment, openMap: () => any}
 
   render() {
     const {line, now} = this.props
@@ -121,11 +123,39 @@ export class BusLine extends React.PureComponent {
               isFirstRow={i === 0}
               isLastRow={i === list.length - 1}
             />
-            {i < list.length - 1
-              ? <Separator style={styles.separator} />
-              : null}
+            <Separator style={styles.separator} />
           </View>,
         )}
+
+        <ListRow
+          onPress={this.props.openMap}
+          fullWidth={true}
+          spacing={{left: 45}}
+        >
+          <Row alignItems="center">
+            <Column alignItems="center" width={45} paddingRight={5}>
+              <Icon
+                name={
+                  Platform.OS === 'ios'
+                    ? 'ios-navigate-outline'
+                    : 'md-navigate'
+                }
+                size={24}
+                style={{color: c.iosDisabledText}}
+              />
+            </Column>
+
+            <Column>
+              <Title>
+                <Text>Open Map</Text>
+              </Title>
+
+              <Detail>
+                <Text>See the planned bus route on a map!</Text>
+              </Detail>
+            </Column>
+          </Row>
+        </ListRow>
       </View>
     )
   }

source/views/transportation/bus/bus-view.js

@@ -6,6 +6,7 @@ import type {BusLineType} from './types'
 import {BusLine} from './bus-line'
 import moment from 'moment-timezone'
 import {NoticeView} from '../../components/notice'
+import type {TopLevelViewPropsType} from '../../types'
 
 import {data as defaultBusLines} from '../../../../docs/bus-times.json'
 
@@ -31,7 +32,7 @@ export class BusView extends React.PureComponent {
     clearTimeout(this.state.intervalId)
   }
 
-  props: {
+  props: TopLevelViewPropsType & {
     busLines: BusLineType[],
     line: string,
   }
@@ -40,6 +41,10 @@ export class BusView extends React.PureComponent {
     this.setState(() => ({now: moment.tz(TIMEZONE)}))
   }
 
+  openMap = () => {
+    this.props.navigation.navigate('BusMapView', {line: this.props.line})
+  }
+
   render() {
     let {now} = this.state
     // now = moment.tz('Fri 8:13pm', 'ddd h:mma', true, TIMEZONE)
@@ -56,7 +61,7 @@ export class BusView extends React.PureComponent {
 
     return (
       <ScrollView>
-        <BusLine line={activeBusLine} now={now} />
+        <BusLine line={activeBusLine} now={now} openMap={this.openMap} />
       </ScrollView>
     )
   }

source/views/transportation/index.js

@@ -12,26 +12,31 @@ import {TabBarIcon} from '../components/tabbar-icon'
 import OtherModesView from './otherModes'
 import BusView from './bus'
 
+export {BusMapView} from './bus/map'
+
 export default TabNavigator(
   {
     ExpressLineBusView: {
-      screen: () => <BusView line="Express Bus" />,
+      screen: ({navigation}) =>
+        <BusView line="Express Bus" navigation={navigation} />,
       navigationOptions: {
         tabBarLabel: 'Express Bus',
         tabBarIcon: TabBarIcon('bus'),
       },
     },
 
     RedLineBusView: {
-      screen: () => <BusView line="Red Line" />,
+      screen: ({navigation}) =>
+        <BusView line="Red Line" navigation={navigation} />,
       navigationOptions: {
         tabBarLabel: 'Red Line',
         tabBarIcon: TabBarIcon('bus'),
       },
     },
 
     BlueLineBusView: {
-      screen: () => <BusView line="Blue Line" />,
+      screen: ({navigation}) =>
+        <BusView line="Blue Line" navigation={navigation} />,
       navigationOptions: {
         tabBarLabel: 'Blue Line',
         tabBarIcon: TabBarIcon('bus'),