From 9e13c23da963d8e256747eec8f5b4b3a33690b86 Mon Sep 17 00:00:00 2001
From: kasterra <kasterra@naver.com>
Date: Sat, 25 May 2024 16:19:37 +0900
Subject: [PATCH] feat : Import practice

---
 app/API/practice.ts                           | 11 ++++-
 .../_layout/ImportPracticeModal.tsx           | 44 ++++++++++++++++++-
 .../lectures+/$lectureId+/_layout/index.tsx   |  5 ++-
 3 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/app/API/practice.ts b/app/API/practice.ts
index 6a18282..ffea183 100644
--- a/app/API/practice.ts
+++ b/app/API/practice.ts
@@ -46,7 +46,8 @@ export async function createNewPractice(
   start_time: string,
   end_time: string,
   title: string,
-  token: string
+  token: string,
+  previous_practice_id?: number
 ) {
   if (!title) {
     throw new BadRequestError("제목은 필수 입력 필드입니다");
@@ -57,7 +58,13 @@ export async function createNewPractice(
       "Content-Type": "application/json",
       Authorization: `Bearer ${token}`,
     },
-    body: JSON.stringify({ lecture_id, start_time, end_time, title }),
+    body: JSON.stringify({
+      lecture_id,
+      start_time,
+      end_time,
+      title,
+      ...(previous_practice_id ? { previous_practice_id } : {}),
+    }),
   });
 
   switch (response.status) {
diff --git a/app/routes/_procted+/lectures+/$lectureId+/_layout/ImportPracticeModal.tsx b/app/routes/_procted+/lectures+/$lectureId+/_layout/ImportPracticeModal.tsx
index ee30aa3..a860aa5 100644
--- a/app/routes/_procted+/lectures+/$lectureId+/_layout/ImportPracticeModal.tsx
+++ b/app/routes/_procted+/lectures+/$lectureId+/_layout/ImportPracticeModal.tsx
@@ -10,6 +10,9 @@ import inputStyles from "~/components/Input/input.module.css";
 import formStyles from "~/components/common/form.module.css";
 import TextInput from "~/components/Input/TextInput";
 import DateInput from "~/components/Input/DateInput";
+import { useParams } from "@remix-run/react";
+import toast from "react-hot-toast";
+import { createNewPractice } from "~/API/practice";
 
 interface Props {
   isOpen: boolean;
@@ -20,6 +23,7 @@ const ImportPracticeModal = ({ isOpen, onClose }: Props) => {
   const [data, setData] = useState<TreeViewNode[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const { token, userId } = useAuth();
+  const params = useParams();
 
   useEffect(() => {
     async function getData() {
@@ -60,7 +64,45 @@ const ImportPracticeModal = ({ isOpen, onClose }: Props) => {
       isOpen={isOpen}
       onClose={onClose}
     >
-      <form className={styles["modal-body"]}>
+      <form
+        className={styles["modal-body"]}
+        onSubmit={async (e) => {
+          e.preventDefault();
+          const formData = new FormData(e.currentTarget);
+          const lecture_id = parseInt(params.lectureId!, 10);
+          const startTime = formData.get("startTime") as string;
+          const endTime = formData.get("endTime") as string;
+          const targetId = formData.get("import-target") as string;
+          const title = formData.get("title") as string;
+          const start = new Date(startTime);
+          const end = new Date(endTime);
+          if (start > end) {
+            toast.error("종료 시간은 시작 시간보다 이후여야 합니다");
+            return;
+          }
+
+          const start_time = start.toISOString();
+          const end_time = end.toISOString();
+
+          await toast.promise(
+            createNewPractice(
+              lecture_id,
+              start_time,
+              end_time,
+              title,
+              token,
+              parseInt(targetId)
+            ),
+            {
+              loading: "실습 생성중...",
+              success: "성공적으로 실습을 생성하였습니다",
+              error: (error) =>
+                `Error: ${error.message} - ${error.responseMessage}`,
+            }
+          );
+          onClose();
+        }}
+      >
         <div className={inputStyles.wrapper}>
           <span className={inputStyles.title}>가져올 실습</span>
           <TreeView nodes={data} name="import-target" />
diff --git a/app/routes/_procted+/lectures+/$lectureId+/_layout/index.tsx b/app/routes/_procted+/lectures+/$lectureId+/_layout/index.tsx
index 6cadc9f..e8aad4c 100644
--- a/app/routes/_procted+/lectures+/$lectureId+/_layout/index.tsx
+++ b/app/routes/_procted+/lectures+/$lectureId+/_layout/index.tsx
@@ -205,7 +205,10 @@ const LectureDetail = () => {
       {isImportPracticeModalOpen ? (
         <ImportPracticeModal
           isOpen={isImportPracticeModalOpen}
-          onClose={() => setIsImportPracticeModalOpen(false)}
+          onClose={() => {
+            setIsImportPracticeModalOpen(false);
+            setIsLoading(true);
+          }}
         />
       ) : null}
       <Outlet />