Merge pull request #86 from indec-it/fix/cleanSubQuestions

fix(useSubQuestions): clean sub questions

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indec/form-builder",
-  "version": "2.4.6",
+  "version": "2.4.7",
   "description": "Form builder",
   "main": "index.js",
   "private": false,

src/components/SubQuestions/SubQuestions.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import {Field} from 'formik';
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 
 import useSubQuestions from '@/hooks/useSubQuestions';
 import subQuestionPropTypes from '@/utils/propTypes/subQuestion';
@@ -10,24 +11,25 @@ import getQuestionProps from '@/utils/getQuestionProps';
 
 function SubQuestions({values, subQuestions, name, ...props}) {
   const parentName = name.split('.')[2];
-  const {selectedQuestions} = useSubQuestions({subQuestions, value: {[parentName]: values}, name: parentName});
-  return (
-    <>
+  const {selectedQuestions} = useSubQuestions({
+    subQuestions, value: {[parentName]: values}, name: parentName, specificationsPathName: name
+  });
+  return selectedQuestions.length > 0 ? (
+    <Stack spacing={2} sx={{width: '100%'}}>
       {selectedQuestions.map(subQuestion => (
-        <Box key={subQuestion.id} mb={2}>
+        <Box key={subQuestion.id}>
           <Field
             {...getQuestionProps({question: subQuestion, name, values}).props}
             {...props}
             component={getQuestionComponent(subQuestion.type)}
             name={`${name}.${subQuestion.name}.answer.value`}
             label={{text: subQuestion.label}}
             placeholder={subQuestion.placeholder}
-            sx={{minWidth: '300px'}}
           />
         </Box>
       ))}
-    </>
-  );
+    </Stack>
+  ) : null;
 }
 
 SubQuestions.propTypes = {

src/hooks/__tests__/useSubQuestions.test.js

@@ -2,6 +2,12 @@ import {renderHook} from '@testing-library/react';
 
 import useSubQuestions from '../useSubQuestions';
 
+jest.mock('formik', () => ({
+  useFormikContext: jest.fn().mockReturnValue({
+    setFieldValue: jest.fn()
+  })
+}));
+
 const subQuestions = [
   {
     id: 1,

src/hooks/useSubQuestions.js

@@ -1,19 +1,37 @@
 import {useEffect, useState} from 'react';
+import {useFormikContext} from 'formik';
 
+import {getSubQuestions} from '@/utils/buildQuestions';
 import getNavigation from '@/utils/getNavigation';
 
-const useSubQuestions = ({subQuestions, value, name}) => {
+const useSubQuestions = ({subQuestions, value, name, specificationsPathName}) => {
   const [selectedQuestions, setSelectedSubQuestions] = useState([]);
+  const {setFieldValue} = useFormikContext();
+
   useEffect(() => {
-    const subQuestionsFiltered = subQuestions.filter(
+    const allSubQuestions = subQuestions.map(
       subQuestion => {
         const condition = getNavigation({
           navigation: subQuestion.navigation, answers: value, questionType: subQuestion.type
         });
-        return !condition;
+        return {...subQuestion, show: !condition};
       }
     );
-    setSelectedSubQuestions(subQuestionsFiltered);
+    const hiddenSubQuestions = allSubQuestions.filter(subQuestion => !subQuestion.show);
+    const showSubQuestions = allSubQuestions.filter(subQuestion => subQuestion.show);
+    if (hiddenSubQuestions.length > 0) {
+      setFieldValue(
+        specificationsPathName,
+        {...value?.[name]?.answer?.specifications, ...getSubQuestions(hiddenSubQuestions)}
+      );
+    }
+    if (showSubQuestions.length > 0) {
+      showSubQuestions.forEach(subQuestion => {
+        // eslint-disable-next-line no-param-reassign
+        delete subQuestion.show;
+      });
+      setSelectedSubQuestions(showSubQuestions);
+    }
   }, [value?.[name]?.answer?.value]);
 
   return {selectedQuestions};