✨ [Example] Significantly improve the example app (add states)

Author: cooperka

example/src/GenericListExample.js

@@ -1,9 +1,13 @@
+import Immutable from 'immutable';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View, Button, RefreshControl } from 'react-native';
 
 import style from './styles';
 
+const EMPTY_LIST = Immutable.List();
+const MOCK_DELAY = 800;
+
 class GenericListExample extends Component {
 
   static propTypes = {
@@ -20,58 +24,190 @@ class GenericListExample extends Component {
   componentWillMount() {
     const { initialDataA, initialDataB } = this.props;
 
+    this.defaultStateA.data = initialDataA;
+    this.defaultStateB.data = initialDataB;
+
+    this.setState({
+      listA: {
+        ...this.defaultStateA,
+      },
+      listB: {
+        ...this.defaultStateB,
+      },
+    });
+  }
+
+  defaultStateA = {
+    data: undefined, // Will be manually set on mount.
+    isLoading: false,
+    errorMsg: undefined,
+  };
+
+  defaultStateB = {
+    data: undefined, // Will be manually set on mount.
+    isLoading: false,
+    errorMsg: undefined,
+  };
+
+  changeDataA(delay = 0) {
+    const { listA } = this.state;
+    const { dataMutatorA } = this.props;
+
+    if (delay) {
+      this.setState({
+        listA: {
+          ...listA,
+          isLoading: true,
+        },
+      });
+    }
+
+    setTimeout(() => {
+      this.setState({
+        listA: {
+          ...listA,
+          data: dataMutatorA(listA.data),
+          isLoading: false,
+          errorMsg: undefined,
+        },
+      });
+    }, delay);
+  }
+
+  changeDataB(delay = 0) {
+    const { listB } = this.state;
+    const { dataMutatorB } = this.props;
+
+    if (delay) {
+      this.setState({
+        listB: {
+          ...listB,
+          isLoading: true,
+        },
+      });
+    }
+
+    setTimeout(() => {
+      this.setState({
+        listB: {
+          ...listB,
+          data: dataMutatorB(listB.data),
+          isLoading: false,
+          errorMsg: undefined,
+        },
+      });
+    }, delay);
+  }
+
+  toggleDefaultState() {
     this.setState({
-      listDataA: initialDataA,
-      listDataB: initialDataB,
+      listA: {
+        ...this.defaultStateA,
+      },
+      listB: {
+        ...this.defaultStateB,
+      },
     });
   }
 
-  changeDataA() {
+  toggleLoadingState() {
     this.setState({
-      listDataA: this.props.dataMutatorA(this.state.listDataA),
+      listA: {
+        ...this.defaultStateA,
+        data: EMPTY_LIST,
+        isLoading: true,
+      },
+      listB: {
+        ...this.defaultStateB,
+        data: EMPTY_LIST,
+        isLoading: true,
+      },
     });
   }
 
-  changeDataB() {
+  toggleErrorState() {
     this.setState({
-      listDataB: this.props.dataMutatorB(this.state.listDataB),
+      listA: {
+        ...this.defaultStateA,
+        data: EMPTY_LIST,
+        errorMsg: 'Error! Fake data A has gone rogue!',
+      },
+      listB: {
+        ...this.defaultStateB,
+        data: EMPTY_LIST,
+        errorMsg: 'Error! Fake data B has gone rogue!',
+      },
     });
   }
 
   render() {
-    const { listDataA, listDataB } = this.state;
+    const { listA, listB } = this.state;
     const { ListComponent, extraPropsA, extraPropsB, listComponentProps } = this.props;
 
+    const emptyTextA = listA.isLoading ? 'Loading...' : listA.errorMsg;
+    const emptyTextB = listB.isLoading ? 'Loading...' : listB.errorMsg;
+
     return (
       <View style={style.container}>
         <Text style={style.title}>
           {ListComponent.displayName || ListComponent.name}
         </Text>
-        <View style={style.sideBySideLists}>
+        <View style={style.controlPanelContainer}>
+          <Text style={style.controlPanelLabel}>
+            State:
+          </Text>
+          <Button
+            onPress={() => this.toggleDefaultState()}
+            title="'Default'"
+          />
+          <Button
+            onPress={() => this.toggleLoadingState()}
+            title="'Loading'"
+          />
+          <Button
+            onPress={() => this.toggleErrorState()}
+            title="'Error'"
+          />
+        </View>
+        <View style={style.listContainer}>
           <View style={style.list}>
-            <View style={style.button}>
+            <View style={style.listButton}>
               <Button
                 onPress={() => this.changeDataA()}
-                title="Update Data"
+                title="Update Data (or pull-refresh)"
               />
             </View>
             <ListComponent
-              immutableData={listDataA}
+              refreshControl={
+                <RefreshControl
+                  refreshing={listA.isLoading}
+                  onRefresh={() => this.changeDataA(MOCK_DELAY)}
+                />
+              }
               {...listComponentProps}
               {...extraPropsA}
+              immutableData={listA.data}
+              renderEmptyInList={emptyTextA}
             />
           </View>
           <View style={style.list}>
-            <View style={style.button}>
+            <View style={style.listButton}>
               <Button
                 onPress={() => this.changeDataB()}
-                title="Update Data"
+                title="Update Data (or pull-refresh)"
               />
             </View>
             <ListComponent
-              immutableData={listDataB}
+              refreshControl={
+                <RefreshControl
+                  refreshing={listB.isLoading}
+                  onRefresh={() => this.changeDataB(MOCK_DELAY)}
+                />
+              }
               {...listComponentProps}
               {...extraPropsB}
+              immutableData={listB.data}
+              renderEmptyInList={emptyTextB}
             />
           </View>
         </View>

example/src/styles.js

@@ -10,31 +10,44 @@ const style = StyleSheet.create({
   title: {
     fontSize: 20,
     textAlign: 'center',
-    margin: 20,
+    padding: 24,
   },
-  button: {
-    padding: 20,
-    paddingTop: 0,
+  controlPanelContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 12,
+    borderWidth: 2,
+    borderRadius: 8,
+    borderColor: 'black',
+    backgroundColor: 'transparent',
   },
-  listRow: {
-    fontSize: 13,
+  controlPanelLabel: {
+    fontSize: 18,
+    padding: 8,
+  },
+  listContainer: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  list: {
+    flex: 1,
+  },
+  listButton: {
+    margin: 4,
+  },
+  listRowItem: {
+    fontSize: 14,
     textAlign: 'center',
     color: '#333333',
     marginBottom: 5,
   },
-  listHeader: {
+  listHeaderItem: {
     fontSize: 16,
     textAlign: 'center',
     color: '#333333',
     marginBottom: 5,
   },
-  sideBySideLists: {
-    flex: 1,
-    flexDirection: 'row',
-  },
-  list: {
-    flex: 1,
-  },
 });
 
 export default style;

example/src/utils.js

@@ -6,18 +6,18 @@ import style from './styles';
 const utils = {
 
   renderRow(rowData) {
-    return <Text style={style.listRow}>{rowData}</Text>;
+    return <Text style={style.listRowItem}>{rowData}</Text>;
   },
 
   // eslint-disable-next-line react/prop-types
   renderItem({ item }) {
-    return <Text style={style.listRow}>{item}</Text>;
+    return <Text style={style.listRowItem}>{item}</Text>;
   },
 
   renderSectionHeader(sectionData, category) {
     return (
       <View>
-        <Text style={style.listHeader}>{category}</Text>
+        <Text style={style.listHeaderItem}>{category}</Text>
       </View>
     );
   },