From 4e3cfec9e82008022a691108dbd4cb31955360f4 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Wed, 26 Feb 2025 19:23:21 +0000
Subject: [PATCH] change to a single checkbox filter for all modules

---
 src/pages/assignments/creator/index.tsx | 135 ++++++++++--------------
 1 file changed, 55 insertions(+), 80 deletions(-)

diff --git a/src/pages/assignments/creator/index.tsx b/src/pages/assignments/creator/index.tsx
index ae4a0297..c56212c6 100644
--- a/src/pages/assignments/creator/index.tsx
+++ b/src/pages/assignments/creator/index.tsx
@@ -101,14 +101,6 @@ interface Props {
 
 const SIZE = 9;
 
-type ExamApprovalFilterMap = {
-  writing: boolean;
-  reading: boolean;
-  listening: boolean;
-  speaking: boolean;
-  level: boolean;
-};
-
 export default function AssignmentsPage({
   user,
   users,
@@ -151,20 +143,8 @@ export default function AssignmentsPage({
   const [useRandomExams, setUseRandomExams] = useState(true);
   const [examIDs, setExamIDs] = useState<{ id: string; module: Module }[]>([]);
 
-  const [showExamsThatRequiredApproval, setShowExamsThatRequiredApproval] = useState<ExamApprovalFilterMap>({
-    writing: true,
-    reading: true,
-    listening: true,
-    speaking: true,
-    level: true,
-  });
-  const [showExamsThatDidntRequireApproval, setShowExamsThatDidntRequireApproval] = useState<ExamApprovalFilterMap>({
-    writing: true,
-    reading: true,
-    listening: true,
-    speaking: true,
-    level: true,
-  });
+  const [showApprovedExams, setShowApprovedExams] = useState<boolean>(true);
+  const [showNonApprovedExams, setShowNonApprovedExams] = useState<boolean>(true);
 
   const { exams } = useExams();
   const router = useRouter();
@@ -524,69 +504,64 @@ export default function AssignmentsPage({
                 Random Exams
               </Checkbox>
               {!useRandomExams && (
-                <div className="grid md:grid-cols-2 w-full gap-4">
-                  {selectedModules.map((module) => (
-                    <div key={module} className="flex flex-col gap-3 w-full">
-                      <div className="flex flex-row gap-6">
+                <>
+                  <Checkbox
+                    isChecked={showApprovedExams}
+                    onChange={() => {
+                      setShowApprovedExams((prev) => !prev)
+                    }}
+                  >
+                    Show approved exams
+                  </Checkbox>
+                  <Checkbox
+                    isChecked={showNonApprovedExams}
+                    onChange={() => {
+                      setShowNonApprovedExams((prev) => !prev)
+                    }}
+                  >
+                    Show non-approved exams
+                  </Checkbox>
+                  <div className="grid md:grid-cols-2 w-full gap-4">
+                    {selectedModules.map((module) => (
+                      <div key={module} className="flex flex-col gap-3 w-full">
                         <label className="font-normal text-base text-mti-gray-dim">
                           {capitalize(module)} Exam
                         </label>
-                        <Checkbox
-                          isChecked={showExamsThatRequiredApproval[module]}
-                          onChange={() => {
-                            setShowExamsThatRequiredApproval(prev => ({
-                              ...prev,
-                              [module]: !prev[module],
-                            }))
+                        <Select
+                          isClearable
+                          value={{
+                            value:
+                              examIDs.find((e) => e.module === module)?.id ||
+                              null,
+                            label:
+                              examIDs.find((e) => e.module === module)?.id || "",
                           }}
-                        >
-                          Show exams that required approval
-                        </Checkbox>
-                        <Checkbox
-                          isChecked={showExamsThatDidntRequireApproval[module]}
-                          onChange={() => {
-                            setShowExamsThatDidntRequireApproval(prev => ({
-                              ...prev,
-                              [module]: !prev[module],
-                            }))
-                          }}
-                        >
-                          Show exams that did not require approval
-                        </Checkbox>
+                          onChange={(value) =>
+                            value
+                              ? setExamIDs((prev) => [
+                                ...prev.filter((x) => x.module !== module),
+                                { id: value.value!, module },
+                              ])
+                              : setExamIDs((prev) =>
+                                prev.filter((x) => x.module !== module)
+                              )
+                          }
+                          options={exams
+                            .filter((x) =>
+                              !x.isDiagnostic &&
+                              x.module === module &&
+                              x.access !== "confidential" &&
+                              (
+                                (x.requiresApproval && showApprovedExams) ||
+                                (!x.requiresApproval && showNonApprovedExams)
+                              )
+                            )
+                            .map((x) => ({ value: x.id, label: x.id }))}
+                        />
                       </div>
-                      <Select
-                        isClearable
-                        value={{
-                          value:
-                            examIDs.find((e) => e.module === module)?.id ||
-                            null,
-                          label:
-                            examIDs.find((e) => e.module === module)?.id || "",
-                        }}
-                        onChange={(value) =>
-                          value
-                            ? setExamIDs((prev) => [
-                              ...prev.filter((x) => x.module !== module),
-                              { id: value.value!, module },
-                            ])
-                            : setExamIDs((prev) =>
-                              prev.filter((x) => x.module !== module)
-                            )
-                        }
-                        options={exams
-                          .filter((x) => 
-                            !x.isDiagnostic &&
-                            x.module === module &&
-                            (
-                              (x.requiresApproval && showExamsThatRequiredApproval[module]) ||
-                              (!x.requiresApproval && showExamsThatDidntRequireApproval[module])
-                            )
-                          )
-                          .map((x) => ({ value: x.id, label: x.id }))}
-                      />
-                    </div>
-                  ))}
-                </div>
+                    ))}
+                  </div>
+                </>
               )}
             </div>
           )}