Skip to content

Commit 1ce5566

Browse files
hawkriveshawkrives
authored
Merge pull request #1102 from StoDevX/calendar
Add a Detail view to Calendar
2 parents 55a4fc3 + 9468eae commit 1ce5566

File tree

8 files changed

+144
-14
lines changed

8 files changed

+144
-14
lines changed

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
# AAO-React-Native [![Build Status](https://travis-ci.org/StoDevX/AAO-React-Native.svg?branch=master)](https://travis-ci.org/StoDevX/AAO-React-Native) [![Coverage Status](https://coveralls.io/repos/github/StoDevX/AAO-React-Native/badge.svg)](https://coveralls.io/github/StoDevX/AAO-React-Native)
1+
# AAO-React-Native
2+
[![Build Status](https://travis-ci.org/StoDevX/AAO-React-Native.svg?branch=master)](https://travis-ci.org/StoDevX/AAO-React-Native) [![Coverage Status](https://coveralls.io/repos/github/StoDevX/AAO-React-Native/badge.svg)](https://coveralls.io/github/StoDevX/AAO-React-Native)
23

34
## About
45
The St. Olaf community, now in pocket size… rewritten in React Native.

‎source/app.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import {
2222
configureScene,
2323
} from './views/components/navigation'
2424

25-
import CalendarView from './views/calendar'
25+
import CalendarView, {EventDetail as EventDetailView} from './views/calendar'
2626
import {ContactsView} from './views/contacts'
2727
import {DictionaryView, DictionaryDetailView} from './views/dictionary'
2828
import {HomeView, EditHomeView} from './views/home'
@@ -67,6 +67,8 @@ function renderScene(route, navigator) {
6767
return <FilterView {...props} />
6868
case 'CalendarView':
6969
return <CalendarView {...props} />
70+
case 'EventDetailView':
71+
return <EventDetailView {...props} />
7072
case 'ContactsView':
7173
return <ContactsView {...props} />
7274
case 'DictionaryView':

‎source/views/calendar/calendar-google.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import React from 'react'
88
import {EventList} from './event-list'
99
import bugsnag from '../../bugsnag'
1010
import {tracker} from '../../analytics'
11+
import type {TopLevelViewPropsType} from '../types'
1112
import type {EventType, GoogleEventType} from './types'
1213
import moment from 'moment-timezone'
1314
import delay from 'delay'
@@ -35,9 +36,7 @@ export class GoogleCalendarView extends React.Component {
3536
this.refresh()
3637
}
3738

38-
props: {
39-
calendarId: string,
40-
}
39+
props: {calendarId: string} & TopLevelViewPropsType
4140

4241
buildCalendarUrl(calendarId: string) {
4342
let calendarUrl = `https://www.googleapis.com/calendar/v3/calendars/${calendarId}/events`
@@ -117,6 +116,8 @@ export class GoogleCalendarView extends React.Component {
117116

118117
return (
119118
<EventList
119+
navigator={this.props.navigator}
120+
route={this.props.route}
120121
events={this.state.events}
121122
refreshing={this.state.refreshing}
122123
onRefresh={this.refresh}

‎source/views/calendar/event-detail.js‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
// @flow
2+
import React from 'react'
3+
import {Text, ScrollView, StyleSheet} from 'react-native'
4+
import moment from 'moment-timezone'
5+
import {fastGetTrimmedText} from '../../lib/html'
6+
import {Cell, Section, TableView} from 'react-native-tableview-simple'
7+
import type {EventType} from './types'
8+
9+
const styles = StyleSheet.create({
10+
chunk: {
11+
paddingVertical: 10,
12+
},
13+
})
14+
15+
function display(title: string, data: string) {
16+
return data.trim()
17+
? <Section header={title}>
18+
<Cell
19+
cellContentView={
20+
<Text selectable={true} style={styles.chunk}>
21+
{data}
22+
</Text>
23+
}
24+
/>
25+
</Section>
26+
: null
27+
}
28+
29+
function displayTimes(title: string, event: EventType) {
30+
const eventLength = moment
31+
.duration(event.endTime.diff(event.startTime))
32+
.asHours()
33+
34+
const allDay = eventLength === 24
35+
const multiDay = event.startTime.dayOfYear() !== event.endTime.dayOfYear()
36+
const sillyZeroLength = event.startTime.isSame(event.endTime, 'minute')
37+
38+
if (allDay) {
39+
return display(title, 'All-Day')
40+
}
41+
42+
let start, end
43+
if (event.isOngoing) {
44+
start = event.startTime.format('MMM. D')
45+
end = event.endTime.format('MMM. D')
46+
} else if (multiDay) {
47+
start = event.startTime.format('h:mm A')
48+
end = `${event.endTime.format('MMM. D h:mm A')}`
49+
} else if (sillyZeroLength) {
50+
start = event.startTime.format('h:mm A')
51+
end = '???'
52+
} else {
53+
start = event.startTime.format('h:mm A')
54+
end = event.endTime.format('h:mm A')
55+
}
56+
57+
return display(title, start + ' — ' + end)
58+
}
59+
60+
export function EventDetail({event}: {event: EventType}) {
61+
let title = fastGetTrimmedText(event.summary || '')
62+
let summary = fastGetTrimmedText(event.extra.data.description || '')
63+
let location = fastGetTrimmedText(event.location || '')
64+
65+
return (
66+
<ScrollView>
67+
<TableView>
68+
{display('EVENT', title)}
69+
{displayTimes('TIME', event)}
70+
{display('LOCATION', location)}
71+
{display('DESCRIPTION', summary)}
72+
</TableView>
73+
</ScrollView>
74+
)
75+
}

‎source/views/calendar/event-list.js‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@
55
*/
66

77
import React from 'react'
8-
import {StyleSheet} from 'react-native'
8+
import {StyleSheet, Share} from 'react-native'
99
import * as c from '../components/colors'
1010
import SimpleListView from '../components/listview'
11+
import type {TopLevelViewPropsType} from '../types'
1112
import type {EventType} from './types'
1213
import groupBy from 'lodash/groupBy'
1314
import size from 'lodash/size'
@@ -23,7 +24,7 @@ export class EventList extends React.Component {
2324
refreshing: boolean,
2425
onRefresh: () => any,
2526
now: moment,
26-
}
27+
} & TopLevelViewPropsType
2728

2829
groupEvents = (
2930
events: EventType[],
@@ -40,6 +41,26 @@ export class EventList extends React.Component {
4041
})
4142
}
4243

44+
shareItem = (event: EventType) => {
45+
Share.share({
46+
message: `${event.summary}: ${event.startTime.toString()} – ${event.endTime.toString()}`,
47+
})
48+
.then(result => console.log(result))
49+
.catch(error => console.log(error.message))
50+
}
51+
52+
onPressEvent = (title: string, event: EventType) => {
53+
this.props.navigator.push({
54+
id: 'EventDetailView',
55+
index: this.props.route.index + 1,
56+
title: title,
57+
backButtonTitle: 'Events',
58+
props: {event},
59+
onRightButton: () => this.shareItem(event),
60+
rightButton: 'share',
61+
})
62+
}
63+
4364
renderSectionHeader = (
4465
sectionData: EventType[],
4566
sectionIdentifier: string,
@@ -72,7 +93,11 @@ export class EventList extends React.Component {
7293
refreshing={this.props.refreshing}
7394
onRefresh={this.props.onRefresh}
7495
>
75-
{(event: EventType) => <EventRow event={event} />}
96+
{(event: EventType) =>
97+
<EventRow
98+
onPress={() => this.onPressEvent(event.summary, event)}
99+
event={event}
100+
/>}
76101
</SimpleListView>
77102
)
78103
}

‎source/views/calendar/event-row.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,21 @@ const styles = StyleSheet.create({
3232
},
3333
})
3434

35-
export default function EventRow({event}: {event: EventType}) {
35+
export default function EventRow({
36+
event,
37+
onPress,
38+
}: {
39+
event: EventType,
40+
onPress: () => any,
41+
}) {
3642
const title = fastGetTrimmedText(event.summary)
3743

3844
return (
3945
<ListRow
4046
contentContainerStyle={styles.row}
41-
arrowPosition="none"
47+
arrowPosition="top"
4248
fullWidth={true}
49+
onPress={onPress}
4350
>
4451
<Row>
4552
<CalendarTimes event={event} style={styles.timeContainer} />

‎source/views/calendar/index.js‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,16 @@
66

77
import React from 'react'
88

9+
import type {TopLevelViewPropsType} from '../types'
910
import TabbedView from '../components/tabbed-view'
1011
import {GoogleCalendarView} from './calendar-google'
1112

12-
export default function CalendarPage() {
13+
export {EventDetail} from './event-detail'
14+
15+
export default function CalendarPage({
16+
navigator,
17+
route,
18+
}: TopLevelViewPropsType) {
1319
return (
1420
<TabbedView
1521
tabs={[
@@ -18,21 +24,33 @@ export default function CalendarPage() {
1824
title: 'St. Olaf',
1925
icon: 'school',
2026
component: () =>
21-
<GoogleCalendarView calendarId="le6tdd9i38vgb7fcmha0hu66u9gjus2e%40import.calendar.google.com" />,
27+
<GoogleCalendarView
28+
navigator={navigator}
29+
route={route}
30+
calendarId="le6tdd9i38vgb7fcmha0hu66u9gjus2e%40import.calendar.google.com"
31+
/>,
2232
},
2333
{
2434
id: 'OlevilleCalendarView',
2535
title: 'Oleville',
2636
icon: 'happy',
2737
component: () =>
28-
<GoogleCalendarView calendarId="[email protected]" />,
38+
<GoogleCalendarView
39+
navigator={navigator}
40+
route={route}
41+
calendarId="[email protected]"
42+
/>,
2943
},
3044
{
3145
id: 'NorthfieldCalendarView',
3246
title: 'Northfield',
3347
icon: 'pin',
3448
component: () =>
35-
<GoogleCalendarView calendarId="thisisnorthfield%40gmail.com" />,
49+
<GoogleCalendarView
50+
navigator={navigator}
51+
route={route}
52+
calendarId="thisisnorthfield%40gmail.com"
53+
/>,
3654
},
3755
]}
3856
/>

‎source/views/calendar/types.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ type GoogleTimeType = {
66
}
77
export type GoogleEventType = {
88
summary?: string,
9+
description?: string,
910
start: GoogleTimeType,
1011
end: GoogleTimeType,
1112
location?: string,

0 commit comments

Comments
 (0)