ENCOA-311

src/components/ExamEditor/Exercises/Speaking/InteractiveSpeaking.tsx

@@ -5,10 +5,10 @@ import { AiOutlineUnorderedList, AiOutlinePlus, AiOutlineDelete } from 'react-ic
 import { Tooltip } from "react-tooltip";
 import Header from "../../Shared/Header";
 import GenLoader from "../Shared/GenLoader";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import useSectionEdit from "../../Hooks/useSectionEdit";
 import useExamEditorStore from "@/stores/examEditor";
-import { InteractiveSpeakingExercise, LevelPart } from "@/interfaces/exam";
+import { Difficulty, InteractiveSpeakingExercise, LevelPart } from "@/interfaces/exam";
 import { BsFileText } from "react-icons/bs";
 import { FaChevronLeft, FaChevronRight } from "react-icons/fa6";
 import { RiVideoLine } from "react-icons/ri";
@@ -21,7 +21,8 @@ interface Props {
 }
 
 const InteractiveSpeaking: React.FC<Props> = ({ sectionId, exercise, module = "speaking" }) => {
-    const { dispatch } = useExamEditorStore();
+    const { currentModule, dispatch } = useExamEditorStore();
+    const difficulty = useExamEditorStore((state) => state.modules[currentModule].difficulty);
     const [local, setLocal] = useState(exercise);
     const [currentVideoIndex, setCurrentVideoIndex] = useState(0);
 
@@ -105,13 +106,17 @@ const InteractiveSpeaking: React.FC<Props> = ({ sectionId, exercise, module = "s
 
     useEffect(() => {
         if (genResult && generating === "speakingScript") {
+            if (!difficulty.includes(genResult.result[0].difficulty)) {
+                dispatch({ type: 'UPDATE_MODULE', payload: { updates: { difficulty: [...difficulty, genResult.result[0].difficulty]} } });
+            }
             const updatedLocal = {
                 ...local,
                 title: genResult.result[0].title,
                 prompts: genResult.result[0].prompts.map((item: any) => ({
                     text: item || "",
                     video_url: ""
-                }))
+                })),
+                difficulty: genResult.result[0].difficulty
             };
             setEditing(true);
             setLocal(updatedLocal);
@@ -158,13 +163,17 @@ const InteractiveSpeaking: React.FC<Props> = ({ sectionId, exercise, module = "s
         const isGenerating = levelGenerating?.includes(`${local.id}-speakingScript`);
 
         if (speakingScript && isGenerating) {
+            if (!difficulty.includes(speakingScript.result[0].difficulty)) {
+                dispatch({ type: 'UPDATE_MODULE', payload: { updates: { difficulty: [...difficulty, speakingScript.result[0].difficulty]} } });
+            }
             const updatedLocal = {
                 ...local,
                 title: speakingScript.result[0].title,
                 prompts: speakingScript.result[0].prompts.map((item: any) => ({
                     text: item || "",
                     video_url: ""
-                }))
+                })),
+                difficulty: speakingScript.result[0].difficulty
             };
             setEditing(true);
             setLocal(updatedLocal);
@@ -264,6 +273,21 @@ const InteractiveSpeaking: React.FC<Props> = ({ sectionId, exercise, module = "s
         );
     };
 
+    const saveDifficulty = useCallback((diff: Difficulty)=> {
+        if (!difficulty.includes(diff)) {
+            dispatch({ type: 'UPDATE_MODULE', payload: { updates: { difficulty: [...difficulty, diff]} } });
+        }
+        if (module !== "level") {
+            const updatedExercise = { ...exercise, difficulty: diff };
+            dispatch({ type: 'UPDATE_SECTION_STATE', payload: { sectionId, update: updatedExercise, module: currentModule } });
+        } else {
+            const updatedExercise = { ...exercise, difficulty: diff };
+            const newState = { ...state as LevelPart };
+            newState.exercises = (newState as LevelPart).exercises.map((ex) => ex.id === exercise.id ? updatedExercise : ex );
+            dispatch({ type: 'UPDATE_SECTION_STATE', payload: { sectionId, update: newState, module: currentModule } });
+        }
+    }, [currentModule, difficulty, dispatch, exercise, module, sectionId, state]);
+
     return (
         <>
             <div className='relative pb-4'>
@@ -271,6 +295,8 @@ const InteractiveSpeaking: React.FC<Props> = ({ sectionId, exercise, module = "s
                     title={`Interactive Speaking Script`}
                     description='Generate or write the scripts for the videos.'
                     editing={editing}
+                    difficulty={exercise.difficulty}
+                    saveDifficulty={saveDifficulty}
                     handleSave={handleSave}
                     handleEdit={handleEdit}
                     handleDiscard={handleDiscard}