Changed approach on available type selection

src/pages/(generation)/ListeningGeneration.tsx

@@ -18,23 +18,42 @@ import WriteBlanksEdit from "@/components/Generation/write.blanks.edit";
 
 const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
 
+const MULTIPLE_CHOICE = { type: "multipleChoice", label: "Multiple Choice" };
+const WRITE_BLANKS_QUESTIONS = {
+  type: "writeBlanksQuestions",
+  label: "Write the Blanks: Questions",
+};
+const WRITE_BLANKS_FILL = {
+  type: "writeBlanksFill",
+  label: "Write the Blanks: Fill",
+};
+const WRITE_BLANKS_FORM = {
+  type: "writeBlanksForm",
+  label: "Write the Blanks: Form",
+};
+const MULTIPLE_CHOICE_3 = {
+  type: "multipleChoice3Options",
+  label: "Multiple Choice",
+};
+
 const PartTab = ({
   part,
-  types,
   difficulty,
+  availableTypes,
   index,
   setPart,
   updatePart,
 }: {
   part?: ListeningPart;
   difficulty: Difficulty;
-  types: string[];
+  availableTypes: { type: string; label: string }[];
   index: number;
   setPart: (part?: ListeningPart) => void;
   updatePart: Dispatch<SetStateAction<ListeningPart | undefined>>;
 }) => {
   const [topic, setTopic] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const [types, setTypes] = useState<string[]>([]);
 
   const generate = () => {
     const url = new URLSearchParams();
@@ -126,8 +145,37 @@ const PartTab = ({
     });
   };
 
+  const toggleType = (type: string) =>
+    setTypes((prev) =>
+      prev.includes(type)
+        ? [...prev.filter((x) => x !== type)]
+        : [...prev, type]
+    );
+
   return (
     <Tab.Panel className="w-full bg-ielts-listening/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
+      <div className="flex flex-col gap-3">
+        <label className="font-normal text-base text-mti-gray-dim">
+          Exercises
+        </label>
+        <div className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
+          {availableTypes.map((x) => (
+            <span
+              onClick={() => toggleType(x.type)}
+              key={x.type}
+              className={clsx(
+                "px-6 py-4 w-64 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+                "transition duration-300 ease-in-out",
+                !types.includes(x.type)
+                  ? "bg-white border-mti-gray-platinum"
+                  : "bg-ielts-listening/70 border-ielts-listening text-white"
+              )}
+            >
+              {x.label}
+            </span>
+          ))}
+        </div>
+      </div>
       <div className="flex gap-4 items-end">
         <Input
           type="text"
@@ -228,7 +276,6 @@ const ListeningGeneration = () => {
   const [minTimer, setMinTimer] = useState(30);
   const [isLoading, setIsLoading] = useState(false);
   const [resultingExam, setResultingExam] = useState<ListeningExam>();
-  const [types, setTypes] = useState<string[]>([]);
   const [difficulty, setDifficulty] = useState<Difficulty>(
     sample(DIFFICULTIES)!
   );
@@ -243,25 +290,11 @@ const ListeningGeneration = () => {
     setMinTimer(sum > 0 ? sum : 5);
   }, [part1, part2, part3, part4]);
 
-  const availableTypes = [
-    { type: "multipleChoice", label: "Multiple Choice" },
-    { type: "writeBlanksQuestions", label: "Write the Blanks: Questions" },
-    { type: "writeBlanksFill", label: "Write the Blanks: Fill" },
-    { type: "writeBlanksForm", label: "Write the Blanks: Form" },
-  ];
-
   const router = useRouter();
 
   const setExams = useExamStore((state) => state.setExams);
   const setSelectedModules = useExamStore((state) => state.setSelectedModules);
 
-  const toggleType = (type: string) =>
-    setTypes((prev) =>
-      prev.includes(type)
-        ? [...prev.filter((x) => x !== type)]
-        : [...prev, type]
-    );
-
   const submitExam = () => {
     const parts = [part1, part2, part3, part4].filter((x) => !!x);
     console.log({ parts });
@@ -289,7 +322,6 @@ const ListeningGeneration = () => {
         setPart3(undefined);
         setPart4(undefined);
         setDifficulty(sample(DIFFICULTIES)!);
-        setTypes([]);
       })
       .catch((error) => {
         console.log(error);
@@ -349,30 +381,6 @@ const ListeningGeneration = () => {
           />
         </div>
       </div>
-
-      <div className="flex flex-col gap-3">
-        <label className="font-normal text-base text-mti-gray-dim">
-          Exercises
-        </label>
-        <div className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
-          {availableTypes.map((x) => (
-            <span
-              onClick={() => toggleType(x.type)}
-              key={x.type}
-              className={clsx(
-                "px-6 py-4 w-64 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-                "transition duration-300 ease-in-out",
-                !types.includes(x.type)
-                  ? "bg-white border-mti-gray-platinum"
-                  : "bg-ielts-listening/70 border-ielts-listening text-white"
-              )}
-            >
-              {x.label}
-            </span>
-          ))}
-        </div>
-      </div>
-
       <Tab.Group>
         <Tab.List className="flex space-x-1 rounded-xl bg-ielts-listening/20 p-1">
           <Tab
@@ -434,15 +442,41 @@ const ListeningGeneration = () => {
         </Tab.List>
         <Tab.Panels>
           {[
-            { part: part1, setPart: setPart1 },
+            {
-            { part: part2, setPart: setPart2 },
+              part: part1,
-            { part: part3, setPart: setPart3 },
+              setPart: setPart1,
-            { part: part4, setPart: setPart4 },
+              types: [
-          ].map(({ part, setPart }, index) => (
+                MULTIPLE_CHOICE,
+                WRITE_BLANKS_QUESTIONS,
+                WRITE_BLANKS_FILL,
+                WRITE_BLANKS_FORM,
+              ],
+            },
+            {
+              part: part2,
+              setPart: setPart2,
+              types: [MULTIPLE_CHOICE, WRITE_BLANKS_QUESTIONS],
+            },
+            {
+              part: part3,
+              setPart: setPart3,
+              types: [MULTIPLE_CHOICE_3, WRITE_BLANKS_QUESTIONS],
+            },
+            {
+              part: part4,
+              setPart: setPart4,
+              types: [
+                MULTIPLE_CHOICE,
+                WRITE_BLANKS_QUESTIONS,
+                WRITE_BLANKS_FILL,
+                WRITE_BLANKS_FORM,
+              ],
+            },
+          ].map(({ part, setPart, types }, index) => (
             <PartTab
               part={part}
               difficulty={difficulty}
-              types={types}
+              availableTypes={types}
               index={index + 1}
               key={index}
               setPart={setPart}