Merge pull request #1680 from StoDevX/orther-modes-list

hawkrives · web-flow · commit aec002e6653a · 2017-09-26T20:41:29.000-05:00
Other modes list
diff --git a/data/_schemas/transportation.yaml b/data/_schemas/transportation.yaml
@@ -1,8 +1,9 @@
 $schema: http://json-schema.org/draft-06/schema#
 
 additionalProperties: false
-required: [name, url, description]
+required: [name, category, url, description]
 properties:
   name: {type: string}
+  category: {type: string}
   url: {type: string, format: uri}
   description: {type: string}
diff --git a/data/transportation/break-airport-shuttles.yaml b/data/transportation/break-airport-shuttles.yaml
@@ -1,4 +1,5 @@
 name: Break Airport Shuttles
+category: Bus
 url: https://northfield.betterez.com/cart/5787e3b01f39300a1a000085
 description: >-
   Northfield Lines shuttle operates only immediately before and after break.
diff --git a/data/transportation/enterprise-car-share.yaml b/data/transportation/enterprise-car-share.yaml
@@ -1,4 +1,5 @@
 name: Enterprise CarShare
+category: Car
 url: https://www.enterprisecarshare.com/us/en/programs/university/st-olaf.html
 description: >-
   Car sharing program for business, school, or personal use.
diff --git a/data/transportation/first-choice-shuttle.yaml b/data/transportation/first-choice-shuttle.yaml
@@ -1,4 +1,5 @@
 name: First Choice Shuttle
+category: Bus
 url: http://youarriveontime.com
 description: >-
   Shuttle service to and from MSP airports, bus and train depots, local
diff --git a/data/transportation/hiawathaland-transit.yaml b/data/transportation/hiawathaland-transit.yaml
@@ -1,4 +1,5 @@
 name: Hiawathaland Transit
+category: Bus
 url: https://wp.stolaf.edu/sa/transportation/localexpressbus/
 description: >-
   Free route bus that stops at both colleges, Division Street, Target/Cub, and
diff --git a/data/transportation/ole-bikes.yaml b/data/transportation/ole-bikes.yaml
@@ -1,4 +1,5 @@
 name: Ole Bikes
+category: Bike
 url: https://www.stolaf.edu/library/libinfo/bikes.cfm
 description: >-
   Great green alternative, available for check-out through Rølvaag Library.
diff --git a/data/transportation/ride-board.yaml b/data/transportation/ride-board.yaml
@@ -1,4 +1,5 @@
 name: Ride Board
+category: Car
 url: https://www.stolaf.edu/apps/rideboard/index.cfm?fuseaction=browse
 description: >-
   Post a ride or look for a ride with students.
diff --git a/data/transportation/van-go.yaml b/data/transportation/van-go.yaml
@@ -1,4 +1,5 @@
 name: Van-GO!
+category: Bus
 url: http://van-go.info/schedule/
 description:
   Van service that operates Monday - Friday from 7 a.m. to 6 p.m. Business use
diff --git a/source/navigation.js b/source/navigation.js
@@ -21,7 +21,10 @@ import {
   BuildingHoursProblemReportView,
   BuildingHoursScheduleEditorView,
 } from './views/building-hours'
-import TransportationView, {BusMapView} from './views/transportation'
+import TransportationView, {
+  BusMapView,
+  OtherModesDetailView,
+} from './views/transportation'
 import SettingsView from './views/settings'
 import CreditsView from './views/settings/credits'
 import PrivacyView from './views/settings/privacy'
@@ -78,6 +81,7 @@ export const AppNavigator = StackNavigator(
     StudentOrgsDetailView: {screen: StudentOrgsDetailView},
     StudentOrgsView: {screen: StudentOrgsView},
     TransportationView: {screen: TransportationView},
+    OtherModesDetailView: {screen: OtherModesDetailView},
     BusMapView: {screen: BusMapView},
   },
   {
diff --git a/source/views/transportation/index.js b/source/views/transportation/index.js
@@ -9,10 +9,11 @@ import React from 'react'
 import {TabNavigator} from '../components/tabbed-view'
 import {TabBarIcon} from '../components/tabbar-icon'
 
-import OtherModesView from './other-modes'
+import {OtherModesView} from './other-modes'
 import BusView from './bus'
 
 export {BusMapView} from './bus/map'
+export {OtherModesDetailView} from './other-modes'
 
 export default TabNavigator(
   {
diff --git a/source/views/transportation/other-modes.js b/source/views/transportation/other-modes.js
diff --git a/source/views/transportation/other-modes/detail.js b/source/views/transportation/other-modes/detail.js
@@ -0,0 +1,69 @@
+// @flow
+import React from 'react'
+import {StyleSheet} from 'react-native'
+import {Markdown} from '../../components/markdown'
+import {ListFooter} from '../../components/list'
+import glamorous from 'glamorous-native'
+import {tracker} from '../../../analytics'
+import {Button} from '../../components/button'
+import openUrl from '../../components/open-url'
+import type {OtherModeType} from '../types'
+
+const AAO_URL = 'https://github.com/StoDevX/AAO-React-Native/issues/new'
+
+const Title = glamorous.text({
+  fontSize: 36,
+  textAlign: 'center',
+  marginHorizontal: 18,
+  marginVertical: 10,
+})
+
+const Container = glamorous.scrollView({
+  paddingHorizontal: 18,
+  paddingVertical: 6,
+})
+
+const styles = StyleSheet.create({
+  paragraph: {
+    fontSize: 16,
+  },
+})
+
+export class OtherModesDetailView extends React.PureComponent {
+  static navigationOptions = ({navigation}) => {
+    return {
+      title: navigation.state.params.mode.name,
+    }
+  }
+
+  props: {navigation: {state: {params: {mode: OtherModeType}}}}
+
+  onPress = () => {
+    const {name, url} = this.props.navigation.state.params.mode
+    tracker.trackScreenView(
+      `Transportation_OtherModes_${name.replace(' ', '')}View`,
+    )
+    openUrl(url)
+  }
+
+  render() {
+    const mode = this.props.navigation.state.params.mode
+    return (
+      <Container>
+        <Title selectable={true}>{mode.name}</Title>
+
+        <Markdown
+          styles={{Paragraph: styles.paragraph}}
+          source={mode.description}
+        />
+
+        <Button onPress={this.onPress} title={'More Info'} />
+
+        <ListFooter
+          title="Collected by the humans of All About Olaf"
+          href={AAO_URL}
+        />
+      </Container>
+    )
+  }
+}
diff --git a/source/views/transportation/other-modes/index.js b/source/views/transportation/other-modes/index.js
@@ -0,0 +1,4 @@
+// @flow
+
+export {OtherModesView} from './list'
+export {OtherModesDetailView} from './detail'
diff --git a/source/views/transportation/other-modes/list.js b/source/views/transportation/other-modes/list.js
@@ -0,0 +1,115 @@
+// @flow
+import React from 'react'
+import delay from 'delay'
+import {OtherModesRow} from './row'
+import {reportNetworkProblem} from '../../../lib/report-network-problem'
+import {TabBarIcon} from '../../components/tabbar-icon'
+import * as defaultData from '../../../../docs/transportation.json'
+import * as c from '../../components/colors'
+import {SectionList, StyleSheet} from 'react-native'
+import {ListSeparator, ListSectionHeader} from '../../components/list'
+import {ListEmpty} from '../../components/list'
+import groupBy from 'lodash/groupBy'
+import toPairs from 'lodash/toPairs'
+import type {TopLevelViewPropsType} from '../../types'
+import type {OtherModeType} from '../types'
+
+const GITHUB_URL =
+  'https://stodevx.github.io/AAO-React-Native/transportation.json'
+
+const groupModes = (modes: OtherModeType[]) => {
+  const grouped = groupBy(modes, m => m.category)
+  return toPairs(grouped).map(([key, value]) => ({title: key, data: value}))
+}
+
+const styles = StyleSheet.create({
+  listContainer: {
+    backgroundColor: c.white,
+  },
+})
+
+type Props = TopLevelViewPropsType
+
+type State = {
+  modes: Array<OtherModeType>,
+  loading: boolean,
+  refreshing: boolean,
+}
+
+export class OtherModesView extends React.PureComponent<void, Props, State> {
+  static navigationOptions = {
+    tabBarLabel: 'Other Modes',
+    tabBarIcon: TabBarIcon('boat'),
+  }
+
+  state = {
+    modes: defaultData.data,
+    loading: true,
+    refreshing: false,
+  }
+
+  componentWillMount() {
+    this.fetchData()
+  }
+
+  refresh = async () => {
+    const start = Date.now()
+    this.setState(() => ({refreshing: true}))
+
+    await this.fetchData()
+
+    // wait 0.5 seconds – if we let it go at normal speed, it feels broken.
+    const elapsed = Date.now() - start
+    if (elapsed < 500) {
+      await delay(500 - elapsed)
+    }
+
+    this.setState(() => ({refreshing: false}))
+  }
+
+  fetchData = async () => {
+    this.setState(() => ({loading: true}))
+
+    let {data: modes} = await fetchJson(GITHUB_URL).catch(err => {
+      reportNetworkProblem(err)
+      return defaultData
+    })
+
+    if (process.env.NODE_ENV === 'development') {
+      modes = defaultData.data
+    }
+
+    this.setState(() => ({modes, loading: false}))
+  }
+
+  onPress = (mode: OtherModeType) => {
+    this.props.navigation.navigate('OtherModesDetailView', {
+      mode,
+    })
+  }
+
+  renderSectionHeader = ({section: {title}}: any) =>
+    <ListSectionHeader title={title} />
+
+  renderItem = ({item}: {item: OtherModeType}) =>
+    <OtherModesRow mode={item} onPress={this.onPress} />
+
+  keyExtractor = (item: OtherModeType) => item.name
+
+  render() {
+    const groupedData = groupModes(this.state.modes)
+    return (
+      <SectionList
+        ItemSeparatorComponent={ListSeparator}
+        ListEmptyComponent={<ListEmpty mode="bug" />}
+        style={styles.listContainer}
+        data={groupedData}
+        sections={groupedData}
+        keyExtractor={this.keyExtractor}
+        renderSectionHeader={this.renderSectionHeader}
+        renderItem={this.renderItem}
+        refreshing={this.state.refreshing}
+      />
+    )
+  }
+}
diff --git a/source/views/transportation/other-modes/row.js b/source/views/transportation/other-modes/row.js

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`name: Break Airport Shuttles`
	`2`	`+category: Bus`
`2`	`3`	`url: https://northfield.betterez.com/cart/5787e3b01f39300a1a000085`
`3`	`4`	`description: >-`
`4`	`5`	`Northfield Lines shuttle operates only immediately before and after break.`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`name: First Choice Shuttle`
	`2`	`+category: Bus`
`2`	`3`	`url: http://youarriveontime.com`
`3`	`4`	`description: >-`
`4`	`5`	`Shuttle service to and from MSP airports, bus and train depots, local`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`name: Hiawathaland Transit`
	`2`	`+category: Bus`
`2`	`3`	`url: https://wp.stolaf.edu/sa/transportation/localexpressbus/`
`3`	`4`	`description: >-`
`4`	`5`	`Free route bus that stops at both colleges, Division Street, Target/Cub, and`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`name: Van-GO!`
	`2`	`+category: Bus`
`2`	`3`	`url: http://van-go.info/schedule/`
`3`	`4`	`description:`
`4`	`5`	`Van service that operates Monday - Friday from 7 a.m. to 6 p.m. Business use`