make Important Contacts load from the network

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/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'