add day picker context menu for route preview

Author: drewvolz

source/views/transportation/bus/components/day-picker.tsx

@@ -0,0 +1,206 @@
+import * as React from 'react'
+import {
+	ColorValue,
+	ScrollView,
+	StyleSheet,
+	Text,
+	TouchableOpacity,
+	View,
+} from 'react-native'
+import type {Moment} from 'moment-timezone'
+import type {DayOfWeek} from '../types'
+import * as c from '@frogpond/colors'
+import {ContextMenu} from '@frogpond/context-menu'
+import {Icon} from '@frogpond/icon'
+
+const styles = StyleSheet.create({
+	dayPickerContainer: {
+		backgroundColor: c.systemGroupedBackground,
+		paddingVertical: 12,
+		paddingHorizontal: 16,
+	},
+	dayPickerScroll: {
+		flexGrow: 0,
+	},
+	dayButton: {
+		paddingHorizontal: 12,
+		paddingVertical: 8,
+		marginRight: 8,
+		borderRadius: 6,
+		backgroundColor: c.secondarySystemGroupedBackground,
+	},
+	dayButtonSelected: {
+		backgroundColor: c.systemBlue,
+	},
+	dayButtonText: {
+		fontSize: 14,
+		fontWeight: '500',
+		color: c.label,
+	},
+	dayButtonTextSelected: {
+		color: c.white,
+	},
+	resetButton: {
+		marginTop: 8,
+		alignSelf: 'center',
+		paddingHorizontal: 12,
+		paddingVertical: 6,
+	},
+	resetButtonText: {
+		fontSize: 14,
+		color: c.systemRed,
+		fontWeight: '500',
+	},
+	headerButtonContainer: {
+		borderWidth: 1,
+		borderRadius: 6,
+		paddingHorizontal: 8,
+		paddingVertical: 6,
+		backgroundColor: c.systemBackground,
+		alignItems: 'center',
+		justifyContent: 'center',
+		flexDirection: 'row',
+		gap: 6,
+	},
+	headerButtonText: {
+		fontSize: 14,
+		fontWeight: '500',
+	},
+})
+
+export const DAYS_OF_WEEK: Array<{day: DayOfWeek; label: string}> = [
+	{day: 'Su', label: 'Sunday'},
+	{day: 'Mo', label: 'Monday'},
+	{day: 'Tu', label: 'Tuesday'},
+	{day: 'We', label: 'Wednesday'},
+	{day: 'Th', label: 'Thursday'},
+	{day: 'Fr', label: 'Friday'},
+	{day: 'Sa', label: 'Saturday'},
+]
+
+export type DayPickerProps = {
+	selectedDay: DayOfWeek
+	onDaySelect: (day: DayOfWeek) => void
+	currentDay: DayOfWeek
+	onReset?: () => void
+}
+
+export const DayPicker = ({
+	selectedDay,
+	onDaySelect,
+	currentDay,
+	onReset,
+}: DayPickerProps): JSX.Element => {
+	const isOverridden = selectedDay !== currentDay
+
+	return (
+		<View style={styles.dayPickerContainer}>
+			<ScrollView
+				contentContainerStyle={styles.dayPickerScroll}
+				horizontal={true}
+				showsHorizontalScrollIndicator={false}
+			>
+				{DAYS_OF_WEEK.map(({day, label}) => {
+					const isSelected = selectedDay === day
+					return (
+						<TouchableOpacity
+							key={day}
+							onPress={() => onDaySelect(day)}
+							style={[styles.dayButton, isSelected && styles.dayButtonSelected]}
+						>
+							<Text
+								style={[
+									styles.dayButtonText,
+									isSelected && styles.dayButtonTextSelected,
+								]}
+							>
+								{label}
+							</Text>
+						</TouchableOpacity>
+					)
+				})}
+			</ScrollView>
+			{isOverridden && onReset && (
+				<TouchableOpacity onPress={onReset} style={styles.resetButton}>
+					<Text style={styles.resetButtonText}>Reset</Text>
+				</TouchableOpacity>
+			)}
+		</View>
+	)
+}
+
+export const momentToDayOfWeek = (moment: Moment): DayOfWeek => {
+	const dayMap: Record<number, DayOfWeek> = {
+		0: 'Su',
+		1: 'Mo',
+		2: 'Tu',
+		3: 'We',
+		4: 'Th',
+		5: 'Fr',
+		6: 'Sa',
+	}
+	return dayMap[moment.day()]
+}
+
+export const createMomentForDay = (
+	baseMoment: Moment,
+	targetDay: DayOfWeek,
+): Moment => {
+	const dayMap: Record<DayOfWeek, number> = {
+		Su: 0,
+		Mo: 1,
+		Tu: 2,
+		We: 3,
+		Th: 4,
+		Fr: 5,
+		Sa: 6,
+	}
+
+	const targetDayNumber = dayMap[targetDay]
+	const currentDayNumber = baseMoment.day()
+	const diff = targetDayNumber - currentDayNumber
+
+	return baseMoment.clone().add(diff, 'days')
+}
+
+export type DayPickerHeaderProps = {
+	selectedDay: DayOfWeek
+	onDaySelect: (day: DayOfWeek) => void
+	currentDay: DayOfWeek
+	accentColor?: ColorValue
+}
+
+export const DayPickerHeader = ({
+	selectedDay,
+	onDaySelect,
+	currentDay,
+	accentColor = c.systemBlue,
+}: DayPickerHeaderProps): JSX.Element => {
+	const dayOptions = DAYS_OF_WEEK.map(({label}) => label)
+	const selectedIndex = DAYS_OF_WEEK.findIndex(({day}) => day === selectedDay)
+	const selectedLabel = DAYS_OF_WEEK[selectedIndex]?.label || 'Today'
+
+	const isOverridden = selectedDay !== currentDay
+	const displayText = isOverridden ? selectedLabel : 'Today'
+
+	return (
+		<ContextMenu
+			actions={dayOptions}
+			isMenuPrimaryAction={true}
+			onPressMenuItem={(item: string) => {
+				const selectedDayData = DAYS_OF_WEEK.find(({label}) => label === item)
+				if (selectedDayData) {
+					onDaySelect(selectedDayData.day)
+				}
+			}}
+			title="Pick a schedule"
+		>
+			<View style={[styles.headerButtonContainer, {borderColor: accentColor}]}>
+				<Icon color={accentColor} name="calendar" size={16} />
+				<Text style={[styles.headerButtonText, {color: accentColor}]}>
+					{displayText}
+				</Text>
+			</View>
+		</ContextMenu>
+	)
+}

source/views/transportation/bus/line.tsx

@@ -1,7 +1,14 @@
 import * as React from 'react'
 import {useEffect, useState} from 'react'
-import {FlatList, Platform, StyleSheet, Text, TouchableOpacity} from 'react-native'
-import type {BusSchedule, UnprocessedBusLine} from './types'
+import {
+	FlatList,
+	Platform,
+	StyleSheet,
+	Text,
+	TouchableOpacity,
+	View,
+} from 'react-native'
+import type {BusSchedule, UnprocessedBusLine, DayOfWeek} from './types'
 import {
 	BusStateEnum,
 	getCurrentBusIteration,
@@ -13,11 +20,16 @@ import find from 'lodash/find'
 import findLast from 'lodash/findLast'
 import {Separator} from '@frogpond/separator'
 import {BusStopRow} from './components/bus-stop-row'
-import {ListFooter, ListRow, ListSectionHeader} from '@frogpond/lists'
+import {ListFooter, ListRow} from '@frogpond/lists'
 import {InfoHeader} from '@frogpond/info-header'
 import * as c from '@frogpond/colors'
 import {useNavigation} from '@react-navigation/native'
 import {BUS_FOOTER_MESSAGE} from './constants'
+import {
+	DayPickerHeader,
+	momentToDayOfWeek,
+	createMomentForDay,
+} from './components/day-picker'
 
 const styles = StyleSheet.create({
 	container: {
@@ -31,6 +43,34 @@ const styles = StyleSheet.create({
 		// erase the gap in the bar caused by the separators' block-ness
 		marginTop: -1,
 	},
+	headerContainer: {
+		paddingLeft: 15,
+		paddingRight: 15,
+		paddingVertical: Platform.OS === 'ios' ? 6 : 10,
+		backgroundColor: c.systemGroupedBackground,
+		borderTopWidth: Platform.OS === 'ios' ? StyleSheet.hairlineWidth : 1,
+		borderBottomWidth: Platform.OS === 'ios' ? StyleSheet.hairlineWidth : 0,
+		borderTopColor: c.separator,
+		borderBottomColor: c.separator,
+		flexDirection: 'row',
+		alignItems: 'center',
+		justifyContent: 'space-between',
+	},
+	headerTextContainer: {
+		flex: 1,
+	},
+	headerTitle: {
+		fontSize: 16,
+		fontWeight: Platform.OS === 'ios' ? '500' : '600',
+		color: c.label,
+		fontFamily: Platform.OS === 'android' ? 'sans-serif-condensed' : undefined,
+	},
+	headerSubtitle: {
+		fontSize: 16,
+		fontWeight: '400',
+		color: c.secondaryLabel,
+		fontFamily: Platform.OS === 'android' ? 'sans-serif-condensed' : undefined,
+	},
 })
 
 const isTruthy = (x: unknown) => Boolean(x)
@@ -106,7 +146,7 @@ function deriveFromProps({line, now}: {line: UnprocessedBusLine; now: Moment}) {
 
 	if (process.env.NODE_ENV !== 'production') {
 		// for debugging
-		subtitle += ` (${now.format('dd h:mma')})`
+		subtitle += ` (${now.format('h:mma')})`
 	}
 
 	return {
@@ -127,34 +167,64 @@ export function BusLine(props: Props): JSX.Element {
 		null,
 	)
 	let [status, setStatus] = useState<BusStateEnum>('none')
+	let [selectedDay, setSelectedDay] = useState<DayOfWeek>(() =>
+		momentToDayOfWeek(now),
+	)
+
+	const currentDay = momentToDayOfWeek(now)
 
 	useEffect(() => {
+		const newCurrentDay = momentToDayOfWeek(now)
+		if (selectedDay === currentDay && newCurrentDay !== currentDay) {
+			setSelectedDay(newCurrentDay)
+		}
+	}, [now, selectedDay, currentDay])
+
+	useEffect(() => {
+		const momentForSelectedDay = createMomentForDay(now, selectedDay)
+
 		let {
 			schedule: scheduleForToday,
 			subtitle: scheduleSubtitle,
 			currentBusIteration: busIteration,
 			status: currentStatus,
 		} = deriveFromProps({
 			line,
-			now,
+			now: momentForSelectedDay,
 		})
 		setSchedule(scheduleForToday)
 		setSubtitle(scheduleSubtitle)
 		setStatus(currentStatus)
 		setCurrentBusIteration(busIteration)
-	}, [line, now])
+	}, [line, now, selectedDay])
 
 	let INFO_EL = (
-		<ListSectionHeader
-			subtitle={subtitle}
-			title={line.line}
-			titleStyle={Platform.OS === 'android' ? {color: line.colors.bar} : null}
-		/>
+		<View style={styles.headerContainer}>
+			<View style={styles.headerTextContainer}>
+				<Text>
+					<Text style={[styles.headerTitle]}>{line.line}</Text>
+					{subtitle ? (
+						<Text style={styles.headerSubtitle}>
+							{' — '}
+							{subtitle}
+						</Text>
+					) : null}
+				</Text>
+			</View>
+
+			<DayPickerHeader
+				accentColor={line.colors.bar}
+				currentDay={currentDay}
+				onDaySelect={setSelectedDay}
+				selectedDay={selectedDay}
+			/>
+		</View>
 	)
 
 	let lineMessage = line.notice || ''
 
 	let footerElement = <ListFooter title={BUS_FOOTER_MESSAGE} />
+
 	let headerElement = lineMessage ? (
 		<>
 			<InfoHeader message={lineMessage} title={`About ${line.line}`} />
@@ -166,6 +236,8 @@ export function BusLine(props: Props): JSX.Element {
 
 	let timetable = schedule?.timetable ?? []
 
+	const momentForSelectedDay = createMomentForDay(now, selectedDay)
+
 	return (
 		<FlatList
 			ItemSeparatorComponent={BusLineSeparator}
@@ -186,7 +258,7 @@ export function BusLine(props: Props): JSX.Element {
 						departureIndex={currentBusIteration}
 						isFirstRow={index === 0}
 						isLastRow={timetable.length === 0 || index === timetable.length - 1}
-						now={now}
+						now={momentForSelectedDay}
 						status={status}
 						stop={item}
 					/>