From 1e8e81f9801a6f11d1ed22183a471b13e1fc1784 Mon Sep 17 00:00:00 2001
From: Maximiliano forlenza <forlenzamaximiliano@gmail.com>
Date: Sat, 23 Sep 2023 15:22:49 -0300
Subject: [PATCH] fix(questionBuilder): remove function component

---
 package.json                                  |  2 +-
 .../QuestionBuilder/Question/Question.js      | 62 +++++++++++++++++++
 .../QuestionBuilder/Question/index.js         |  3 +
 .../QuestionBuilder/QuestionBuilder.js        | 52 +++-------------
 4 files changed, 75 insertions(+), 44 deletions(-)
 create mode 100644 src/components/QuestionBuilder/Question/Question.js
 create mode 100644 src/components/QuestionBuilder/Question/index.js

diff --git a/package.json b/package.json
index 1bfb5ed..2f944ba 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@indec/form-builder",
-  "version": "2.4.5",
+  "version": "2.4.6",
   "description": "Form builder",
   "main": "index.js",
   "private": false,
diff --git a/src/components/QuestionBuilder/Question/Question.js b/src/components/QuestionBuilder/Question/Question.js
new file mode 100644
index 0000000..bb850d9
--- /dev/null
+++ b/src/components/QuestionBuilder/Question/Question.js
@@ -0,0 +1,62 @@
+import {useEffect} from 'react';
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
+import {useFormikContext} from 'formik';
+
+import sectionPropTypes from '@/utils/propTypes/section';
+import buildQuestions from '@/utils/buildQuestions';
+import getQuestionProps from '@/utils/getQuestionProps';
+import getQuestionComponent from '@/utils/getQuestionComponent';
+
+import Wrapper from '../Wrapper';
+
+function Question({
+  section,
+  sectionIndex,
+  questionIndex,
+  disabled,
+  warnings,
+  values
+}) {
+  const question = section.questions[questionIndex];
+  if (!question) {
+    return null;
+  }
+  const {setFieldValue} = useFormikContext();
+  const {
+    props, questionName, jump, questionType
+  } = getQuestionProps({sectionIndex, section, question, values, disabled, warnings});
+  let shouldClean = false;
+  if (!!jump?.action && !shouldClean) {
+    shouldClean = true;
+  }
+
+  useEffect(() => {
+    if (shouldClean) {
+      const defaultAnswerValue = buildQuestions(section)[section.name][0][question.name].answer;
+      setFieldValue(questionName, defaultAnswerValue);
+      shouldClean = false;
+    }
+  }, [shouldClean, questionName]);
+
+  const Component = getQuestionComponent(questionType);
+  return Component
+    ? <Wrapper component={Component} {...props} />
+    : <Typography>Invalid component.</Typography>;
+}
+
+Question.propTypes = {
+  section: sectionPropTypes.isRequired,
+  disabled: PropTypes.bool,
+  values: PropTypes.shape({}).isRequired,
+  sectionIndex: PropTypes.number.isRequired,
+  questionIndex: PropTypes.number.isRequired,
+  warnings: PropTypes.shape({})
+};
+
+Question.defaultProps = {
+  disabled: false,
+  warnings: {}
+};
+
+export default Question;
diff --git a/src/components/QuestionBuilder/Question/index.js b/src/components/QuestionBuilder/Question/index.js
new file mode 100644
index 0000000..88bd56f
--- /dev/null
+++ b/src/components/QuestionBuilder/Question/index.js
@@ -0,0 +1,3 @@
+import Question from './Question';
+
+export default Question;
diff --git a/src/components/QuestionBuilder/QuestionBuilder.js b/src/components/QuestionBuilder/QuestionBuilder.js
index 3575923..bd0a578 100644
--- a/src/components/QuestionBuilder/QuestionBuilder.js
+++ b/src/components/QuestionBuilder/QuestionBuilder.js
@@ -1,57 +1,23 @@
-import {useEffect} from 'react';
 import PropTypes from 'prop-types';
 import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
-import {useFormikContext} from 'formik';
 
 import sectionPropTypes from '@/utils/propTypes/section';
-import buildQuestions from '@/utils/buildQuestions';
-import getQuestionProps from '@/utils/getQuestionProps';
-import getQuestionComponent from '@/utils/getQuestionComponent';
 
-import Wrapper from './Wrapper';
-
-const getComponent = (
-  section,
-  sectionIndex,
-  questionIndex,
-  disabled,
-  warnings,
-  values
-) => {
-  const question = section.questions[questionIndex];
-  if (!question) {
-    return null;
-  }
-  const {setFieldValue} = useFormikContext();
-  const {
-    props, questionName, jump, questionType
-  } = getQuestionProps({sectionIndex, section, question, values, disabled, warnings});
-  let shouldClean = false;
-  if (!!jump?.action && !shouldClean) {
-    shouldClean = true;
-  }
-
-  useEffect(() => {
-    if (shouldClean) {
-      const defaultAnswerValue = buildQuestions(section)[section.name][0][question.name].answer;
-      setFieldValue(questionName, defaultAnswerValue);
-      shouldClean = false;
-    }
-  }, [shouldClean, questionName]);
-
-  const Component = getQuestionComponent(questionType);
-  return Component
-    ? <Wrapper component={Component} {...props} />
-    : <Typography>Invalid component.</Typography>;
-};
+import Question from './Question';
 
 function QuestionBuilder({values, section, index, disabled, warnings}) {
   return (
     <Grid data-testid="question-builder">
       {Object.values(values).map((value, valueIndex) => value.id && (
         <Grid item key={value.id} mb={2}>
-          {getComponent(section, index, valueIndex - 1, disabled, warnings, values)}
+          <Question
+            section={section}
+            sectionIndex={index}
+            questionIndex={valueIndex - 1}
+            disabled={disabled}
+            warnings={warnings}
+            values={values}
+          />
         </Grid>
       ))}
     </Grid>