ENCOA-228 Now when user navigates between modules the generation items persist. Reading, listening and writing added to level module

src/components/ExamEditor/Exercises/Writing/index.tsx

@@ -2,67 +2,88 @@ import { useCallback, useEffect, useState } from "react";
 import useExamEditorStore from "@/stores/examEditor";
 import ExamEditorStore, { ModuleState } from "@/stores/examEditor/types";
 import AutoExpandingTextArea from "@/components/Low/AutoExpandingTextarea";
-import { WritingExercise } from "@/interfaces/exam";
+import { LevelPart, WritingExercise } from "@/interfaces/exam";
 import Header from "../../Shared/Header";
 import Alert, { AlertItem } from "../Shared/Alert";
 import clsx from "clsx";
 import useSectionEdit from "../../Hooks/useSectionEdit";
 import GenLoader from "../Shared/GenLoader";
 import setEditingAlert from "../Shared/setEditingAlert";
+import { Module } from "@/interfaces";
 
 interface Props {
     sectionId: number;
     exercise: WritingExercise;
+    module: Module;
+    index?: number;
 }
 
-const Writing: React.FC<Props> = ({ sectionId, exercise }) => {
+const Writing: React.FC<Props> = ({ sectionId, exercise, module, index }) => {
     const { currentModule, dispatch } = useExamEditorStore();
-    const { edit } = useExamEditorStore((store) => store.modules[currentModule]);
     const { generating, genResult, state } = useExamEditorStore(
         (state) => state.modules[currentModule].sections.find((section) => section.sectionId === sectionId)!
     );
-    
+
     const [local, setLocal] = useState(exercise);
     const [prompt, setPrompt] = useState(exercise.prompt);
     const [loading, setLoading] = useState(generating && generating == "exercises");
     const [alerts, setAlerts] = useState<AlertItem[]>([]);
 
-    const updateModule = useCallback((updates: Partial<ModuleState>) => {
-        dispatch({ type: 'UPDATE_MODULE', payload: { updates } });
-    }, [dispatch]);
+    const level = module === "level";
 
-    const { editing, handleSave, handleDiscard, modeHandle, setEditing } = useSectionEdit({
+    const { editing, handleSave, handleDiscard, handleDelete, handlePractice, handleEdit, setEditing } = useSectionEdit({
         sectionId,
         onSave: () => {
             const newExercise = { ...local } as WritingExercise;
             newExercise.prompt = prompt;
             setAlerts([]);
             setEditing(false);
-            dispatch({ type: "UPDATE_SECTION_STATE", payload: { sectionId: sectionId, update: newExercise } });
+            if (!level) {
+                dispatch({ type: "UPDATE_SECTION_STATE", payload: { sectionId: sectionId, update: newExercise, module } });
+            }
+            if (genResult) {
+                dispatch({ type: "UPDATE_SECTION_SINGLE_FIELD", payload: { sectionId, module: currentModule, field: "genResult", value: undefined } })
+            }
         },
         onDiscard: () => {
             setEditing(false);
             setLocal(exercise);
             setPrompt(exercise.prompt);
         },
+        onDelete: () => {
+            if (level) {
+                dispatch({
+                    type: "UPDATE_SECTION_STATE", payload: {
+                        sectionId: sectionId,
+                        update: {
+                            exercises: (state as LevelPart).exercises.filter((_, i) => i !== index)
+                        },
+                        module
+                    }
+                });
+            }
+        },
+        onEdit: ()=> {},
+        onPractice: () => {
+            const newState = { 
+                ...state, 
+               //isPractice: !isPractice,
+            };
+            dispatch({ type: 'UPDATE_SECTION_STATE', payload: { sectionId, update: newState, module: currentModule } });
+        }
     });
 
     useEffect(() => {
-        const loading = generating && generating == "context";
+        const loading = generating && generating == "writing";
         setLoading(loading);
-
-        if (loading) {
-            updateModule({ edit: Array.from(new Set(edit).add(sectionId)) });
-        }
-
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [generating, updateModule]);
+    }, [generating]);
 
     useEffect(() => {
-        if (genResult !== undefined && generating === "context") {
+        if (genResult) {
             setEditing(true);
-            setPrompt(genResult[0].prompt);
-            dispatch({ type: "UPDATE_SECTION_SINGLE_FIELD", payload: { sectionId, module: currentModule, field: "genResult", value: undefined } })
+            setPrompt(genResult.result[0].prompt);
+            dispatch({ type: "UPDATE_SECTION_SINGLE_FIELD", payload: { sectionId, module: currentModule, field: "generating", value: undefined } })
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [genResult, dispatch, sectionId, setEditing, currentModule]);
@@ -73,20 +94,22 @@ const Writing: React.FC<Props> = ({ sectionId, exercise }) => {
 
     return (
         <>
-            <div className='relative pb-4'>
+            <div className={clsx('relative', level ? "px-4 mt-2" : "pb-2")}>
                 <Header
-                    title={`Task ${sectionId} Instructions`}
+                    title={`${sectionId === 1 ? "Letter" : "Essay"} Instructions`}
                     description='Generate or edit the instructions for the task'
                     editing={editing}
                     handleSave={handleSave}
-                    modeHandle={modeHandle}
+                    handleDelete={handleDelete}
+                    handleEdit={handleEdit}
                     handleDiscard={handleDiscard}
-                    mode="edit"
+                    handlePractice={handlePractice}
+                    isEvaluationEnabled={true}
                     module={"writing"}
                 />
                 {alerts.length !== 0 && <Alert alerts={alerts} />}
             </div>
-            <div className="mt-4">
+            <div className={clsx(level ? "mt-2 px-4" : "mt-4")}>
                 {loading ?
                     <GenLoader module={currentModule} /> :
                     (