feat: add caching to map view and find records

hopetambala · Oct 25, 2020 · 462e13a · 462e13a
1 parent 8df546b
commit 462e13a
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 15 deletions.
diff --git a/App.js b/App.js
@@ -7,13 +7,19 @@ import MainNavigation from './components/MainNavigation';
 
 // REDUX
 import configureStore from './modules/state-management/configure-store';
+import useCachedResources from './modules/cached-resources/useCachedResources';
 
 // STYLING
 import { theme } from './modules/theme';
 
 const store = configureStore();
 
 export default function App() {
+  const isLoadingComplete = useCachedResources();
+
+  if (!isLoadingComplete) {
+    return null;
+  }
   return (
     <StoreProvider store={store}>
       <PaperProvider theme={theme}>

diff --git a/README.md b/README.md
@@ -10,6 +10,12 @@ Here are some quick npm commands to get started:
 - `npm build`: Build a production optimized bundle of the app.
 - `npm lint-fix`: Run the ESLinter.
 
+## Async Storage Values
+
+| Name of Value  | Description of Data                                                               |
+|----------------|-----------------------------------------------------------------------------------|
+| `organization` | Name of the surveying users surveyingOrganization                                 |
+| `residentData` | All `SurveyData` parse model data stored based on the users surveyingOrganization |
 
 ## Resources
 

diff --git a/components/FindResidents/index.js b/components/FindResidents/index.js
@@ -5,14 +5,18 @@ import {
 } from 'react-native';
 
 import {
-  Text, Searchbar
+  Headline, Searchbar
 } from 'react-native-paper';
 
 import { residentIDQuery } from '../../services/parse/crud';
+
+import { getData, storeData } from '../../modules/async-storage';
+import I18n from '../../modules/i18n';
+
 import ResidentCard from './Resident/ResidentCard';
 import ResidentPage from './Resident/ResidentPage';
 
-import I18n from '../../modules/i18n';
+import styles from './index.styles';
 
 const FindResidents = ({
   selectPerson, setSelectPerson, organization, puenteForms, navigateToNewRecord,
@@ -27,17 +31,27 @@ const FindResidents = ({
   }, []);
 
   const fetchData = async () => {
+    await getData('residentData').then((residentData) => {
+      setData(residentData || []);
+      setResidents(residentData.slice() || [].slice());
+    });
+
     const queryParams = {
       skip: 0,
       offset: 0,
       limit: 10000,
       parseColumn: 'surveyingOrganization',
       parseParam: organization,
     };
+
     let records = await residentIDQuery(queryParams);
     records = JSON.parse(JSON.stringify(records));
-    setData(records);
-    setResidents(records.slice());
+
+    if (data !== records) {
+      storeData(records, 'residentData');
+      setData(records);
+      setResidents(records.slice());
+    }
   };
 
   const filterList = () => data.filter(
@@ -75,17 +89,18 @@ const FindResidents = ({
   );
 
   return (
-    <View>
+    <View style={styles.container}>
       {!selectPerson && (
         <>
-          <Text>{I18n.t('findResident.searchIndividual')}</Text>
+          <Headline style={styles.header}>{I18n.t('findResident.searchIndividual')}</Headline>
           <Searchbar
             placeholder={I18n.t('findResident.typeHere')}
             onChangeText={onChangeSearch}
             value={query}
           />
         </>
       )}
+
       {/* Non-virtualized list */}
       {/* {!selectPerson && filterList(residents).map((listItem,) => (
         <View key={listItem.objectId}>

diff --git a/components/FindResidents/index.styles.js b/components/FindResidents/index.styles.js
@@ -0,0 +1,15 @@
+import {
+  StyleSheet
+} from 'react-native';
+
+const styles = StyleSheet.create({
+  header: {
+    fontWeight: 'bold',
+    marginTop: 10
+  },
+  container: {
+    marginHorizontal: 10
+  }
+});
+
+export default styles;
diff --git a/components/MapView/index.js b/components/MapView/index.js
@@ -6,6 +6,8 @@ import { IconButton } from 'react-native-paper';
 
 import getLocation from '../../modules/geolocation';
 import { theme } from '../../modules/theme';
+import { getData } from '../../modules/async-storage';
+
 import { residentIDQuery } from '../../services/parse/crud';
 
 const Maps = ({ organization }) => {
@@ -18,10 +20,17 @@ const Maps = ({ organization }) => {
   const [markers, setMarkers] = useState([]);
 
   useEffect(() => {
+    getData('residentData').then((residentData) => {
+      setMarkers(residentData);
+    });
+
     let isSubscribed = true;
+
     retrieveMarkers().then((records) => {
       if (isSubscribed) {
-        setMarkers(records); // sets records if promise is reached during mounting
+        if (records.length === 0) {
+          setMarkers(records); // sets records if promise is reached during mounting
+        }
       }
     });
     return function cleanup() {

diff --git a/modules/cached-resources/useCachedResources.js b/modules/cached-resources/useCachedResources.js
@@ -1,22 +1,34 @@
-import { Ionicons } from '@expo/vector-icons';
-import * as Font from 'expo-font';
+import React, { useEffect } from 'react';
 import * as SplashScreen from 'expo-splash-screen';
-import * as React from 'react';
 
-const spaceMono = require('../../assets/fonts/SpaceMono-Regular.ttf');
+import { storeData, getData } from '../async-storage';
+import { residentIDQuery } from '../../services/parse/crud';
+
+const fetchResidentData = async (surveyingOrganization) => {
+  const queryParams = {
+    skip: 0,
+    offset: 0,
+    limit: 10000,
+    parseColumn: 'surveyingOrganization',
+    parseParam: surveyingOrganization,
+  };
+  let records = await residentIDQuery(queryParams);
+  records = JSON.parse(JSON.stringify(records));
+  return records;
+};
 
 export default function useCachedResources() {
   const [isLoadingComplete, setLoadingComplete] = React.useState(false);
 
   // Load any resources or data that we need prior to rendering the app
-  React.useEffect(() => {
+  useEffect(() => {
     async function loadResourcesAndDataAsync() {
       try {
         SplashScreen.preventAutoHideAsync();
 
-        await Font.loadAsync({
-          ...Ionicons.font,
-          'space-mono': spaceMono,
+        await getData('organization').then(async (org) => {
+          const residentData = await fetchResidentData(org);
+          storeData(residentData, 'residentData');
         });
       } catch (e) {
         // We might want to provide this error information to an error reporting service