Merge pull request #2985 from StoDevX/transportation-info-headers

Headers for transportation routes

Author: hawkrives

data/bus-times/blue-line.yaml

@@ -2,6 +2,7 @@ line: Blue Line
 colors:
   bar: rgb(103, 153, 170)
   dot: rgb(13, 26, 35)
+notice: Route that services the north part of the city. Normal route service is $1.25.
 schedules:
   - days: [Mo, Tu, We, Th, Fr]
     coordinates:

data/bus-times/express.yaml

@@ -2,6 +2,7 @@ line: Express Bus
 colors:
   bar: rgb(134, 198, 124)
   dot: rgb(32, 87, 14)
+notice: Route that services the majority of the city limits. Normal route service is free with a St. Olaf ID.
 schedules:
   - days: [Mo, Tu, We, Th, Fr]
     coordinates:

data/bus-times/red-line.yaml

@@ -2,6 +2,7 @@ line: Red Line
 colors:
   bar: rgb(233, 87, 95)
   dot: rgb(151, 27, 16)
+notice: Route that services the south part of the city. Normal route service is $1.25.
 schedules:
   - days: [Mo, Tu, We, Th, Fr]
     coordinates: {}

source/views/transportation/bus/line.js

@@ -14,6 +14,7 @@ import findLast from 'lodash/findLast'
 import {Separator} from '@frogpond/separator'
 import {BusStopRow} from './components/bus-stop-row'
 import {ListSectionHeader, ListFooter, ListRow} from '@frogpond/lists'
+import {InfoHeader} from '@frogpond/info-header'
 
 const styles = StyleSheet.create({
 	separator: {
@@ -152,25 +153,34 @@ export class BusLine extends React.Component<Props, State> {
 		const {line} = this.props
 		const {schedule, subtitle} = this.state
 
-		const headerEl = (
+		const INFO_EL = (
 			<ListSectionHeader
 				subtitle={subtitle}
 				title={line.line}
 				titleStyle={Platform.OS === 'android' ? {color: line.colors.bar} : null}
 			/>
 		)
 
-		const FOOTER_MSG = `${this.props.line.notice || ''}${
-			this.props.line.notice ? '\n\n' : ''
-		}Bus routes and times subject to change without notice\n\nData collected by the humans of All About Olaf`
+		const LINE_MSG = line.notice || ''
+		const FOOTER_MSG =
+			'Bus routes and times subject to change without notice\n\nData collected by the humans of All About Olaf'
 		const FOOTER_EL = <ListFooter title={FOOTER_MSG} />
 
+		const HEADER_EL = LINE_MSG ? (
+			<React.Fragment>
+				<InfoHeader message={LINE_MSG} title={`About ${line.line}`} />
+				{INFO_EL}
+			</React.Fragment>
+		) : (
+			INFO_EL
+		)
+
 		return (
 			<FlatList
 				ItemSeparatorComponent={BusLineSeparator}
 				ListEmptyComponent={EMPTY_SCHEDULE_MESSAGE}
 				ListFooterComponent={FOOTER_EL}
-				ListHeaderComponent={headerEl}
+				ListHeaderComponent={HEADER_EL}
 				data={schedule ? schedule.timetable : []}
 				extraData={this.state}
 				keyExtractor={this.keyExtractor}