Added Speaking to level, fixed a bug where it was causing level to crash if the listening was already created and the section was switched, added true false exercises to listening

src/components/ExamEditor/SettingsEditor/Shared/Generate.ts

@@ -37,7 +37,7 @@ export function generate(
 
         dispatch({
             type: "UPDATE_SECTION_SINGLE_FIELD",
-            payload: { sectionId : sectionId, module: level ? "level" : module, field: level ? "levelGenerating" : "generating", value: generatingUpdate }
+            payload: { sectionId, module: level ? "level" : module, field: level ? "levelGenerating" : "generating", value: generatingUpdate }
         });
     };
 
@@ -54,7 +54,7 @@ export function generate(
 
         dispatch({
             type: "UPDATE_SECTION_SINGLE_FIELD",
-            payload: { sectionId, module: level ? "level" : module, field: level ? "levelGenResults" : "genResult", value: genResults }
+            payload: { sectionId: level ? levelSectionId! : sectionId, module: level ? "level" : module, field: level ? "levelGenResults" : "genResult", value: genResults }
         });
     };
 

src/components/ExamEditor/SettingsEditor/Shared/GenerateBtn.tsx

@@ -12,16 +12,17 @@ interface Props {
     genType: Generating;
     generateFnc: (sectionId: number) => void
     className?: string;
-    levelId?: number;
     level?: boolean;
 }
 
-const GenerateBtn: React.FC<Props> = ({ module, sectionId, genType, generateFnc, className, level = false, levelId }) => {
-    const section = useExamEditorStore((store) => store.modules[level ? "level" : module].sections.find((s) => s.sectionId == levelId ? levelId : sectionId));
+const GenerateBtn: React.FC<Props> = ({ module, sectionId, genType, generateFnc, className, level = false }) => {
+    const section = useExamEditorStore((store) => store.modules[level ? "level" : module].sections.find((s) => s.sectionId == sectionId));
     const [loading, setLoading] = useState(false);
 
     const generating = section?.generating;
+    const genResult = section?.genResult;
     const levelGenerating = section?.levelGenerating;
+    const levelGenResults = section?.levelGenResults;
 
     useEffect(()=> {
         const gen = level ? levelGenerating?.find(g => g === genType) !== undefined : (generating !== undefined && generating === genType);
@@ -29,7 +30,7 @@ const GenerateBtn: React.FC<Props> = ({ module, sectionId, genType, generateFnc,
             setLoading(gen);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [generating, levelGenerating])
+    }, [generating, levelGenerating, levelGenResults, genResult])
 
     if (section === undefined) return <></>;
 
@@ -42,7 +43,7 @@ const GenerateBtn: React.FC<Props> = ({ module, sectionId, genType, generateFnc,
                 className
             )}
             disabled={loading}
-            onClick={loading ? () => { } : () => generateFnc(levelId ? levelId : sectionId)}
+            onClick={loading ? () => { } : () => generateFnc(sectionId)}
         >
             {loading ? (
                 <div key={`section-${sectionId}`} className="flex items-center justify-center">

src/components/ExamEditor/SettingsEditor/Shared/SectionPicker.tsx

@@ -3,6 +3,7 @@ import { Module } from "@/interfaces";
 import useExamEditorStore from "@/stores/examEditor";
 import Dropdown from "./SettingsDropdown";
 import { LevelSectionSettings } from "@/stores/examEditor/types";
+import { LevelPart } from '@/interfaces/exam';
 
 interface Props {
   module: Module;
@@ -19,13 +20,15 @@ const SectionPicker: React.FC<Props> = ({
 }) => {
   const { dispatch } = useExamEditorStore();
   const [selectedValue, setSelectedValue] = React.useState<number | undefined>(undefined);
-  
+
   const sectionState = useExamEditorStore(state =>
     state.modules["level"].sections.find((s) => s.sectionId === sectionId)
   );
-  
+
+  const state = sectionState?.state as LevelPart;
+
   if (sectionState === undefined) return null;
-  
+
   const { readingSection, listeningSection } = sectionState;
   const currentValue = selectedValue ?? (module === "reading" ? readingSection : listeningSection);
   const options = module === "reading" ? [1, 2, 3] : [1, 2, 3, 4];
@@ -34,16 +37,44 @@ const SectionPicker: React.FC<Props> = ({
   const handleSectionChange = (value: number) => {
     const newValue = currentValue === value ? undefined : value;
     setSelectedValue(newValue);
-    
+    let update = {};
+    if (module == "reading") {
+      update = {
+        text: undefined
+      }
+    } else {
+      if (state.audio?.source) {
+        URL.revokeObjectURL(state.audio.source)
+      }
+      update = {
+        audio: undefined,
+        script: undefined,
+      }
+    }
+
     dispatch({
-      type: "UPDATE_SECTION_SINGLE_FIELD",
+      type: "UPDATE_SECTION_STATE",
       payload: {
         sectionId,
         module: "level",
-        field: module === "reading" ? "readingSection" : "listeningSection",
-        value: newValue
+        update: {
+          ...state,
+          ...update
+        }
       }
-    });
+    })
+
+    setTimeout(() => {
+      dispatch({
+        type: "UPDATE_SECTION_SINGLE_FIELD",
+        payload: {
+          sectionId,
+          module: "level",
+          field: module === "reading" ? "readingSection" : "listeningSection",
+          value: newValue
+        }
+      });
+    }, 500);
   };
 
   const getTitle = () => {
@@ -69,7 +100,7 @@ const SectionPicker: React.FC<Props> = ({
             className={`
               flex items-center space-x-3 font-semibold cursor-pointer p-2 rounded
               transition-colors duration-200
-              ${currentValue === num 
+              ${currentValue === num
                 ? `bg-ielts-${module}/90 text-white`
                 : `hover:bg-ielts-${module}/70 text-gray-700`}
             `}
@@ -81,7 +112,7 @@ const SectionPicker: React.FC<Props> = ({
             <input
               type="checkbox"
               checked={currentValue === num}
-              onChange={() => {}}
+              onChange={() => { }}
               className={`
                 h-5 w-5 cursor-pointer
                 accent-ielts-${module}