Tweak listviews (#172)

* Fix function called with loading spinners.

This fixes the animations on the listviews when loading with activity spinners.

* add a refresh control to the news views

* check for offline in sis stuff

* add pageSize to newsContainer

* add a refreshControl to Calendar

* fix bug about getConnected in financials data loading

* make buildingHours update without needing to refresh

also fixes the missing content bug

* simplify refresh in calendar and news

* add refresh to oleville

* add refresh to balances

* add time delay to refresh in courses

Author: hawkrives

lib/courses.js

@@ -4,7 +4,7 @@ import {
     loadLoginCredentials,
     sisLogin,
 } from '../lib/login'
-import { AsyncStorage } from 'react-native'
+import { AsyncStorage, NetInfo } from 'react-native'
 
 import buildFormData from './formdata'
 import {parseHtml, cssSelect, getText} from './html'
@@ -37,14 +37,17 @@ const COURSES__TERM_LIST = 'courses:term-list'
 const COURSES__CACHE__COURSES = 'courses:cache-time:courses'
 const COURSES__CACHE__TERM_LIST = 'courses:cache-time:term-list'
 
-
-export async function loadAllCourses(forceFromServer?: bool): Promise<{[key: string]: (CourseType|Error)[]}> {
+type CourseMappingType = {[key: string]: (CourseType|Error)[]};
+export async function loadAllCourses(forceFromServer?: bool): Promise<CourseMappingType> {
   // await AsyncStorage.removeItem(COURSES__CACHE__COURSES)
   let timeLastFetched = JSON.parse(await AsyncStorage.getItem(COURSES__CACHE__COURSES))
   let needsUpdate = moment(timeLastFetched).isBefore(moment().subtract(1, 'hour'))
-  if (!timeLastFetched || needsUpdate || forceFromServer) {
+
+  let isConnected = await NetInfo.isConnected.fetch()
+  if (isConnected && (!timeLastFetched || needsUpdate || forceFromServer)) {
     return await getAllCoursesFromServer()
   }
+
   return await getAllCoursesFromStorage()
 }
 

lib/financials.js

@@ -4,7 +4,7 @@ import {
     loadLoginCredentials,
     sisLogin,
 } from '../lib/login'
-import { AsyncStorage } from 'react-native'
+import { AsyncStorage, NetInfo } from 'react-native'
 
 import buildFormData from './formdata'
 import {parseHtml, cssSelect, getText} from './html'
@@ -18,10 +18,12 @@ const FINANCIALS__PRINT = 'financials:print'
 
 type FinancialDataShapeType = {flex: null|number, ole: null|number, print: null|number};
 
-export async function getFinancialData(): Promise<FinancialDataShapeType> {
+export async function getFinancialData(forceFromServer?: bool): Promise<FinancialDataShapeType> {
   let timeLastFetched = JSON.parse(await AsyncStorage.getItem(FINANCIALS__CACHE__BALANCES))
   let needsUpdate = moment(timeLastFetched).isBefore(moment().subtract(1, 'minute'))
-  if (!timeLastFetched || needsUpdate) {
+
+  let isConnected = await NetInfo.isConnected.fetch()
+  if (isConnected && (!timeLastFetched || needsUpdate || forceFromServer)) {
     return await getFinancialDataFromServer()
   }
   return await getFinancialDataFromStorage()

package.json

@@ -26,6 +26,7 @@
   "dependencies": {
     "buffer": "4.9.1",
     "css-select": "1.2.0",
+    "delay": "1.3.1",
     "events": "1.1.1",
     "frisbee": "1.1.1",
     "html-entities": "1.2.0",

views/building-hours/index.js

@@ -5,9 +5,10 @@
  */
 
 import React from 'react'
-import {ListView} from 'react-native'
+import {View, Text, ListView, RefreshControl} from 'react-native'
 import BuildingView from './building'
 
+import delay from 'delay'
 import type {BuildingInfoType} from './types'
 import hoursData from '../../data/building-hours.json'
 
@@ -28,15 +29,28 @@ const buildingImages = {
 export default class BuildingHoursView extends React.Component {
   state = {
     dataSource: new ListView.DataSource({
-      rowHasChanged: this._rowHasChanged,
+      rowHasChanged: (r1: BuildingInfoType, r2: BuildingInfoType) => r1.name !== r2.name,
     }).cloneWithRows(hoursData),
+    intervalId: 0,
+    now: Date.now(),
+    refreshing: false,
   }
 
-  _rowHasChanged(r1: BuildingInfoType, r2: BuildingInfoType) {
-    return r1.name !== r2.name
+  componentWillMount() {
+    // This updates the screen every ten seconds, so that the building
+    // info statuses are updated without needing to leave and come back.
+    this.setState({intervalId: setInterval(this.updateTime, 10000)})
   }
 
-  _renderRow(data: BuildingInfoType) {
+  componentWillUnmount() {
+    clearTimeout(this.state.intervalId)
+  }
+
+  updateTime = () => {
+    this.setState({now: Date.now()})
+  }
+
+  _renderRow = (data: BuildingInfoType) => {
     return (
       <BuildingView
         name={data.name}
@@ -46,6 +60,13 @@ export default class BuildingHoursView extends React.Component {
     )
   }
 
+  refresh = async () => {
+    this.setState({refreshing: true})
+    await delay(500)
+    this.setState({now: Date.now()})
+    this.setState({refreshing: false})
+  }
+
   // Render a given scene
   render() {
     return (
@@ -54,6 +75,13 @@ export default class BuildingHoursView extends React.Component {
         renderRow={this._renderRow.bind(this)}
         pageSize={4}
         initialListSize={6}
+        removeClippedSubviews={false}  // remove after https://github.com/facebook/react-native/issues/8607#issuecomment-241715202
+        refreshControl={
+          <RefreshControl
+            refreshing={this.state.refreshing}
+            onRefresh={this.refresh}
+          />
+        }
       />
     )
   }

views/calendar/calendar.js

@@ -10,8 +10,10 @@ import {
   Text,
   Platform,
   ListView,
+  RefreshControl,
 } from 'react-native'
 
+import delay from 'delay'
 import LoadingView from '../components/loading'
 import qs from 'querystring'
 import EventView from './event'
@@ -26,46 +28,29 @@ type GoogleCalendarEventType = {
   end: GoogleCalendarTimeType,
   location: string,
 };
-type StateType = {
-  events: null|GoogleCalendarResponseType,
-  loaded: boolean,
-  error: null|string,
-};
-type GoogleCalendarResponseType = {
-  items: GoogleCalendarEventType[],
-};
 
 export default class CalendarView extends React.Component {
   static propTypes = {
-    source: React.PropTypes.oneOf(['master', 'oleville']).isRequired,
+    calendarId: React.PropTypes.string.isRequired,
   }
 
-  state: StateType = {
-    events: null,
+  state = {
+    events: new ListView.DataSource({
+      rowHasChanged: this._rowHasChanged,
+    }),
     loaded: false,
+    refreshing: true,
     error: null,
   }
 
   componentWillMount() {
-    if (this.props.source === 'master') {
-      this.getMasterEvents()
-    } else {
-      this.getOlevilleEvents()
-    }
+    this.refresh()
   }
 
   _rowHasChanged(r1: GoogleCalendarEventType, r2: GoogleCalendarEventType) {
     return r1.summary != r2.summary
   }
 
-  async getMasterEvents() {
-    this.getEvents('le6tdd9i38vgb7fcmha0hu66u9gjus2e%40import.calendar.google.com')
-  }
-
-  async getOlevilleEvents() {
-    this.getEvents('[email protected]')
-  }
-
   buildCalendarUrl(calendarId: string) {
     let calendarUrl = `https://www.googleapis.com/calendar/v3/calendars/${calendarId}/events`
     let params = {
@@ -79,9 +64,8 @@ export default class CalendarView extends React.Component {
     return `${calendarUrl}?${qs.stringify(params)}`
   }
 
-  async getEvents(calendarId: string) {
-    let url = this.buildCalendarUrl(calendarId)
-    console.log(url)
+  getEvents = async () => {
+    let url = this.buildCalendarUrl(this.props.calendarId)
 
     let data = null
     let error = null
@@ -90,41 +74,49 @@ export default class CalendarView extends React.Component {
       error = result.error
       data = result.items
     } catch (error) {
-      this.setState({error: 'Error!'})
+      this.setState({error: error.message})
       console.error(error)
     }
 
     if (data) {
-      this.setState({events: data})
+      this.setState({events: this.state.events.cloneWithRows(data)})
     }
     if (error) {
       this.setState({error: error.message})
     }
     this.setState({loaded: true})
   }
 
+  refresh = async () => {
+    let start = Date.now()
+    this.setState({refreshing: true})
+
+    await this.getEvents()
+
+    // wait 0.5 seconds – if we let it go at normal speed, it feels broken.
+    let elapsed = start - Date.now()
+    if (elapsed < 500) {
+      await delay(500 - elapsed)
+    }
+
+    this.setState({refreshing: false})
+  }
+
   render() {
-    if (!this.state.events) {
+    if (!this.state.loaded) {
       return <LoadingView />
     }
 
     if (this.state.error) {
-      return (
-        <Text>
-          {this.state.error}
-        </Text>
-      )
+      return <Text>{this.state.error}</Text>
     }
 
-    let ds = new ListView.DataSource({
-      rowHasChanged: this._rowHasChanged,
-    })
-
     return (
       <ListView
         style={styles.container}
         contentInset={{bottom: Platform.OS === 'ios' ? 49 : 0}}
-        dataSource={ds.cloneWithRows(this.state.events)}
+        dataSource={this.state.events}
+        pageSize={5}
         renderRow={data =>
           <EventView
             style={styles.row}
@@ -134,6 +126,12 @@ export default class CalendarView extends React.Component {
             location={data.location}
           />
         }
+        refreshControl={
+          <RefreshControl
+            refreshing={this.state.refreshing}
+            onRefresh={this.refresh}
+          />
+        }
       />
     )
   }
@@ -147,7 +145,7 @@ let styles = StyleSheet.create({
   row: {
     minHeight: 88,
     marginLeft: 10,
-    marginRight: 10,
+    paddingRight: 10,
     borderBottomWidth: 1,
     borderBottomColor: '#ebebeb',
   },

views/calendar/tabs.js

@@ -1,5 +1,4 @@
 // @flow
-import React from 'react'
 import CalendarView from './calendar'
 
 export default [
@@ -8,13 +7,13 @@ export default [
     title: 'Master Events',
     rnVectorIcon: {iconName: 'school'},
     component: CalendarView,
-    props: {source: 'master'},
+    props: {calendarId: 'le6tdd9i38vgb7fcmha0hu66u9gjus2e%40import.calendar.google.com'},
   },
   {
     id: 'oleville',
     title: 'Oleville Events',
     rnVectorIcon: {iconName: 'happy'},
     component: CalendarView,
-    props: {source: 'oleville'},
+    props: {calendarId: '[email protected]'},
   },
 ]