From d30a75697b597945180601f4401cbf831951ff7e Mon Sep 17 00:00:00 2001
From: Araozu <fernando@eegsac.com>
Date: Fri, 6 Oct 2023 10:53:54 -0500
Subject: [PATCH] [Classroom][FE] Fixes #5 Don't show duplicate entries

---
 .../OnlineClassroom/ClassroomRegistration.tsx  | 13 +++++++++----
 .../ClassroomRegistrationPreview.tsx           | 18 ++++++++++--------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/frontend/src/OnlineClassroom/ClassroomRegistration.tsx b/frontend/src/OnlineClassroom/ClassroomRegistration.tsx
index 3e3a851..d8fa8aa 100644
--- a/frontend/src/OnlineClassroom/ClassroomRegistration.tsx
+++ b/frontend/src/OnlineClassroom/ClassroomRegistration.tsx
@@ -8,7 +8,7 @@ export function ClassroomRegistration(props: {
     surname_first_letter: string, userId: number | null,
     onSuccess: () => void,
 }) {
-    const [selections, setSelections] = createSignal<Array<ClassroomCourseValue>>([]);
+    const [selections, setSelections] = createSignal<Set<ClassroomCourseValue>>(new Set());
 
     return (
         <div class="h-screen overflow-y-scroll">
@@ -17,7 +17,7 @@ export function ClassroomRegistration(props: {
 
                 <div class="bg-c-surface p-4 h-[23rem]">
                     <ManualClassroomRegistration
-                        onAdd={(x) => setSelections((s) => ([...s, x]))}
+                        onAdd={(x) => setSelections((s) => new Set([...s, x]))}
                     />
                 </div>
             </FilledCard>
@@ -26,9 +26,14 @@ export function ClassroomRegistration(props: {
                 surname_first_letter={props.surname_first_letter}
                 userId={props.userId}
                 selections={selections()}
-                deleteRegister={(course_key) => setSelections((course) => course.filter((v) => v !== course_key))}
+                deleteRegister={(course_key) => {
+                    setSelections((prevSet) => {
+                        prevSet.delete(course_key as ClassroomCourseValue);
+                        return new Set(prevSet);
+                    });
+                }}
                 onSuccess={() => {
-                    setSelections([]);
+                    setSelections(new Set<ClassroomCourseValue>());
                     props.onSuccess();
                 }}
             />
diff --git a/frontend/src/OnlineClassroom/ClassroomRegistrationPreview.tsx b/frontend/src/OnlineClassroom/ClassroomRegistrationPreview.tsx
index 302d30f..45c3a17 100644
--- a/frontend/src/OnlineClassroom/ClassroomRegistrationPreview.tsx
+++ b/frontend/src/OnlineClassroom/ClassroomRegistrationPreview.tsx
@@ -10,7 +10,7 @@ import { AxiosError } from "axios";
 export function ClassroomRegistrationPreview(props: {
     surname_first_letter: string,
     userId: number | null,
-    selections: Array<ClassroomCourseValue>,
+    selections: Set<ClassroomCourseValue>,
     deleteRegister: (k: string) => void,
     onSuccess: () => void,
 }) {
@@ -27,7 +27,7 @@ export function ClassroomRegistrationPreview(props: {
 
         backend.post<JsonResult<null>>(`/api/classroom/course/${props.userId}`, {
             surname_first_letter: "A",
-            courses: props.selections,
+            courses: [...props.selections.values()],
         })
             .then((response) => {
                 if (response.status === 200) {
@@ -35,25 +35,27 @@ export function ClassroomRegistrationPreview(props: {
                     props.onSuccess();
                 } else {
                     console.error(response.data);
-                    setError(response.data.Err.reason);
+                    setError(response.data.Error.reason);
                     setStatus(LoadingStatus.Error);
                 }
             })
             .catch((err: AxiosError<JsonResult<null>>) => {
                 console.error(err);
-                if (err.response?.data?.Err?.reason) {
-                    setError(err.response.data.Err.reason);
+                if (err.response?.data?.Error?.reason) {
+                    setError(err.response.data.Error.reason);
                 }
 
                 setStatus(LoadingStatus.Error);
             });
     };
 
+    const selections = createMemo(() => [...props.selections]);
+
     return (
         <FilledCard class="border border-c-outline overflow-hidden">
             <h2 class="p-4 font-bold text-xl">Confirmar registro</h2>
             <div class="bg-c-surface p-4">
-                <For each={props.selections}>
+                <For each={selections()}>
                     {(course_key) => (
                         <div class="grid grid-cols-[auto_1.5rem] py-1 px-2 rounded-md border border-c-outline my-1">
                             <span class="font-mono">
@@ -73,7 +75,7 @@ export function ClassroomRegistrationPreview(props: {
                     class="bg-c-primary text-c-on-primary px-4 py-2 rounded-full cursor-pointer mt-4
                             disabled:opacity-50 disabled:cursor-not-allowed relative"
                     type="button"
-                    disabled={props.userId === null || props.selections.length === 0 || loading()}
+                    disabled={props.userId === null || selections().length === 0 || loading()}
                     onclick={submit}
                 >
                     <span
@@ -86,7 +88,7 @@ export function ClassroomRegistrationPreview(props: {
                         />
                     </span>
                     <span class="ml-6">
-                        Matricular en {props.selections.length} cursos
+                        Matricular en {selections().length} cursos
                     </span>
                 </button>
             </div>