Merge pull request #1612 from StoDevX/remote-data-sources

Add remaining remote data sources

Author: hawkrives

source/storybook/index.js

@@ -101,7 +101,10 @@ export class SnapshotsView extends React.Component {
       },
     },
     contacts: {
-      list: {view: () => <ContactsView />, delay: 100},
+      list: {
+        view: () => <Nav>{props => <ContactsView {...props} />}</Nav>,
+        delay: 100,
+      },
     },
     dictionary: {
       list: {

source/views/building-hours/stateful-list.js

@@ -12,7 +12,7 @@ import {BuildingHoursList} from './list'
 import moment from 'moment-timezone'
 import type {TopLevelViewPropsType} from '../types'
 import type {BuildingType} from './types'
-import * as defaultData from '../../../docs/building-hours'
+import * as defaultData from '../../../docs/building-hours.json'
 import {reportNetworkProblem} from '../../lib/report-network-problem'
 import toPairs from 'lodash/toPairs'
 import groupBy from 'lodash/groupBy'

source/views/contacts/contact-list.js

@@ -9,13 +9,18 @@ import {SectionList, StyleSheet} from 'react-native'
 import {ListSeparator, ListSectionHeader} from '../components/list'
 import {ListEmpty, ListFooter} from '../components/list'
 import {ContactRow} from './contact-row'
-import {data} from './data'
+import delay from 'delay'
+import {reportNetworkProblem} from '../../lib/report-network-problem'
+import * as defaultData from '../../../docs/contact-info.json'
 import groupBy from 'lodash/groupBy'
 import toPairs from 'lodash/toPairs'
 import * as c from '../components/colors'
 import type {ContactType} from './types'
+import type {TopLevelViewPropsType} from '../types'
 
 const AAO_URL = 'https://github.com/StoDevX/AAO-React-Native/issues/new'
+const GITHUB_URL =
+  'https://stodevx.github.io/AAO-React-Native/contact-info.json'
 
 const groupContacts = (contacts: ContactType[]) => {
   const grouped = groupBy(contacts, c => c.category)
@@ -28,12 +33,60 @@ const styles = StyleSheet.create({
   },
 })
 
-export default class ContactsListView extends React.PureComponent {
+type Props = TopLevelViewPropsType
+
+type State = {
+  contacts: Array<ContactType>,
+  loading: boolean,
+  refreshing: boolean,
+}
+
+export class ContactsListView extends React.PureComponent<void, Props, State> {
   static navigationOptions = {
     title: 'Important Contacts',
     headerBackTitle: 'Contacts',
   }
 
+  state = {
+    contacts: defaultData.data,
+    loading: true,
+    refreshing: false,
+  }
+
+  componentWillMount() {
+    this.fetchData()
+  }
+
+  refresh = async () => {
+    const start = Date.now()
+    this.setState(() => ({refreshing: true}))
+
+    await this.fetchData()
+
+    // wait 0.5 seconds – if we let it go at normal speed, it feels broken.
+    const elapsed = Date.now() - start
+    if (elapsed < 500) {
+      await delay(500 - elapsed)
+    }
+
+    this.setState(() => ({refreshing: false}))
+  }
+
+  fetchData = async () => {
+    this.setState(() => ({loading: true}))
+
+    let {data: contacts} = await fetchJson(GITHUB_URL).catch(err => {
+      reportNetworkProblem(err)
+      return defaultData
+    })
+
+    if (process.env.NODE_ENV === 'development') {
+      contacts = defaultData.data
+    }
+
+    this.setState(() => ({contacts, loading: false}))
+  }
+
   onPressContact = (contact: ContactType) => {
     this.props.navigation.navigate('ContactsDetailView', {
       contact,
@@ -46,12 +99,10 @@ export default class ContactsListView extends React.PureComponent {
   renderItem = ({item}: {item: ContactType}) =>
     <ContactRow contact={item} onPress={this.onPressContact} />
 
-  keyExtractor = (item: ContactType) => {
-    return item.title
-  }
+  keyExtractor = (item: ContactType) => item.title
 
   render() {
-    const groupedData = groupContacts(data)
+    const groupedData = groupContacts(this.state.contacts)
     return (
       <SectionList
         ItemSeparatorComponent={ListSeparator}
@@ -68,6 +119,8 @@ export default class ContactsListView extends React.PureComponent {
         keyExtractor={this.keyExtractor}
         renderSectionHeader={this.renderSectionHeader}
         renderItem={this.renderItem}
+        refreshing={this.state.refreshing}
+        onRefresh={this.refresh}
       />
     )
   }

source/views/contacts/data.js

@@ -1,4 +1,4 @@
 // @flow
 
-export {default as ContactsView} from './contact-list'
+export {ContactsListView as ContactsView} from './contact-list'
 export {ContactsDetailView} from './contact-detail'

source/views/contacts/index.js

@@ -15,6 +15,8 @@ import {
   ListSectionHeader,
   ListSeparator,
 } from '../components/list'
+import delay from 'delay'
+import {reportNetworkProblem} from '../../lib/report-network-problem'
 import LoadingView from '../components/loading'
 import type {WordType} from './types'
 import type {TopLevelViewPropsType} from '../types'
@@ -25,9 +27,10 @@ import uniq from 'lodash/uniq'
 import words from 'lodash/words'
 import deburr from 'lodash/deburr'
 import isString from 'lodash/isString'
-import {data as terms} from '../../../docs/dictionary.json'
+import * as defaultData from '../../../docs/dictionary.json'
 import {SearchBar} from '../components/searchbar'
 
+const GITHUB_URL = 'https://stodevx.github.io/AAO-React-Native/dictionary.json'
 const rowHeight = Platform.OS === 'ios' ? 76 : 89
 const headerHeight = Platform.OS === 'ios' ? 33 : 41
 
@@ -46,19 +49,59 @@ const styles = StyleSheet.create({
   },
 })
 
-export class DictionaryView extends React.Component {
+type Props = TopLevelViewPropsType
+
+type State = {
+  results: {[key: string]: Array<WordType>},
+}
+
+export class DictionaryView extends React.PureComponent<void, Props, State> {
   static navigationOptions = {
     title: 'Campus Dictionary',
     headerBackTitle: 'Dictionary',
   }
 
-  props: TopLevelViewPropsType
   searchBar: any
 
-  state: {
-    results: {[key: string]: Array<WordType>},
-  } = {
-    results: terms,
+  state = {
+    results: defaultData.data,
+    allTerms: defaultData.data,
+    loading: true,
+    refreshing: false,
+  }
+
+  componentWillMount() {
+    this.fetchData()
+  }
+
+  refresh = async () => {
+    const start = Date.now()
+    this.setState(() => ({refreshing: true}))
+
+    await this.fetchData()
+
+    // wait 0.5 seconds – if we let it go at normal speed, it feels broken.
+    const elapsed = Date.now() - start
+    if (elapsed < 500) {
+      await delay(500 - elapsed)
+    }
+
+    this.setState(() => ({refreshing: false}))
+  }
+
+  fetchData = async () => {
+    this.setState(() => ({loading: true}))
+
+    let {data: allTerms} = await fetchJson(GITHUB_URL).catch(err => {
+      reportNetworkProblem(err)
+      return defaultData
+    })
+
+    if (process.env.NODE_ENV === 'development') {
+      allTerms = defaultData.data
+    }
+
+    this.setState(() => ({allTerms, loading: false}))
   }
 
   onPressRow = (data: WordType) => {
@@ -105,13 +148,13 @@ export class DictionaryView extends React.Component {
   _performSearch = (text: string) => {
     // Android clear button returns an object
     if (!isString(text)) {
-      this.setState({results: terms})
+      this.setState(state => ({results: state.allTerms}))
       return
     }
 
     const query = text.toLowerCase()
-    this.setState(() => ({
-      results: terms.filter(term =>
+    this.setState(state => ({
+      results: state.allTerms.filter(term =>
         this.termToArray(term).some(word => word.startsWith(query)),
       ),
     }))
@@ -123,7 +166,7 @@ export class DictionaryView extends React.Component {
   performSearch = debounce(this._performSearch, 50)
 
   render() {
-    if (!terms) {
+    if (this.state.loading) {
       return <LoadingView />
     }
 

source/views/dictionary/list.js

@@ -64,15 +64,30 @@ export default class OtherModesView extends React.PureComponent {
 
   state = {
     modes: defaultData.data,
-    loading: false,
+    loading: true,
+    refreshing: false,
   }
 
   componentWillMount() {
     this.fetchData()
   }
 
-  fetchData = async () => {
+  refresh = async () => {
     const start = Date.now()
+    this.setState(() => ({refreshing: true}))
+
+    await this.fetchData()
+
+    // wait 0.5 seconds – if we let it go at normal speed, it feels broken.
+    const elapsed = Date.now() - start
+    if (elapsed < 500) {
+      await delay(500 - elapsed)
+    }
+
+    this.setState(() => ({refreshing: false}))
+  }
+
+  fetchData = async () => {
     this.setState(() => ({loading: true}))
 
     let {data: modes} = await fetchJson(GITHUB_URL).catch(err => {
@@ -84,12 +99,6 @@ export default class OtherModesView extends React.PureComponent {
       modes = defaultData.data
     }
 
-    // wait 0.5 seconds – if we let it go at normal speed, it feels broken.
-    const elapsed = Date.now() - start
-    if (elapsed < 500) {
-      await delay(500 - elapsed)
-    }
-
     this.setState(() => ({modes, loading: false}))
   }
 
@@ -102,8 +111,8 @@ export default class OtherModesView extends React.PureComponent {
       <FlatList
         keyExtractor={this.keyExtractor}
         renderItem={this.renderItem}
-        refreshing={this.state.loading}
-        onRefresh={this.fetchData}
+        refreshing={this.state.refreshing}
+        onRefresh={this.refresh}
         data={this.state.modes}
       />
     )