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

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

@@ -2,6 +2,7 @@ import { Module } from "@/interfaces";
 import useExamEditorStore from "@/stores/examEditor";
 import { Generating } from "@/stores/examEditor/types";
 import clsx from "clsx";
+import { useEffect, useState } from "react";
 import { BsArrowRepeat } from "react-icons/bs";
 import { GiBrain } from "react-icons/gi";
 
@@ -11,25 +12,37 @@ interface Props {
     genType: Generating;
     generateFnc: (sectionId: number) => void
     className?: string;
+    levelId?: number;
+    level?: boolean;
 }
 
-const GenerateBtn: React.FC<Props> = ({module, sectionId, genType, generateFnc, className}) => {
-    const section = useExamEditorStore((store) => store.modules[module].sections.find((s)=> s.sectionId == sectionId));
+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 [loading, setLoading] = useState(false);
+
+    const generating = section?.generating;
+    const levelGenerating = section?.levelGenerating;
+
+    useEffect(()=> {
+        const gen = level ? levelGenerating?.find(g => g === genType) !== undefined : (generating !== undefined && generating === genType);
+        if (loading !== gen) {
+            setLoading(gen);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [generating, levelGenerating])
+
     if (section === undefined) return <></>;
 
-    const {generating} = section;
-
-    
-    const loading = generating && generating === genType;
     return (
         <button
             key={`section-${sectionId}`}
             className={clsx(
-                "flex items-center w-[140px] justify-center px-4 py-2 text-white rounded-xl transition-colors duration-300 text-lg",
-                `bg-ielts-${module}/70 border border-ielts-${module} hover:bg-ielts-${module}`,
+                "flex items-center w-[140px] justify-center px-4 py-2 text-white rounded-xl transition-colors duration-300 text-lg disabled:cursor-not-allowed",
+                `bg-ielts-${module}/70 border border-ielts-${module} hover:bg-ielts-${module} disabled:bg-ielts-${module}/40`,
                 className
             )}
-            onClick={loading  ? () => { } : () => generateFnc(sectionId)}
+            disabled={loading}
+            onClick={loading ? () => { } : () => generateFnc(levelId ? levelId : sectionId)}
         >
             {loading ? (
                 <div key={`section-${sectionId}`} className="flex items-center justify-center">
@@ -43,6 +56,6 @@ const GenerateBtn: React.FC<Props> = ({module, sectionId, genType, generateFnc,
             )}
         </button>
     );
-} 
+}
 
 export default GenerateBtn;