feat: refactor navigation by bringing it to the highest level of the …

…data collection domain
hopetambala · Oct 4, 2020 · af7d2a3 · af7d2a3
1 parent ef5b18d
commit af7d2a3
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 57 deletions.
diff --git a/domains/DataCollection/FormGallery/index.js b/domains/DataCollection/FormGallery/index.js
@@ -10,47 +10,44 @@ import { layout } from '../../../modules/theme';
 
 import ComingSoonSVG from '../../../assets/graphics/static/Adventurer.svg';
 
-const FormGallery = () => (
-  <View>
-    <View style={layout.screenRow}>
-      <Text>Puente Forms</Text>
-      <ScrollView horizontal>
-        <Card style={layout.cardSmallStyle}>
-          <Text>Env Health</Text>
+const FormGallery = (props) => {
+  const { navigateToNewRecord, puenteForms } = props;
+  return (
+    <View>
+      <View style={layout.screenRow}>
+        <Text>Puente Forms</Text>
+        <ScrollView horizontal>
+          {puenteForms.map((form) => (
+            <Card
+              key={form.tag}
+              style={layout.cardSmallStyle}
+              onPress={() => navigateToNewRecord(form.tag)}
+            >
+              <Text>{form.name}</Text>
+            </Card>
+          ))}
+        </ScrollView>
+      </View>
+      <View style={layout.screenRow}>
+        <Text>Custom Forms</Text>
+      </View>
+      <View style={layout.screenRow}>
+        <Text>Manage My Pinned Forms</Text>
+      </View>
+      <View style={layout.screenRow}>
+        <Card>
+          <Card.Content>
+            <ComingSoonSVG width={200} height={200} />
+            <Title>Our Marketplace</Title>
+            <Paragraph>Discover forms created by trusted companies</Paragraph>
+            <Button>
+              <Text>Explore Forms</Text>
+            </Button>
+          </Card.Content>
         </Card>
-        <Card style={layout.cardSmallStyle}>
-          <Text>Medical Assessment</Text>
-        </Card>
-        <Card style={layout.cardSmallStyle}>
-          <Text>Vitals</Text>
-        </Card>
-        <Card style={layout.cardSmallStyle}>
-          <Text>Vitals</Text>
-        </Card>
-        <Card style={layout.cardSmallStyle}>
-          <Text>Vitals</Text>
-        </Card>
-      </ScrollView>
-    </View>
-    <View style={layout.screenRow}>
-      <Text>Custom Forms</Text>
-    </View>
-    <View style={layout.screenRow}>
-      <Text>Manage My Pinned Forms</Text>
-    </View>
-    <View style={layout.screenRow}>
-      <Card>
-        <Card.Content>
-          <ComingSoonSVG width={200} height={200} />
-          <Title>Our Marketplace</Title>
-          <Paragraph>Discover forms created by trusted companies</Paragraph>
-          <Button>
-            <Text>Explore Forms</Text>
-          </Button>
-        </Card.Content>
-      </Card>
+      </View>
     </View>
-  </View>
-);
+  );
+};
 
 export default FormGallery;
diff --git a/domains/DataCollection/Forms/index.js b/domains/DataCollection/Forms/index.js
@@ -8,18 +8,13 @@ import SupplementaryForm from './SupplementaryForm';
 import GdprCompliance from '../GdprCompliance';
 import { layout } from '../../../modules/theme';
 
-const puenteForms = [
-  { tag: 'id', name: 'Resident ID' },
-  { tag: 'env', name: 'Environmental Health' },
-  { tag: 'med-eval', name: 'Medical Evaluation' }
-];
-
 const Forms = (props) => {
   const {
-    navigation, scrollViewScroll, setScrollViewScroll, navigateToGallery
+    navigation, navigateToGallery,
+    selectedForm, setSelectedForm,
+    scrollViewScroll, setScrollViewScroll,
+    puenteForms,
   } = props;
-
-  const [selectedForm, setSelectedForm] = useState('id');
   const [consent, setConsent] = useState(false);
   const [surveyeeId, selectedSurveyeeId] = useState();
 

diff --git a/domains/DataCollection/index.js b/domains/DataCollection/index.js
@@ -18,18 +18,27 @@ import FormGallery from './FormGallery';
 import { getData } from '../../modules/async-storage';
 import FindResidents from '../../components/FindResidents';
 
+const puenteForms = [
+  { tag: 'id', name: 'Resident ID' },
+  { tag: 'env', name: 'Environmental Health' },
+  { tag: 'med-eval', name: 'Medical Evaluation' }
+];
+
 const DataCollection = ({ navigation }) => {
   const [scrollViewScroll, setScrollViewScroll] = useState();
   const [view, setView] = useState('Root');
-  const [organization, setOrganization] = useState('');
+
+  const [userOrganization, setUserOrganization] = useState('');
   const [selectPerson, setSelectPerson] = useState();
+  const [selectedForm, setSelectedForm] = useState('id');
 
   const navigateToRoot = async () => {
     setView('Root');
   };
 
-  const navigateToNewRecord = async () => {
+  const navigateToNewRecord = (formTag) => {
     setView('Forms');
+    setSelectedForm(formTag || 'id');
   };
 
   const navigateToGallery = async () => {
@@ -38,7 +47,7 @@ const DataCollection = ({ navigation }) => {
 
   const navigateToFindRecords = async () => {
     await getData('organization').then((org) => {
-      setOrganization(org);
+      setUserOrganization(org);
       setView('Find Records');
     });
   };
@@ -54,8 +63,8 @@ const DataCollection = ({ navigation }) => {
       <ScrollView keyboardShouldPersistTaps="always" scrollEnabled={scrollViewScroll}>
         {view === 'Root'
           && (
-            <View>
-              <Card style={layout.cardSmallStyle} onPress={navigateToNewRecord}>
+            <View style={layout.screenFlexRowWrap}>
+              <Card style={layout.cardSmallStyle} onPress={() => navigateToNewRecord()}>
                 <Text>New Record</Text>
               </Card>
               <Card style={layout.cardSmallStyle} onPress={navigateToFindRecords}>
@@ -78,6 +87,9 @@ const DataCollection = ({ navigation }) => {
                 scrollViewScroll={scrollViewScroll}
                 setScrollViewScroll={setScrollViewScroll}
                 navigateToGallery={navigateToGallery}
+                selectedForm={selectedForm}
+                setSelectedForm={setSelectedForm}
+                puenteForms={puenteForms}
               />
             </View>
           )}
@@ -88,7 +100,8 @@ const DataCollection = ({ navigation }) => {
             </Button>
             <FormGallery
               navigation={navigation}
-              navigateToRoot={navigateToRoot}
+              navigateToNewRecord={navigateToNewRecord}
+              puenteForms={puenteForms}
             />
           </View>
         )}
@@ -101,7 +114,7 @@ const DataCollection = ({ navigation }) => {
               <FindResidents
                 selectPerson={selectPerson}
                 setSelectPerson={setSelectPerson}
-                organization={organization}
+                organization={userOrganization}
               />
             </View>
           )}

diff --git a/modules/theme/layout/index.js b/modules/theme/layout/index.js
@@ -18,12 +18,21 @@ const layout = StyleSheet.create({
    * Styling for rows in a screenContainer where you want elements aligned in a row
    */
   screenFlexRow: {
-    // flex: 1,
     marginHorizontal: 20,
     marginBottom: 20,
     alignItems: 'flex-start',
     flexDirection: 'row',
   },
+  /**
+   * Styling for rows in a screenContainer where you want elements aligned in a row with wrap
+   */
+  screenFlexRowWrap: {
+    marginHorizontal: 20,
+    marginBottom: 20,
+    alignItems: 'flex-start',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
   /**
    * Styling for rows in a screenContainer
    */