From 8fa45415cad7cac7eb74a7e3b80638a7e77b8e7b Mon Sep 17 00:00:00 2001
From: ItsukiKigoshi <itsukikigoshi@gmail.com>
Date: Mon, 5 Feb 2024 00:43:57 +0900
Subject: [PATCH] Refactor AddCourse component and update Navbar component

---
 src/components/AddCourse/index.tsx         | 113 +++++++++++----------
 src/components/ModalCourseEditor/index.tsx |  81 +++++++++------
 src/components/Navbar/index.tsx            |   2 +-
 3 files changed, 112 insertions(+), 84 deletions(-)

diff --git a/src/components/AddCourse/index.tsx b/src/components/AddCourse/index.tsx
index 70db8d4..32be505 100644
--- a/src/components/AddCourse/index.tsx
+++ b/src/components/AddCourse/index.tsx
@@ -1,19 +1,16 @@
 import { Course } from "@/src/type/Types";
-import {
-  ActionIcon,
-  Grid,
-  Group,
-  HoverCard,
-  Text,
-  TextInput,
-  rem,
-} from "@mantine/core";
-import { IconPlus, IconQuestionMark } from "@tabler/icons-react";
+import { Button, Flex } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconPlus } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
+import ModalCourseEditor from "../ModalCourseEditor";
 
 export default function AddCourse(props: {
-  addCourse: (course: Course) => void;
   courses: Course[];
+  courseController: {
+    addCourse: (course: Course) => void;
+    updateCourse: (course: Course) => void;
+  };
 }) {
   const [query, setQuery] = useState("");
 
@@ -25,6 +22,9 @@ export default function AddCourse(props: {
     }
   }, [query]);
 
+  const [modalCourseEditorOpened, { open: editorOpen, close: editorClose }] =
+    useDisclosure(false);
+
   function parseCourseInfo(str: string): Course | undefined {
     // replace "(" or "<" with "," in front of the schedule, and remove ")" and ">" after schedule
     const modifiedStr = str
@@ -129,53 +129,60 @@ export default function AddCourse(props: {
       if (isAlreadyInList(course)) {
         setErrorMessage(`Already in the List! regno:${course.regno}`);
       } else {
-        props.addCourse(course);
+        props.courseController.addCourse(course);
         setQuery("");
       }
     }
   };
 
   return (
-    <Grid p="xs">
-      <Grid.Col span="auto">
-        <form onSubmit={handleSubmit}>
-          <TextInput
-            m="0"
-            placeholder="Add Course"
-            w="100%"
-            leftSection={
-              <IconPlus
-                style={{ width: rem(12), height: rem(12) }}
-                stroke={1.5}
-              />
-            }
-            styles={{ section: { pointerEvents: "none" } }}
-            value={query}
-            error={errorMessage}
-            onChange={(e) => setQuery(e.currentTarget.value)}
-          />
-        </form>
-      </Grid.Col>
-      <Grid.Col span="content">
-        <Group justify="center">
-          <HoverCard>
-            <HoverCard.Target>
-              <ActionIcon
-                color="gray"
-                size="lg"
-                component="a"
-                href="https://github.com/ItsukiKigoshi/catalogue.icu/releases/tag/v0.0.0"
-                target="_blank"
-              >
-                <IconQuestionMark />
-              </ActionIcon>
-            </HoverCard.Target>
-            <HoverCard.Dropdown>
-              <Text>Copy & Paste from Course Offerings!</Text>
-            </HoverCard.Dropdown>
-          </HoverCard>
-        </Group>
-      </Grid.Col>
-    </Grid>
+    <>
+      <ModalCourseEditor
+        title={"Add Course Manually"}
+        course={{
+          regno: 10000,
+          season: "Spring",
+          ay: 2024,
+          no: "",
+          lang: "E",
+          e: "",
+          j: "",
+          schedule: [],
+          unit: 0,
+          color: "",
+          isEnrolled: true,
+          modified: new Date(),
+        }}
+        updateCourse={props.courseController.updateCourse}
+        modalCourseEditorOpened={modalCourseEditorOpened}
+        editorClose={editorClose}
+      />
+      <Flex justify="center" gap="xs">
+        <Button
+          leftSection={<IconPlus />}
+          color="gray"
+          onClick={editorOpen}
+          w="100%"
+        >
+          Add Manually
+        </Button>
+
+        {/* <TextInput
+          m="0"
+          placeholder="Paste it!"
+          leftSection={
+            <IconClipboard
+              style={{ width: rem(12), height: rem(12) }}
+              stroke={1.5}
+            />
+          }
+          styles={{ section: { pointerEvents: "none" } }}
+          value={query}
+          error={errorMessage}
+          onChange={(e) => setQuery(e.currentTarget.value)}
+          onSubmit={handleSubmit}
+        />*/}
+      </Flex>
+    </>
   );
 }
diff --git a/src/components/ModalCourseEditor/index.tsx b/src/components/ModalCourseEditor/index.tsx
index b31f945..622b103 100644
--- a/src/components/ModalCourseEditor/index.tsx
+++ b/src/components/ModalCourseEditor/index.tsx
@@ -10,7 +10,7 @@ import {
   TagsInput,
   TextInput,
 } from "@mantine/core";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export default function ModalCourseEditor(props: {
   title: string;
@@ -18,9 +18,13 @@ export default function ModalCourseEditor(props: {
   updateCourse: (course: Course) => void;
   modalCourseEditorOpened: boolean;
   editorClose: () => void;
-  modalDetailClose: () => void;
+  modalDetailClose?: () => void;
 }) {
   const [editedCourse, setEditedCourse] = useState<Course>(props.course);
+  // Reset the edited course when the props.course is changed
+  useEffect(() => {
+    setEditedCourse(props.course);
+  }, [props.course]);
 
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
@@ -34,37 +38,53 @@ export default function ModalCourseEditor(props: {
     event.preventDefault();
     props.updateCourse(editedCourse);
     props.editorClose();
-    props.modalDetailClose();
+    props?.modalDetailClose?.();
   };
 
+  const scheduleSelectData = ["M", "TU", "W", "TH", "F", "SA"].map((day) => ({
+    group: day,
+    items: ["1", "2", "3", "4", "5", "6", "7"].map(
+      (period) => `${period}/${day}`
+    ),
+  }));
+
   return (
     <Modal
       opened={props.modalCourseEditorOpened}
       onClose={() => {
         props.editorClose();
-        props.modalDetailClose();
+        props?.modalDetailClose?.();
       }}
       title={props.title}
       centered
+      closeOnClickOutside={false}
+      closeOnEscape={false}
     >
       <form onSubmit={handleSubmit}>
         <Stack gap="xs" pb="xs">
           <Group grow>
-            <TextInput
+            <NumberInput
               label="Registration Number"
               withAsterisk
               required
-              disabled
-              placeholder={props.course.regno.toString()}
+              placeholder={"18807"}
               name="regno"
-              value={editedCourse.regno.toString()}
-              onChange={handleInputChange}
+              value={editedCourse.regno}
+              min={10000}
+              max={99999}
+              onChange={(value) =>
+                setEditedCourse((prevCourse) => ({
+                  ...prevCourse,
+                  regno: Number(value),
+                }))
+              }
             />
             <TextInput
               label="Course Number"
+              data-autofocus
               withAsterisk
               required
-              placeholder={props.course.no}
+              placeholder={"WTS101"}
               name="no"
               value={editedCourse.no}
               onChange={handleInputChange}
@@ -74,7 +94,7 @@ export default function ModalCourseEditor(props: {
             label="English Title"
             withAsterisk
             required
-            placeholder={props.course.e}
+            placeholder={"Introductory Unsolved Cases"}
             name="e"
             value={editedCourse.e}
             onChange={handleInputChange}
@@ -83,23 +103,25 @@ export default function ModalCourseEditor(props: {
             label="Japanese Title"
             withAsterisk
             required
-            placeholder={props.course.j}
+            placeholder={"未解決事件入門"}
             name="j"
             value={editedCourse.j}
             onChange={handleInputChange}
           />
 
           <TagsInput
-            label="Schedule (e.g. 3/M)"
+            label="Schedule (e.g. 3/TH)"
+            placeholder="4/W, 3/TH, 5/F, ..."
             withAsterisk
             required
             defaultValue={props.course.schedule}
             name="schedule"
             value={editedCourse.schedule}
+            data={scheduleSelectData}
             onChange={(value: string[]) => {
               const scheduleArray = value.map((item) => item.trim());
               const validScheduleArray = scheduleArray.filter((item) =>
-                /^[1-7]+\/[M|TU|W|TH|F|SA]+$/.test(item)
+                /^[1-7]+\/(M|TU|W|TH|F|SA)$/.test(item)
               );
               setEditedCourse((prevCourse) => ({
                 ...prevCourse,
@@ -110,14 +132,14 @@ export default function ModalCourseEditor(props: {
           <Group grow>
             <TextInput
               label="Room"
-              placeholder={props.course.room}
+              placeholder={"B-221B"}
               name="room"
               value={editedCourse.room}
               onChange={handleInputChange}
             />
             <TextInput
               label="Instructor"
-              placeholder={props.course.instructor}
+              placeholder={"Sherlock Holmes"}
               name="instructor"
               value={editedCourse.instructor}
               onChange={handleInputChange}
@@ -129,9 +151,14 @@ export default function ModalCourseEditor(props: {
               label="Language"
               withAsterisk
               required
-              defaultValue={props.course.lang}
               name="lang"
               value={editedCourse.lang}
+              onChange={(event) =>
+                setEditedCourse((prevCourse) => ({
+                  ...prevCourse,
+                  lang: event?.currentTarget?.value || editedCourse.lang,
+                }))
+              }
               data={[
                 { value: "E", label: "English" },
                 { value: "J", label: "Japanese" },
@@ -181,6 +208,7 @@ export default function ModalCourseEditor(props: {
               placeholder={props.course.ay.toString()}
               name="ay"
               value={editedCourse.ay.toString()}
+              min={2000}
               onChange={(value) =>
                 setEditedCourse((prevCourse) => ({
                   ...prevCourse,
@@ -197,18 +225,11 @@ export default function ModalCourseEditor(props: {
             placeholder={props.course.color}
             name="color"
             value={editedCourse.color}
-            onChange={
-              editedCourse.color
-                ? (value) =>
-                    setEditedCourse((prevCourse) => ({
-                      ...prevCourse,
-                      color: value,
-                    }))
-                : () =>
-                    setEditedCourse((prevCourse) => ({
-                      ...prevCourse,
-                      color: "#2e2e2e",
-                    }))
+            onChange={(value) =>
+              setEditedCourse((prevCourse) => ({
+                ...prevCourse,
+                color: value,
+              }))
             }
             format="hex"
             withPicker={false}
@@ -230,7 +251,7 @@ export default function ModalCourseEditor(props: {
             ]}
           />
         </Stack>
-        <Button type="submit">Submit</Button>
+        <Button type="submit">Save</Button>
       </form>
     </Modal>
   );
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index e61fb40..61a8dbc 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -54,7 +54,7 @@ export function Navbar(props: {
       <Stack justify="flex-start" p="sm" h="100%">
         <AddCourse
           courses={props.courses}
-          addCourse={props.courseController.addCourse}
+          courseController={props.courseController}
         />
         <ScrollArea>
           {results}