fix: loading icon on submit

hopetambala · Jan 29, 2021 · cc67451 · cc67451
1 parent 78953f8
commit cc67451
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 27 deletions.
diff --git a/domains/DataCollection/Forms/IdentificationForm/index.js b/domains/DataCollection/Forms/IdentificationForm/index.js
@@ -7,7 +7,7 @@ import { Formik } from 'formik';
 
 import { postIdentificationForm } from '../../../../modules/cached-resources';
 import { isEmpty } from '../../../../modules/utils';
-import { layout } from '../../../../modules/theme';
+import { layout, theme } from '../../../../modules/theme';
 import I18n from '../../../../modules/i18n';
 
 import PaperButton from '../../../../components/Button';
@@ -38,6 +38,7 @@ const IdentificationForm = ({
   const [inputs, setInputs] = useState({});
   const [photoFile, setPhotoFile] = useState('State Photo String');
   const [validationSchema, setValidationSchema] = useState();
+  const [submitting, setSubmitting] = useState(false)
 
   useEffect(() => {
     setInputs(configArray);
@@ -48,7 +49,8 @@ const IdentificationForm = ({
       <TouchableWithoutFeedback onPress={Keyboard.dismiss()} accessible={false}>
         <Formik
           initialValues={{}}
-          onSubmit={async (values, actions) => {
+          onSubmit={async (values) => {
+            setSubmitting(true)
             setPhotoFile('Submitted Photo String');
 
             const formObject = values;
@@ -69,7 +71,7 @@ const IdentificationForm = ({
             const submitAction = () => {
               setTimeout(() => {
                 setSelectedForm('');
-                actions.setSubmitting(false);
+                setSubmitting(false)
               }, 1000);
             };
 
@@ -110,17 +112,20 @@ const IdentificationForm = ({
                 formikProps={formikProps}
                 inputs={inputs}
               />
-              {formikProps.isSubmitting ? (
-                <ActivityIndicator />
-              ) : (
-                <PaperButton
-                  onPressEvent={formikProps.handleSubmit}
-                  buttonText={I18n.t('global.submit')}
+              {submitting ? (
+                <ActivityIndicator
+                  size="large"
+                  color={theme.colors.primary}
                 />
-              // <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>

diff --git a/domains/DataCollection/Forms/SupplementaryForm/index.js b/domains/DataCollection/Forms/SupplementaryForm/index.js
@@ -9,7 +9,7 @@ import { Formik } from 'formik';
 
 import { postSupplementaryForm } from '../../../../modules/cached-resources';
 
-import { layout } from '../../../../modules/theme';
+import { layout, theme } from '../../../../modules/theme';
 import I18n from '../../../../modules/i18n';
 import { isEmpty } from '../../../../modules/utils';
 
@@ -31,6 +31,7 @@ const SupplementaryForm = ({
   const [config, setConfig] = useState({});
   const [photoFile, setPhotoFile] = useState('State Photo String');
   const [validationSchema, setValidationSchema] = useState();
+  const [submitting, setSubmitting] = useState(false)
 
   const toRoot = () => {
     navigation.navigate('Root');
@@ -55,7 +56,8 @@ const SupplementaryForm = ({
   return (
     <Formik
       initialValues={{}}
-      onSubmit={async (values, actions) => {
+      onSubmit={async (values) => {
+        setSubmitting(true);
         setPhotoFile('Submitted Photo String');
 
         const formObject = values;
@@ -93,11 +95,15 @@ const SupplementaryForm = ({
           };
         }
 
-        postSupplementaryForm(postParams).then(() => {
+        const submitAction = () => {
           setTimeout(() => {
-            actions.setSubmitting(false);
+            setSubmitting(false);
             toRoot();
           }, 1000);
+        };
+
+        postSupplementaryForm(postParams).then(() => {
+          submitAction();
         });
       }}
       validationSchema={validationSchema}
@@ -123,17 +129,20 @@ const SupplementaryForm = ({
             inputs={config.fields}
           />
 
-          {formikProps.isSubmitting ? (
-            <ActivityIndicator />
+          {submitting ? (
+            <ActivityIndicator
+              size="large"
+              color={theme.colors.primary}
+            />
           ) : (
-            <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>