[#47] Create questions stats component

src/components/QuestionSetting.jsx

@@ -14,6 +14,7 @@ import {
   SettingAutofield,
 } from './question-type';
 import QuestionHint from './QuestionHint';
+import QuestionStats from './QuestionStats';
 import { map, groupBy, orderBy, isEmpty } from 'lodash';
 import { AiOutlineQuestionCircle } from 'react-icons/ai';
 
@@ -299,7 +300,9 @@ const QuestionSetting = ({ question, dependant }) => {
           </Col>
         )}
       </Row>
+      {/* Question Hint */}
       {showHintSetting && <QuestionHint {...question} />}
+      {/* Question Type Setting */}
       {qType === questionType.input && <SettingInput {...question} />}
       {qType === questionType.number && <SettingNumber {...question} />}
       {[questionType.option, questionType.multiple_option].includes(qType) && (
@@ -311,6 +314,8 @@ const QuestionSetting = ({ question, dependant }) => {
       {qType === questionType.table && <SettingTable {...question} />}
       {qType === questionType.image && <SettingImage {...question} />}
       {qType === questionType.autofield && <SettingAutofield {...question} />}
+      {/* Question Stats  */}
+      <QuestionStats {...question} />
     </div>
   );
 };

src/components/QuestionStats.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import styles from '../styles.module.css';
+import { Form, Input } from 'antd';
+import { UIStore, questionGroupFn } from '../lib/store';
+
+const urlRegex = /^(https?):\/\/[^\s/$.?#].[^\s]*$/i;
+
+const QuestionStats = ({ id, questionGroupId, dataApiUrl = null }) => {
+  const namePreffix = `question-${id}`;
+  const { UIText } = UIStore.useState((s) => s);
+
+  const updateState = (name, value) => {
+    questionGroupFn.store.update((s) => {
+      s.questionGroups = s.questionGroups.map((qg) => {
+        if (qg.id === questionGroupId) {
+          const questions = qg.questions.map((q) => {
+            if (q.id === id) {
+              return {
+                ...q,
+                [name]: value,
+              };
+            }
+            return q;
+          });
+          return {
+            ...qg,
+            questions: questions,
+          };
+        }
+        return qg;
+      });
+    });
+  };
+
+  const handleChangeStatsEndpoint = (e) => {
+    const value = e?.target?.value;
+    updateState('dataApiUrl', value);
+  };
+
+  return (
+    <div>
+      <p className={styles['more-question-setting-text']}>
+        {UIText.questionStatsSettingTest}
+      </p>
+      <Form.Item
+        label={UIText.inputStatsUrlText}
+        name={`${namePreffix}-dataApiUrl`}
+        initialValue={dataApiUrl}
+        rules={[
+          {
+            pattern: urlRegex,
+            message: 'Invalid URL format',
+          },
+        ]}
+      >
+        <Input onChange={handleChangeStatsEndpoint} />
+      </Form.Item>
+    </div>
+  );
+};
+
+export default QuestionStats;

src/lib/i18n.js

@@ -94,6 +94,8 @@ const UIStaticText = {
     inputQuestionAutofieldMultiline: 'Support Multiline Function',
     inputQuestionAutofieldFnString: 'Add Function (String) Here',
     inputQuestionAutofieldFnColor: 'Add Function Color Here',
+    questionStatsSettingTest: 'Stats Setting',
+    inputStatsUrlText: 'Add Stats Endpoint Here',
   },
 };