group events by day

Author: hawkrives

views/calendar/calendar.js

@@ -11,12 +11,16 @@ import {
   Platform,
   ListView,
   RefreshControl,
+  View,
 } from 'react-native'
 
+import groupBy from 'lodash/groupBy'
+import moment from 'moment-timezone'
 import delay from 'delay'
 import LoadingView from '../components/loading'
 import qs from 'querystring'
 import EventView from './event'
+import * as c from '../components/colors'
 import { GOOGLE_CALENDAR_API_KEY } from '../../lib/config'
 
 type GoogleCalendarTimeType = {
@@ -36,7 +40,8 @@ export default class CalendarView extends React.Component {
 
   state = {
     events: new ListView.DataSource({
-      rowHasChanged: this._rowHasChanged,
+      rowHasChanged: this.rowHasChanged,
+      sectionHeaderHasChanged: this.sectionHeaderHasChanged,
     }),
     loaded: false,
     refreshing: true,
@@ -47,8 +52,12 @@ export default class CalendarView extends React.Component {
     this.refresh()
   }
 
-  _rowHasChanged(r1: GoogleCalendarEventType, r2: GoogleCalendarEventType) {
-    return r1.summary != r2.summary
+  rowHasChanged(r1: GoogleCalendarEventType, r2: GoogleCalendarEventType) {
+    return r1.summary !== r2.summary
+  }
+
+  sectionHeaderHasChanged(h1: number, h2: number) {
+    return h1 !== h2
   }
 
   buildCalendarUrl(calendarId: string) {
@@ -79,7 +88,12 @@ export default class CalendarView extends React.Component {
     }
 
     if (data) {
-      this.setState({events: this.state.events.cloneWithRows(data)})
+      data.forEach(event => {
+        event.startTime = moment(event.start.dateTime)
+        event.endTime = moment(event.end.dateTime)
+      })
+      let grouped = groupBy(data, event => event.startTime.format('ddd  MMM Do'))
+      this.setState({events: this.state.events.cloneWithRowsAndSections(grouped)})
     }
     if (error) {
       this.setState({error: error.message})
@@ -102,6 +116,32 @@ export default class CalendarView extends React.Component {
     this.setState({refreshing: false})
   }
 
+  renderRow = (data: Object) => {
+    return (
+      <EventView
+        style={styles.row}
+        eventTitle={data.summary}
+        startTime={data.startTime}
+        endTime={data.endTime}
+        location={data.location}
+      />
+    )
+  }
+
+  renderSectionHeader = (sectionData: Object, sectionIdentifier: any) => {
+    return (
+      <View style={styles.rowSectionHeader}>
+        <Text style={styles.rowSectionHeaderText} numberOfLines={1}>
+          {sectionIdentifier}
+        </Text>
+      </View>
+    )
+  }
+
+  renderSeparator = (sectionID: any, rowID: any) => {
+    return <View key={`${sectionID}-${rowID}`} style={styles.separator} />
+  }
+
   render() {
     if (!this.state.loaded) {
       return <LoadingView />
@@ -117,15 +157,9 @@ export default class CalendarView extends React.Component {
         contentInset={{bottom: Platform.OS === 'ios' ? 49 : 0}}
         dataSource={this.state.events}
         pageSize={5}
-        renderRow={data =>
-          <EventView
-            style={styles.row}
-            eventTitle={data.summary}
-            startTime={data.start.dateTime}
-            endTime={data.end.dateTime}
-            location={data.location}
-          />
-        }
+        renderRow={this.renderRow}
+        renderSectionHeader={this.renderSectionHeader}
+        renderSeparator={this.renderSeparator}
         refreshControl={
           <RefreshControl
             refreshing={this.state.refreshing}
@@ -144,9 +178,24 @@ let styles = StyleSheet.create({
   },
   row: {
     minHeight: 88,
-    marginLeft: 10,
-    paddingRight: 10,
-    borderBottomWidth: 1,
+    // marginLeft: 10,
+    // paddingRight: 10,
+  },
+  separator: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
     borderBottomColor: '#ebebeb',
   },
+  rowSectionHeader: {
+    backgroundColor: c.iosListSectionHeader,
+    paddingTop: 5,
+    paddingBottom: 5,
+    paddingLeft: 10,
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: '#ebebeb',
+  },
+  rowSectionHeaderText: {
+    color: 'black',
+    fontWeight: 'bold',
+  },
 })

views/calendar/event.js

@@ -5,52 +5,50 @@ import {
   Text,
 } from 'react-native'
 
-import moment from 'moment-timezone'
 import * as c from '../components/colors'
 import {getText, parseHtml} from '../../lib/html'
 
 let styles = StyleSheet.create({
+  container: {
+    paddingTop: 10,
+    paddingBottom: 6,
+    paddingLeft: 10,
+  },
   itemTitle: {
     color: c.black,
-    paddingLeft: 10,
-    paddingRight: 10,
-    paddingTop: 10,
     paddingBottom: 3,
     fontSize: 16,
-    textAlign: 'left',
+    fontWeight: '500',
   },
   itemPreview: {
     color: c.iosText,
-    paddingLeft: 10,
-    paddingRight: 10,
-    paddingBottom: 6,
     fontSize: 13,
-    textAlign: 'left',
   },
 })
 
 // PROPS: eventTitle, location, startTime, endTime
-export default function EventView(props: {eventTitle: string, location: string, startTime?: string, endTime?: string, style?: any}) {
+export default function EventView(props: {eventTitle: string, location: string, startTime?: Object, endTime?: Object, style?: any}) {
   let title = getText(parseHtml(props.eventTitle))
 
-  let stString = moment(props.startTime).format('M/D h:mma')
-  let etString = moment(props.endTime).format('M/D h:mma')
-
   let showTimes = props.startTime && props.endTime
   let showLocation = Boolean(props.location)
 
   return (
-    <View style={props.style}>
+    <View style={[styles.container, props.style]}>
       <Text style={styles.itemTitle}>{title}</Text>
-      { showTimes ? <Text style={styles.itemPreview}>{stString} - {etString}</Text> : null }
-      { showLocation ? <Text style={styles.itemPreview}>{props.location}</Text> : null }
+      { showTimes ? <Text style={styles.itemPreview}>
+        {props.startTime.format('M/D h:mma')} — {props.endTime.format('M/D h:mma')}
+      </Text> : null }
+      { showLocation ? <Text style={styles.itemPreview}>
+        {props.location}
+      </Text> : null }
     </View>
   )
 }
 EventView.propTypes = {
-  endTime: React.PropTypes.string,
+  endTime: React.PropTypes.object,
   eventTitle: React.PropTypes.string.isRequired,
   location: React.PropTypes.string,
-  startTime: React.PropTypes.string,
+  startTime: React.PropTypes.object,
   style: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.object]),
 }