l-min-components 1.7.1585 → 1.7.1586

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.7.1585",
+  "version": "1.7.1586",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/reportsComponents/hooks/useRreportUtils.jsx

@@ -721,6 +721,24 @@ const getQuestionInfo = (question) => {
 
   return { type, data: question };
 };
+const quizWrittenSelectedModel = (response, aiData) => {
+  if (!response || !aiData) return null;
+  const index = response?.index || 0;
+  const objectData = {};
+
+  if (aiData?.grammar?.[index] && aiData?.grammar?.length) {
+    const findData = aiData?.grammar?.[index];
+    objectData["grammar"] = [findData];
+  }
+  if (
+    aiData?.comprehension?.length &&
+    aiData?.comprehension?.[0] &&
+    index === 0
+  ) {
+    objectData["comprehension"] = aiData?.comprehension;
+  }
+  return objectData;
+};
 
 const useReportUtils = () => {
   return {
@@ -741,6 +759,7 @@ const useReportUtils = () => {
     grammarFindOperation,
     toRGBA,
     getQuestionInfo,
+    quizWrittenSelectedModel,
   };
 };
 

package/src/components/reportsComponents/reportQuestions/questions/quizNewWritten.jsx

@@ -1,54 +1,92 @@
-import React, { useState } from "react";
-import { QuestionSection } from "../style";
-import Tabs from "../components/tabs";
-import useReportUtils from "../../hooks/useRreportUtils";
-import Response from "../components/response";
-import QuestionDropdown from "../components/questionDropdown";
+import React, { useEffect, useState } from "react";
+import {
+  QuestionSection,
+  QuestionSectionAction,
+  QuestionSectionWithAnalysis,
+} from "../style.jsx";
+import Tabs from "../components/tabs.jsx";
+import useReportUtils from "../../hooks/useRreportUtils.jsx";
+import Response from "../components/response.jsx";
+import AnalysisButton from "../components/analysisButton.jsx";
+import QuestionDropdown from "../components/questionDropdown.jsx";
+import QuizQuestion from "../components/quizQuestion.jsx";
 
-const QuizNewWritten = ({
+import useTranslation from "../../../../hooks/useTranslation.jsx";
+import wordStore from "../../../../mc/wordStore.json";
+const QuizWritten = ({
   data,
   aiData,
+  setToggle,
   answerData,
   isPersonal,
   defaultSelected = 1,
 }) => {
+  const { findText } = useTranslation(wordStore);
   const [selected, setSelected] = useState(defaultSelected);
-  const { quizResponses } = useReportUtils();
+  const [analysis, setAnalysis] = useState(null);
+  const { quizResponses, setupAnalysis, quizWrittenSelectedModel } =
+    useReportUtils();
   const quizList = quizResponses({
     responses: answerData?.answer?.data?.data?.responses,
     type: "written",
   });
+
   const selectionList = quizList?.map((item) => ({
     value: item?.key,
     label: `Reponses ${item?.key}`,
   }));
   const selectedResponse =
     quizList?.find((item) => item?.key === selected) || {};
+
+  const selectedModel = quizWrittenSelectedModel(selectedResponse, aiData);
+
+  useEffect(() => {
+    if (selectedResponse) {
+      const models = setupAnalysis(selectedModel, null, data?.ai_score);
+      setAnalysis(models);
+    }
+  }, [selectedResponse?.key]);
   return (
-    <>
-      <QuestionSection>
-        <Tabs
-          options={selectionList}
-          selected={selected}
-          onChange={setSelected}
-        />
+    <QuestionSection>
+      <Tabs
+        options={selectionList}
+        selected={selected}
+        onChange={setSelected}
+      />
+      <QuestionDropdown>
+        <>
+          <li>
+            <h3>{findText("Instruction")}</h3>
+            <p>{data?.question_data?.instruction}</p>
+          </li>
+          <li>
+            <QuizQuestion data={data} />
+          </li>
+          <li>
+            <h3>{findText("Question")}</h3>
+            <p>{data?.question_data?.question_data?.question}</p>
+          </li>
+        </>
+      </QuestionDropdown>
 
-        <QuestionDropdown>
-          <>
-            <li>
-              <h3>{"Instruction"}</h3>
-              <p>{data?.question_data?.instruction}</p>
-            </li>
-            <li>
-              <h3>{"Essay topic"}</h3>
-              <p>{data?.question_data?.question_title}</p>
-            </li>
-          </>
-        </QuestionDropdown>
-        <Response response={selectedResponse?.text} isPersonal={isPersonal} />
-      </QuestionSection>
-    </>
+      <Response response={selectedResponse?.text} isPersonal={isPersonal} />
+
+      <QuestionSectionWithAnalysis>
+        <QuestionSectionAction>
+          {analysis?.models?.length > 0 && (
+            <AnalysisButton
+              disabled={!(analysis?.models?.length > 0)}
+              onClick={() => {
+                setToggle({
+                  ...analysis,
+                  defaultSelected: selected,
+                });
+              }}
+            />
+          )}
+        </QuestionSectionAction>
+      </QuestionSectionWithAnalysis>
+    </QuestionSection>
   );
 };
-
-export default QuizNewWritten;
+export default QuizWritten;