feat: error alert for user displays 🎉

components/FormikFields/ErrorPicker/index.js

@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from 'react';
+import { Snackbar } from 'react-native-paper';
+import {
+  View, Text
+} from 'react-native';
+import I18n from '../../../modules/i18n';
+
+const ErrorPicker = ({ formikProps, inputs }) => {
+  const { errors, isSubmitting } = formikProps;
+  const [formErrors, setFormErrors] = useState([])
+  const [visible, setVisible] = useState(false)
+
+  const keysToLabel = (keys) => {
+    let label = [];
+    keys.forEach((key) => {
+      inputs.forEach((input) => {
+        if (key === input.formikKey) {
+          label = label.concat([I18n.t(input.label)]);
+        }
+        else if (input.fieldType === 'multiInputRowNum') {
+          input.options.forEach((option) => {
+            if (key === option.value) {
+              label = label.concat(I18n.t(option.label))
+            }
+          })
+        }
+      })
+    });
+    setFormErrors(label.join(", "));
+  }
+
+  useEffect(() => {
+    Object.keys(errors).length > 0 ? setVisible(true) : setVisible(false);
+    keysToLabel(Object.keys(errors))
+  }, [isSubmitting])
+
+  const dismissSnackBar = () => setVisible(false);
+
+  return (
+    <View>
+      <Snackbar
+        visible={visible}
+        onDismiss={dismissSnackBar}
+        duration={8500}
+        style={{
+          backgroundColor: 'red',
+          fontSize: 130
+        }}
+      >
+        <Text style={{ fontSize: 16, fontWeight: 'bold' }}>Inavlid Fields: {"\n\n"}{formErrors}</Text>
+      </Snackbar>
+    </View>
+  )
+}
+
+export default ErrorPicker;

domains/DataCollection/Forms/IdentificationForm/index.js

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import {
   ActivityIndicator,
-  View, TouchableWithoutFeedback, Keyboard
+  View, TouchableWithoutFeedback, Keyboard,
+  Text
 } from 'react-native';
 import { Formik } from 'formik';
 
@@ -16,7 +17,7 @@ import I18n from '../../../../modules/i18n';
 import PaperButton from '../../../../components/Button';
 import PaperInputPicker from '../../../../components/FormikFields/PaperInputPicker';
 import yupValidationPicker from '../../../../components/FormikFields/YupValidation';
-
+import ErrorPicker from '../../../../components/FormikFields/ErrorPicker';
 import backgroundPostPatient from './utils';
 import surveyingUserFailsafe from '../utils';
 
@@ -117,17 +118,22 @@ const IdentificationForm = ({
                   />
                 </View>
               ))}
+              <ErrorPicker
+                // data={result}
+                formikProps={formikProps}
+                inputs={inputs}
+              />
               {formikProps.isSubmitting ? (
                 <ActivityIndicator />
               ) : (
-                <PaperButton
-                  onPressEvent={formikProps.handleSubmit}
-                  buttonText={I18n.t('global.submit')}
-                />
-              // <Button icon="human" onPress={formikProps.handleSubmit}>
-              //   <Text>Submit</Text>
-              // </Button>
-              )}
+                  <PaperButton
+                    onPressEvent={formikProps.handleSubmit}
+                    buttonText={I18n.t('global.submit')}
+                  />
+                  // <Button icon="human" onPress={formikProps.handleSubmit}>
+                  //   <Text>Submit</Text>
+                  // </Button>
+                )}
             </View>
           )}
         </Formik>

domains/DataCollection/Forms/SupplementaryForm/index.js

@@ -22,6 +22,7 @@ import vitalsConfig from './configs/vitals.config';
 
 import surveyingUserFailsafe from '../utils';
 import { addSelectTextInputs, vitalsBloodPressue } from './utils';
+import ErrorPicker from '../../../../components/FormikFields/ErrorPicker';
 
 const SupplementaryForm = ({
   navigation, selectedForm, setSelectedForm, surveyee, surveyingUser, surveyingOrganization,
@@ -112,17 +113,23 @@ const SupplementaryForm = ({
             </View>
           ))}
 
+          <ErrorPicker
+            // data={result}
+            formikProps={formikProps}
+            inputs={config.fields}
+          />
+
           {formikProps.isSubmitting ? (
             <ActivityIndicator />
           ) : (
-            <Button
-              disabled={!surveyee.objectId}
-              onPress={formikProps.handleSubmit}
-            >
-              {surveyee.objectId && <Text>{I18n.t('global.submit')}</Text>}
-              {!surveyee.objectId && <Text>{I18n.t('supplementaryForms.attachResident')}</Text>}
-            </Button>
-          )}
+              <Button
+                disabled={!surveyee.objectId}
+                onPress={formikProps.handleSubmit}
+              >
+                {surveyee.objectId && <Text>{I18n.t('global.submit')}</Text>}
+                {!surveyee.objectId && <Text>{I18n.t('supplementaryForms.attachResident')}</Text>}
+              </Button>
+            )}
         </View>
       )}
     </Formik>