Listening Convo Edit and a bunch of ts errors

src/components/ExamEditor/SectionRenderer/SectionExercises/index.tsx

@@ -1,13 +1,13 @@
 import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import SortableSection from "../../Shared/SortableSection";
 import getReadingQuestions from '../SectionExercises/reading';
-import { Exercise, LevelPart, ReadingPart, SpeakingExercise, WritingExercise } from "@/interfaces/exam";
-import { ReadingExercise } from "./types";
+import { Exercise, LevelPart, ListeningPart, ReadingPart, SpeakingExercise, WritingExercise } from "@/interfaces/exam";
+import ExerciseItem, { ReadingExercise } from "./types";
 import Dropdown from "@/components/Dropdown";
 import useExamEditorStore from "@/stores/examEditor";
 import Writing from "../../Exercises/Writing";
 import Speaking from "../../Exercises/Speaking";
-import { ReactNode, useEffect, useState } from "react";
+import { ReactElement, ReactNode, useEffect, useState } from "react";
 import {
     DndContext,
     PointerSensor,
@@ -15,15 +15,18 @@ import {
     useSensors,
     DragEndEvent,
     closestCenter,
+    UniqueIdentifier,
 } from '@dnd-kit/core';
 import GenLoader from "../../Exercises/Shared/GenLoader";
 import { ExamPart } from "@/stores/examEditor/types";
 import getListeningItems from "./listening";
 import getLevelQuestionItems from "./level";
+import React from "react";
 
 
-export interface Props {
-    sectionId: number;
+interface QuestionItemsResult {
+    ids: string[];
+    items: ExerciseItem[];
 }
 
 const SectionExercises: React.FC<{ sectionId: number; }> = ({ sectionId }) => {
@@ -49,7 +52,7 @@ const SectionExercises: React.FC<{ sectionId: number; }> = ({ sectionId }) => {
             })
             dispatch({ type: "UPDATE_SECTION_SINGLE_FIELD", payload: { sectionId, module: currentModule, field: "genResult", value: undefined } })
         }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [genResult, dispatch, sectionId, currentModule]);
 
     const currentSection = sections.find((s) => s.sectionId === sectionId)!;
@@ -58,27 +61,44 @@ const SectionExercises: React.FC<{ sectionId: number; }> = ({ sectionId }) => {
         useSensor(PointerSensor),
     );
 
-    const questionItems = () => {
-        let ids, items;
+    const questionItems = (): QuestionItemsResult => {
+        let result: QuestionItemsResult = {
+            ids: [],
+            items: []
+        };
+
         switch (currentModule) {
-            case "reading":
-                items = getReadingQuestions((currentSection.state as ReadingPart).exercises as ReadingExercise[], sectionId);
-                ids = items.map(q => q.id.toString());
+            case "reading": {
+                const items = getReadingQuestions(
+                    (currentSection.state as ReadingPart).exercises as ReadingExercise[],
+                    sectionId
+                );
+                result.items = items.filter((item): item is ExerciseItem => item !== undefined);
+                result.ids = result.items.map(item => item.id);
                 break;
-            case "listening":
-                items = getListeningItems((currentSection.state as ReadingPart).exercises as ReadingExercise[], sectionId);
-                ids = items.map(q => q?.id.toString());
+            }
+            case "listening": {
+                const items = getListeningItems(
+                    (currentSection.state as ListeningPart).exercises as Exercise[],
+                    sectionId
+                );
+                result.items = items.filter((item): item is ExerciseItem => item !== undefined);
+                result.ids = result.items.map(item => item.id);
                 break;
-            case "level":
-                items = getLevelQuestionItems((currentSection.state as LevelPart).exercises as Exercise[], sectionId);
-                ids = items.map(q => q.id.toString());
+            }
+            case "level": {
+                const items = getLevelQuestionItems(
+                    (currentSection.state as LevelPart).exercises as Exercise[],
+                    sectionId
+                );
+                result.items = items.filter((item): item is ExerciseItem => item !== undefined);
+                result.ids = result.items.map(item => item.id);
                 break;
+            }
         }
 
-        return { ids, items }
-    }
-
-    const questions = questionItems();
+        return result;
+    };
 
     const background = (component: ReactNode) => {
         return (
@@ -91,6 +111,20 @@ const SectionExercises: React.FC<{ sectionId: number; }> = ({ sectionId }) => {
     if (currentModule == "writing") return background(<Writing sectionId={sectionId} exercise={currentSection.state as WritingExercise} />);
     if (currentModule == "speaking") return background(<Speaking sectionId={sectionId} exercise={currentSection.state as SpeakingExercise} />);
 
+    const questions = questionItems();
+
+    const filteredIds = (questions.ids ?? []).filter(Boolean);
+
+    function isValidItem(item: ExerciseItem | undefined): item is ExerciseItem {
+        return item !== undefined && 
+            typeof item.id === 'string' && 
+            typeof item.sectionId === 'number' && 
+            React.isValidElement(item.label) && 
+            React.isValidElement(item.content);
+    }
+
+    const filteredItems = (questions.items ?? []).filter(isValidItem);
+
     return (
         <DndContext
             sensors={sensors}
@@ -107,11 +141,11 @@ const SectionExercises: React.FC<{ sectionId: number; }> = ({ sectionId }) => {
                 questions.ids.length > 0 && (
                     <div className="mt-4 p-6 rounded-xl shadow-inner border bg-gray-50">
                         <SortableContext
-                            items={questions.ids}
+                            items={filteredIds}
                             strategy={verticalListSortingStrategy}
                         >
-                            {questions.items.map(item => (
-                                <SortableSection key={item.id.toString()} id={item.id.toString()}>
+                            {filteredItems.map(item => (
+                                <SortableSection key={item.id} id={item.id}>
                                     <Dropdown
                                         className={`w-full text-left p-4 mb-2 bg-gradient-to-r from-ielts-${currentModule}/60 to-ielts-${currentModule} text-white rounded-lg shadow-lg transition-transform transform hover:scale-102`}
                                         customTitle={item.label}