Exam Edit on ExamList

src/components/ExamEditor/index.tsx

@@ -20,7 +20,7 @@ import { defaultSectionSettings } from "@/stores/examEditor/defaults";
 
 const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
 
-const ExamEditor: React.FC = () => {
+const ExamEditor: React.FC<{ levelParts?: number }> = ({ levelParts = 0 }) => {
     const { currentModule, dispatch } = useExamEditorStore();
     const {
         sections,
@@ -33,18 +33,34 @@ const ExamEditor: React.FC = () => {
         importModule
     } = useExamEditorStore(state => state.modules[currentModule]);
 
-    const [numberOfLevelParts, setNumberOfLevelParts] = useState(1);
+    const [numberOfLevelParts, setNumberOfLevelParts] = useState(levelParts !== undefined ? levelParts : 1);
+
+    useEffect(() => {
+        setNumberOfLevelParts(levelParts);
+        dispatch({
+            type: 'UPDATE_MODULE',
+            payload: {
+                updates: {
+                    sectionLabels: Array.from({ length: levelParts }).map((_, i) => ({
+                        id: i + 1,
+                        label: `Part ${i + 1}`
+                    }))
+                }
+            }
+        })
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [levelParts])
 
     useEffect(() => {
         const currentSections = sections;
         const currentLabels = sectionLabels;
         let updatedSections: SectionState[];
         let updatedLabels: any;
-    
+
         if (numberOfLevelParts > currentSections.length) {
             const newSections = [...currentSections];
             const newLabels = [...currentLabels];
-            
+
             for (let i = currentSections.length; i < numberOfLevelParts; i++) {
                 newSections.push(defaultSectionSettings(currentModule, i + 1));
                 newLabels.push({
@@ -60,11 +76,11 @@ const ExamEditor: React.FC = () => {
         } else {
             return;
         }
-    
+
         const updatedExpandedSections = expandedSections.filter(
             sectionId => updatedSections.some(section => section.sectionId === sectionId)
         );
-    
+
         dispatch({
             type: 'UPDATE_MODULE',
             payload: {
@@ -75,7 +91,7 @@ const ExamEditor: React.FC = () => {
                 }
             }
         });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [numberOfLevelParts]);
 
 
@@ -103,10 +119,10 @@ const ExamEditor: React.FC = () => {
 
     const Settings = ModuleSettings[currentModule];
     const showImport = importModule && ["reading", "listening", "level"].includes(currentModule);
-    
+
     return (
         <>
-            {showImport ? <ImportOrStartFromScratch module={currentModule} setNumberOfLevelParts={setNumberOfLevelParts}/> : (
+            {showImport ? <ImportOrStartFromScratch module={currentModule} setNumberOfLevelParts={setNumberOfLevelParts} /> : (
                 <>
                     <div className="flex gap-4 w-full items-center">
                         <div className="flex flex-col gap-3">