Skip to content

Commit 66d00d7

Browse files
hawkriveshawkrives
committed
extract bits of building-hours detail views into components
1 parent b8e5d9f commit 66d00d7

File tree

2 files changed

+156
-102
lines changed

2 files changed

+156
-102
lines changed

‎source/views/building-hours/detail.android.js‎

Lines changed: 75 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -113,31 +113,15 @@ export class BuildingHoursDetailView extends React.Component {
113113
}
114114

115115
render() {
116-
const bgColors = {
117-
Open: c.moneyGreen,
118-
Closed: c.salmon,
119-
}
120-
121116
const info = this.props.navigation.state.params.building
117+
const {now} = this.state
122118

123119
const headerImage = info.image
124120
? buildingImages[info.image]
125121
: transparentPixel
126-
const openStatus = getShortBuildingStatus(info, this.state.now)
127-
const schedules = normalizeBuildingSchedule(info, this.state.now)
128-
const dayOfWeek = ((this.state.now.format('dd'): any): DayOfWeekEnumType)
129-
130-
const abbr = info.abbreviation
131-
? <Text style={styles.abbr}> ({info.abbreviation})</Text>
132-
: null
133-
const title = <Text style={styles.name}>{info.name}{abbr}</Text>
134-
const subtitle = info.subtitle
135-
? <View style={styles.subtitle}>
136-
<Text style={[styles.name, styles.subtitleText]}>
137-
{info.subtitle}
138-
</Text>
139-
</View>
140-
: null
122+
const openStatus = getShortBuildingStatus(info, now)
123+
const schedules = normalizeBuildingSchedule(info, now)
124+
const dayOfWeek = ((now.format('dd'): any): DayOfWeekEnumType)
141125

142126
return (
143127
<ParallaxView
@@ -146,56 +130,93 @@ export class BuildingHoursDetailView extends React.Component {
146130
scrollableViewStyle={styles.scrollableStyle}
147131
>
148132
<View style={styles.container}>
149-
<View style={styles.title}>{title}</View>
150-
{subtitle}
151-
152-
<View
153-
style={[
154-
styles.badge,
155-
{backgroundColor: bgColors[openStatus] || c.goldenrod},
156-
]}
157-
>
158-
<Text style={styles.badgeText}>{openStatus}</Text>
159-
</View>
133+
<Header building={info} />
134+
135+
<Badge status={openStatus} />
160136

161137
{schedules.map(set =>
162-
<Card
163-
key={set.title}
164-
style={styles.scheduleContainer}
165-
header={set.title}
166-
footer={set.notes}
167-
>
168-
<View style={styles.scheduleHoursWrapper}>
169-
{set.hours.map((schedule, i) =>
170-
<ScheduleRow
171-
key={i}
172-
now={this.state.now}
173-
schedule={schedule}
174-
isActive={
175-
set.isPhysicallyOpen !== false &&
176-
schedule.days.includes(dayOfWeek) &&
177-
isBuildingOpenAtMoment(schedule, this.state.now)
178-
}
179-
/>,
180-
)}
181-
</View>
182-
</Card>,
138+
<Schedule key={set.title} set={set}>
139+
{set.hours.map((schedule, i) =>
140+
<ScheduleRow
141+
key={i}
142+
now={now}
143+
schedule={schedule}
144+
isActive={
145+
set.isPhysicallyOpen !== false &&
146+
schedule.days.includes(dayOfWeek) &&
147+
isBuildingOpenAtMoment(schedule, this.state.now)
148+
}
149+
/>,
150+
)}
151+
</Schedule>,
183152
)}
184153
</View>
185154
</ParallaxView>
186155
)
187156
}
188157
}
189158

190-
const ScheduleRow = ({
159+
function Header({building}) {
160+
const abbr = building.abbreviation
161+
? <Text style={styles.abbr}> ({building.abbreviation})</Text>
162+
: null
163+
164+
const title = <Text style={styles.name}>{building.name}{abbr}</Text>
165+
166+
const subtitle = building.subtitle
167+
? <View style={styles.subtitle}>
168+
<Text style={[styles.name, styles.subtitleText]}>
169+
{building.subtitle}
170+
</Text>
171+
</View>
172+
: null
173+
174+
return (
175+
<View>
176+
<View style={styles.title}>{title}</View>
177+
{subtitle}
178+
</View>
179+
)
180+
}
181+
182+
function Badge({status}) {
183+
const bgColors = {
184+
Open: c.moneyGreen,
185+
Closed: c.salmon,
186+
}
187+
188+
return (
189+
<View
190+
style={[styles.badge, {backgroundColor: bgColors[status] || c.goldenrod}]}
191+
>
192+
<Text selectable={true} style={styles.badgeText}>{status}</Text>
193+
</View>
194+
)
195+
}
196+
197+
function Schedule({children, set}) {
198+
return (
199+
<Card
200+
style={styles.scheduleContainer}
201+
header={set.title}
202+
footer={set.notes}
203+
>
204+
<View style={styles.scheduleHoursWrapper}>
205+
{children}
206+
</View>
207+
</Card>
208+
)
209+
}
210+
211+
function ScheduleRow({
191212
schedule,
192213
isActive,
193214
now,
194215
}: {
195216
schedule: SingleBuildingScheduleType,
196217
isActive: boolean,
197218
now: momentT,
198-
}) => {
219+
}) {
199220
return (
200221
<View style={styles.scheduleRow}>
201222
<Text

‎source/views/building-hours/detail.ios.js‎

Lines changed: 81 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@
33
import React from 'react'
44
import {View, Text, StyleSheet} from 'react-native'
55
import {buildingImages} from '../../../images/building-images'
6-
import type {BuildingType, DayOfWeekEnumType} from './types'
6+
import type {
7+
BuildingType,
8+
DayOfWeekEnumType,
9+
SingleBuildingScheduleType,
10+
} from './types'
711
import type momentT from 'moment'
812
import moment from 'moment-timezone'
913
import {TableView, Section, Cell} from 'react-native-tableview-simple'
@@ -88,12 +92,8 @@ export class BuildingHoursDetailView extends React.Component {
8892
}
8993

9094
render() {
91-
const bgColors = {
92-
Open: c.moneyGreen,
93-
Closed: c.salmon,
94-
}
95-
9695
const info = this.props.navigation.state.params.building
96+
const {now} = this.state
9797

9898
const headerImage = info.image
9999
? buildingImages[info.image]
@@ -102,38 +102,16 @@ export class BuildingHoursDetailView extends React.Component {
102102
const schedules = normalizeBuildingSchedule(info, this.state.now)
103103
const dayOfWeek = ((this.state.now.format('dd'): any): DayOfWeekEnumType)
104104

105-
const abbr = info.abbreviation
106-
? <Text style={styles.abbr}> ({info.abbreviation})</Text>
107-
: null
108-
const title = (
109-
<Text selectable={true} style={styles.name}>{info.name}{abbr}</Text>
110-
)
111-
const subtitle = info.subtitle
112-
? <View style={styles.subtitle}>
113-
<Text selectable={true} style={[styles.name, styles.subtitleText]}>
114-
{info.subtitle}
115-
</Text>
116-
</View>
117-
: null
118-
119105
return (
120106
<ParallaxView
121107
backgroundSource={headerImage}
122108
windowHeight={100}
123109
scrollableViewStyle={styles.scrollableStyle}
124110
>
125111
<View>
126-
<View style={styles.title}>{title}</View>
127-
{subtitle}
128-
129-
<View
130-
style={[
131-
styles.badge,
132-
{backgroundColor: bgColors[openStatus] || c.goldenrod},
133-
]}
134-
>
135-
<Text selectable={true} style={styles.badgeText}>{openStatus}</Text>
136-
</View>
112+
<Header building={info} />
113+
114+
<Badge status={openStatus} />
137115

138116
<TableView>
139117
{schedules.map(set =>
@@ -142,23 +120,18 @@ export class BuildingHoursDetailView extends React.Component {
142120
header={set.title.toUpperCase()}
143121
footer={set.notes}
144122
>
145-
{set.hours.map((schedule, i) => {
146-
let isActiveSchedule =
147-
set.isPhysicallyOpen !== false &&
148-
schedule.days.includes(dayOfWeek) &&
149-
isBuildingOpenAtMoment(schedule, this.state.now)
150-
151-
return (
152-
<Cell
153-
key={i}
154-
cellStyle="RightDetail"
155-
title={summarizeDays(schedule.days)}
156-
titleTextStyle={isActiveSchedule ? styles.bold : null}
157-
detail={formatBuildingTimes(schedule, this.state.now)}
158-
detailTextStyle={isActiveSchedule ? styles.bold : null}
159-
/>
160-
)
161-
})}
123+
{set.hours.map((schedule, i) =>
124+
<ScheduleRow
125+
key={i}
126+
now={now}
127+
schedule={schedule}
128+
isActive={
129+
set.isPhysicallyOpen !== false &&
130+
schedule.days.includes(dayOfWeek) &&
131+
isBuildingOpenAtMoment(schedule, this.state.now)
132+
}
133+
/>,
134+
)}
162135
</Section>,
163136
)}
164137
</TableView>
@@ -167,3 +140,63 @@ export class BuildingHoursDetailView extends React.Component {
167140
)
168141
}
169142
}
143+
144+
function Header({building}) {
145+
const abbr = building.abbreviation
146+
? <Text style={styles.abbr}> ({building.abbreviation})</Text>
147+
: null
148+
149+
const title = (
150+
<Text selectable={true} style={styles.name}>{building.name}{abbr}</Text>
151+
)
152+
153+
const subtitle = building.subtitle
154+
? <View style={styles.subtitle}>
155+
<Text selectable={true} style={[styles.name, styles.subtitleText]}>
156+
{building.subtitle}
157+
</Text>
158+
</View>
159+
: null
160+
161+
return (
162+
<View>
163+
<View style={styles.title}>{title}</View>
164+
{subtitle}
165+
</View>
166+
)
167+
}
168+
169+
function Badge({status}) {
170+
const bgColors = {
171+
Open: c.moneyGreen,
172+
Closed: c.salmon,
173+
}
174+
175+
return (
176+
<View
177+
style={[styles.badge, {backgroundColor: bgColors[status] || c.goldenrod}]}
178+
>
179+
<Text selectable={true} style={styles.badgeText}>{status}</Text>
180+
</View>
181+
)
182+
}
183+
184+
function ScheduleRow({
185+
schedule,
186+
isActive,
187+
now,
188+
}: {
189+
schedule: SingleBuildingScheduleType,
190+
isActive: boolean,
191+
now: momentT,
192+
}) {
193+
return (
194+
<Cell
195+
cellStyle="RightDetail"
196+
title={summarizeDays(schedule.days)}
197+
titleTextStyle={isActive ? styles.bold : null}
198+
detail={formatBuildingTimes(schedule, now)}
199+
detailTextStyle={isActive ? styles.bold : null}
200+
/>
201+
)
202+
}

0 commit comments

Comments
 (0)