feat: add household relationship and update UI 🎉

hopetambala · Nov 16, 2020 · 3c2f853 · 3c2f853
1 parent 89a816f
commit 3c2f853
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 19 deletions.
diff --git a/components/FormikFields/PaperInputPicker/HouseholdManager/index.js b/components/FormikFields/PaperInputPicker/HouseholdManager/index.js
@@ -3,22 +3,22 @@ import {
   View, Modal
 } from 'react-native';
 import {
-  Button, RadioButton, Appbar, Text
+  Button, RadioButton, Appbar, Text, TextInput
 } from 'react-native-paper';
 
 import ResidentIdSearchbar from '../../../ResidentIdSearchbar';
 
 import { theme, layout } from '../../../../modules/theme';
 import I18n from '../../../../modules/i18n';
 
-import { postObjectsToClass } from '../../../../services/parse/crud';
+import { postObjectsToClass, postObjectsToClassWithRelation } from '../../../../services/parse/crud';
 
 import styles from './index.style';
 
 
 const HouseholdManager = (props) => {
-  const { formikProps, formikKey, surveyingOrganization } = props;
-  const { setFieldValue } = formikProps;
+  const { formikProps, formikKey, surveyingOrganization, values } = props;
+  const { setFieldValue, handleBlur, handleChange, errors } = formikProps;
   const [relationships] = useState([
     'Parent', 'Sibling', 'Grand-Parent', 'Cousin', 'Other'
   ]);
@@ -28,15 +28,45 @@ const HouseholdManager = (props) => {
   const [modalView, setModalView] = useState('zero');
 
   const onSubmit = () => {
-    setModalView('third');
-    attachToExistingHousehold();
+    if (!selectPerson) {
+      alert('You must search and select an individual.') //eslint-disable-line
+    }
+    else if (relationship === '') {
+      alert('You must select a role/relationship in the household.') //eslint-disable-line
+    }
+    else {
+      setModalView('third');
+      attachToExistingHousehold();
+      postHouseholdRelation();
+    }
   };
 
   const attachToExistingHousehold = () => {
     // set householdId (from selectPerson) on the residentIdForm
     setFieldValue(formikKey, selectPerson.householdId || 'No Household Id Found');
   };
 
+  const postHouseholdRelation = () => {
+    let finalRelationship = relationship;
+    if (relationship === 'Other') {
+      finalRelationship += '__' + values['other']
+    }
+    const postParams = {
+      parseParentClassID: selectPerson.householdId,
+      parseParentClass: 'Household',
+      parseClass: 'Household',
+      localObject: {
+        relationship: finalRelationship,
+        latitude: 0,
+        longitude: 0
+      }
+    };
+    postObjectsToClassWithRelation(postParams).then((result) => {
+      setFieldValue(formikKey, result.id)
+    })
+
+  }
+
   const createNewHousehold = () => {
     // create new householdId and attach on the residentIdForm
     const postParams = {
@@ -82,16 +112,14 @@ const HouseholdManager = (props) => {
               setSurveyee={setSelectPerson}
               surveyingOrganization={surveyingOrganization}
             />
-
-            <Text>{I18n.t('householdManager.relationshipHousehold')}</Text>
+            {!selectPerson && (
+              <Text style={{ fontWeight: 'bold', padding: 10 }}>Please use the searchbar to find and select the correct Househld.</Text>
+            )}
+            {selectPerson && (
+              <Text>{I18n.t('householdManager.relationshipHousehold')}</Text>
+            )}
             <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
-              {relationships.map((result) => (
-                // <Button
-                //   style={layout.buttonGroupButtonStyle}
-                //   key={result} mode="outlined"
-                //   onPress={() => setHouseholdRelationship(result)}>
-                //   <Text>{result}</Text>
-                // </Button>
+              {selectPerson && relationships.map((result) => (
                 <View key={result} style={layout.buttonGroupButtonStyle}>
                   {relationship === result ? (
                     <Button mode='contained'>{result}</Button>
@@ -101,9 +129,30 @@ const HouseholdManager = (props) => {
                 </View>
               ))}
             </View>
-            <Button theme={{ backgroundColor: theme.colors.primary }} mode="contained" onPress={onSubmit}>
-              {I18n.t('global.submit')}
-            </Button>
+            {relationship === 'Other' && (
+              <View style={styles}>
+                <TextInput
+                  label={'Other'}
+                  onChangeText={handleChange('other')}
+                  onBlur={handleBlur('other')}
+                  mode="outlined"
+                  theme={{ colors: { placeholder: theme.colors.primary }, text: 'black' }}
+                />
+                <Text style={{ color: 'red' }}>
+                  {errors['other']}
+                </Text>
+              </View>
+            )}
+            {selectPerson ? (
+              <Button style={{ marginTop: 10 }} theme={{ backgroundColor: theme.colors.primary }} mode="contained" onPress={onSubmit}>
+                {I18n.t('global.submit')}
+              </Button>
+            ) : (
+                <Button theme={{ backgroundColor: theme.colors.primary }} mode="contained" onPress={onSubmit} disabled={true}>
+                  {I18n.t('global.submit')}
+                </Button>
+              )}
+
           </View>
         </Modal>
       )}

diff --git a/components/FormikFields/PaperInputPicker/index.js b/components/FormikFields/PaperInputPicker/index.js
@@ -199,7 +199,7 @@ const PaperInputPicker = ({
                       {errors[result.textKey]}
                     </Text>
                   </View>
-              )}
+                )}
             </View>
           ))}
           <Text style={{ color: 'red' }}>
@@ -258,6 +258,7 @@ const PaperInputPicker = ({
             formikProps={formikProps}
             formikKey={formikKey}
             surveyingOrganization={surveyingOrganization}
+            values={values}
           />
         </View>
       )}