fix: dependency cycle in looper resolved

hopetambala · Sep 9, 2021 · 906bc1e · 906bc1e
1 parent 5a70b9d
commit 906bc1e
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 85 deletions.
diff --git a/components/FormikFields/PaperInputPicker/Looper/index.js b/components/FormikFields/PaperInputPicker/Looper/index.js
@@ -1,29 +1,13 @@
-import _ from 'lodash';
-import * as React from 'react';
 import { useEffect } from 'react/cjs/react.development';
-import {
-  View
-} from 'react-native';
-import {
-  Button
-} from 'react-native-paper';
-
-import I18n from '../../../../modules/i18n';
-import PaperInputPicker from '..';
 
 const Looper = ({
-  data, formikProps, scrollViewScroll, setScrollViewScroll, surveyingOrganization,
-  customForm, config, loopsAdded, setLoopsAdded,
+  data, config, numberedQestions,
+  setNumberedQuestions,
+  setQuestionsToRepeat,
 }) => {
   const {
-    label, formikKey, fieldType, numberQuestionsToRepeat
+    formikKey, fieldType, numberQuestionsToRepeat
   } = data;
-
-  const [numberedQestions, setNumberedQuestions] = React.useState({});
-  const [questionsToRepeat, setQuestionsToRepeat] = React.useState([]);
-  const [additionalQuestions, setAdditionalQuestions] = React.useState([]);
-  const [individualLoopsAdded, setIndividualLoopsAdded] = React.useState(0);
-
   useEffect(() => {
     if (fieldType === 'loop') {
       numberQuestionsInConfig();
@@ -61,59 +45,7 @@ const Looper = ({
     });
   };
 
-  // add another loop of questions in correct position in form (additionalQuestions)
-  // update number of loops added (+1)
-  const addLoop = () => {
-    // updated formikKey to ensure uniqueness
-    let updatedQuestions = [];
-    questionsToRepeat.forEach((question) => {
-      const updatedQuestion = _.cloneDeep(question);
-      updatedQuestion.formikKey = `${updatedQuestion.formikKey}__loop${individualLoopsAdded}`;
-      updatedQuestions = updatedQuestions.concat(updatedQuestion);
-    });
-
-    setAdditionalQuestions(additionalQuestions.concat(updatedQuestions));
-    setLoopsAdded(loopsAdded + 1);
-    setIndividualLoopsAdded(individualLoopsAdded + 1);
-  };
-
-  const removeLoop = () => {
-    setLoopsAdded(loopsAdded - 1);
-    setIndividualLoopsAdded(individualLoopsAdded - 1);
-    setAdditionalQuestions(additionalQuestions.slice(0,
-      additionalQuestions.length - numberQuestionsToRepeat));
-  };
-
-  const translatedLabel = customForm ? label : I18n.t(label);
-
-  return (
-    <View key={formikKey}>
-      {additionalQuestions !== undefined && additionalQuestions.length !== 0
-            && additionalQuestions.map((question) => (
-              <PaperInputPicker
-                data={question}
-                formikProps={formikProps}
-                customForm={customForm}
-                config={config}
-                loopsAdded={loopsAdded}
-                setLoopsAdded={setLoopsAdded}
-                surveyingOrganization={surveyingOrganization}
-                scrollViewScroll={scrollViewScroll}
-                setScrollViewScroll={setScrollViewScroll}
-              />
-            ))}
-      <Button onPress={() => addLoop()}>
-        {I18n.t('paperButton.addAdditional')}
-        {translatedLabel}
-      </Button>
-      {individualLoopsAdded !== 0 && (
-        <Button onPress={() => removeLoop()}>
-          {I18n.t('paperButton.removePrevious')}
-          {translatedLabel}
-        </Button>
-      )}
-    </View>
-  );
+  return null;
 };
 
 export default Looper;
diff --git a/components/FormikFields/PaperInputPicker/index.js b/components/FormikFields/PaperInputPicker/index.js
@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import { Spinner } from 'native-base';
 import * as React from 'react';
 import {
@@ -27,7 +28,7 @@ const PaperInputPicker = ({
   ...rest
 }) => {
   const {
-    label, formikKey, fieldType, sideLabel,
+    label, formikKey, fieldType, sideLabel, numberQuestionsToRepeat
   } = data;
 
   const {
@@ -64,6 +65,34 @@ const PaperInputPicker = ({
   const [pictureUris, setPictureUris] = React.useState({});
   const [image, setImage] = React.useState(null);
 
+  const [numberedQestions, setNumberedQuestions] = React.useState({});
+  const [questionsToRepeat, setQuestionsToRepeat] = React.useState([]);
+  const [additionalQuestions, setAdditionalQuestions] = React.useState([]);
+  const [individualLoopsAdded, setIndividualLoopsAdded] = React.useState(0);
+
+  // add another loop of questions in correct position in form (additionalQuestions)
+  // update number of loops added (+1)
+  const addLoop = () => {
+    // updated formikKey to ensure uniqueness
+    let updatedQuestions = [];
+    questionsToRepeat.forEach((question) => {
+      const updatedQuestion = _.cloneDeep(question);
+      updatedQuestion.formikKey = `${updatedQuestion.formikKey}__loop${individualLoopsAdded}`;
+      updatedQuestions = updatedQuestions.concat(updatedQuestion);
+    });
+
+    setAdditionalQuestions(additionalQuestions.concat(updatedQuestions));
+    setLoopsAdded(loopsAdded + 1);
+    setIndividualLoopsAdded(individualLoopsAdded + 1);
+  };
+
+  const removeLoop = () => {
+    setLoopsAdded(loopsAdded - 1);
+    setIndividualLoopsAdded(individualLoopsAdded - 1);
+    setAdditionalQuestions(additionalQuestions.slice(0,
+      additionalQuestions.length - numberQuestionsToRepeat));
+  };
+
   return (
     <>
       {fieldType === 'input' && (
@@ -505,17 +534,46 @@ const PaperInputPicker = ({
         </View>
       )}
       {fieldType === 'loop' && (
-        <Looper
-          data={data}
-          formikProps={formikProps}
-          customForm={customForm}
-          config={config}
-          loopsAdded={loopsAdded}
-          setLoopsAdded={setLoopsAdded}
-          scrollViewScroll={scrollViewScroll}
-          setScrollViewScroll={setScrollViewScroll}
-          surveyingOrganization={surveyingOrganization}
-        />
+        <View>
+          <Looper
+            data={data}
+            config={config}
+            numberedQestions={numberedQestions}
+            setNumberedQuestions={setNumberedQuestions}
+            questionsToRepeat={questionsToRepeat}
+            setQuestionsToRepeat={setQuestionsToRepeat}
+            additionalQuestions={additionalQuestions}
+            setAdditionalQuestions={setAdditionalQuestions}
+            individualLoopsAdded={individualLoopsAdded}
+            setIndividualLoopsAdded={setIndividualLoopsAdded}
+          />
+          <View key={formikKey}>
+            {additionalQuestions !== undefined && additionalQuestions.length !== 0
+              && additionalQuestions.map((question) => (
+                <PaperInputPicker
+                  data={question}
+                  formikProps={formikProps}
+                  customForm={customForm}
+                  config={config}
+                  loopsAdded={loopsAdded}
+                  setLoopsAdded={setLoopsAdded}
+                  surveyingOrganization={surveyingOrganization}
+                  scrollViewScroll={scrollViewScroll}
+                  setScrollViewScroll={setScrollViewScroll}
+                />
+              ))}
+            <Button onPress={() => addLoop()}>
+              {I18n.t('paperButton.addAdditional')}
+              {translatedLabel}
+            </Button>
+            {individualLoopsAdded !== 0 && (
+            <Button onPress={() => removeLoop()}>
+              {I18n.t('paperButton.removePrevious')}
+              {translatedLabel}
+            </Button>
+            )}
+          </View>
+        </View>
       )}
     </>
   );