From baa880f03e31556803a761667c55ef59429e3b24 Mon Sep 17 00:00:00 2001
From: kasterra <kasterra@naver.com>
Date: Sun, 12 May 2024 21:27:53 +0900
Subject: [PATCH] feat : blank problem submit

---
 app/API/lecture.ts                            |   2 +-
 app/components/CodeBlank/index.tsx            |  26 ++-
 .../$practiceId+/$labId/SubmitModal.tsx       | 174 ++++++++++++------
 app/util/codeHole.ts                          |  19 ++
 4 files changed, 150 insertions(+), 71 deletions(-)

diff --git a/app/API/lecture.ts b/app/API/lecture.ts
index d5af970..b1953db 100644
--- a/app/API/lecture.ts
+++ b/app/API/lecture.ts
@@ -359,7 +359,7 @@ export async function getLectureWithLectureId(
 }
 
 export async function getProblemWithProblemId(
-  problemId: number,
+  problemId: number | string,
   token: string
 ): Promise<ProblemDetailResponse> {
   const response = await fetch(`${API_SERVER_URL}/problem/${problemId}`, {
diff --git a/app/components/CodeBlank/index.tsx b/app/components/CodeBlank/index.tsx
index 94f2581..4fad5df 100644
--- a/app/components/CodeBlank/index.tsx
+++ b/app/components/CodeBlank/index.tsx
@@ -13,16 +13,22 @@ const CodeBlank = ({ parsedCode, language }: Props) => {
       <code className={`language-${language}`}>
         {parsedCode.map((line, idx) => (
           <span key={idx}>
-            {line.map((element, idx) =>
-              element.type === "span" ? (
-                <span className={element.className}>{element.content}</span>
-              ) : (
-                <input
-                  className="blank"
-                  style={{ width: element.content.length * 15 }}
-                />
-              )
-            )}
+            {line.map((element, idx) => {
+              let holeIdx = 0;
+              if (element.type === "span") {
+                return (
+                  <span className={element.className}>{element.content}</span>
+                );
+              } else {
+                return (
+                  <input
+                    className="blank"
+                    style={{ width: element.content.length * 15 }}
+                    name="blank[]"
+                  />
+                );
+              }
+            })}
             <br />
           </span>
         ))}
diff --git a/app/routes/_procted+/lectures+/$lectureId+/$practiceId+/$labId/SubmitModal.tsx b/app/routes/_procted+/lectures+/$lectureId+/$practiceId+/$labId/SubmitModal.tsx
index bf5ae31..63e9109 100644
--- a/app/routes/_procted+/lectures+/$lectureId+/$practiceId+/$labId/SubmitModal.tsx
+++ b/app/routes/_procted+/lectures+/$lectureId+/$practiceId+/$labId/SubmitModal.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Modal from "~/components/Modal";
 import styles from "./index.module.css";
 import formStyles from "~/components/common/form.module.css";
@@ -10,6 +10,9 @@ import { lanugage } from "~/types";
 import { submit } from "~/API/submission";
 import { useAuth } from "~/contexts/AuthContext";
 import { useNavigate, useParams } from "@remix-run/react";
+import CodeBlank from "~/components/CodeBlank";
+import { getProblemWithProblemId } from "~/API/lecture";
+import { generateFullCode } from "~/util/codeHole";
 
 interface Props {
   isOpen: boolean;
@@ -18,78 +21,129 @@ interface Props {
 
 const SubmitModal = ({ isOpen, onClose }: Props) => {
   const auth = useAuth();
-  const { labId, lectureId } = useParams();
+  const { labId, lectureId, practiceId } = useParams();
   const navigate = useNavigate();
   const [code, setCode] = useState("");
   const [fileList, setFileList] = useState<FileList | null>(null);
   const [language, setLanguage] = useState<lanugage>("c");
   const [entryPoint, setEntryPoint] = useState("");
-  return (
+  const [isLoading, setIsLoading] = useState(true);
+  const [problemDetail, setProblemDetail] = useState<any>();
+
+  useEffect(() => {
+    async function getData() {
+      const response = await getProblemWithProblemId(labId!, auth.token);
+      if (response.status / 100 === 2) {
+        setProblemDetail((response as any).data);
+        setIsLoading(false);
+      }
+    }
+
+    getData();
+  }, []);
+
+  return isLoading ? null : (
     <Modal
       title="정답 제출"
-      subtitle="파일 업로드, 코드 직접 제출 모두 가능합니다"
+      subtitle={
+        problemDetail!.type === "blank"
+          ? "빈칸 채우기"
+          : "파일 업로드, 코드 직접 제출 모두 가능합니다"
+      }
       isOpen={isOpen}
       onClose={onClose}
     >
-      <form
-        className={styles["modal-body"]}
-        onSubmit={async (e) => {
-          e.preventDefault();
-          const formData = new FormData(e.currentTarget);
-          formData.append("language", language);
-          if (fileList) {
-            [...fileList].forEach((file) => formData.append("codes", file));
-          }
-          formData.append("code", code);
-          if (entryPoint) {
-            formData.append("entrypoint", entryPoint);
-          }
-          await submit(auth.token, labId!, formData);
-          navigate(`/students/${lectureId}/history`);
-        }}
-      >
-        <RadioGroup
-          title="프로그래밍 언어"
-          name="language"
-          valueList={["c", "java", "python", "plaintext"]}
-          textList={["C", "Java", "Python", "Text"]}
-          onChange={setLanguage as (value: string) => void}
-        />
-
-        <div className={styles.flex}>
-          {fileList && fileList.length > 1 ? (
-            <RadioGroup
-              title="엔트리 포인트 설정"
-              name="entry"
-              valueList={[...fileList].map((file) => file.name)}
-              textList={[...fileList].map((file) => file.name)}
-              onChange={setEntryPoint as (value: string) => void}
-            />
-          ) : null}
-          <MultipleFileInput
-            title="파일로 제출"
-            name="files"
-            onFileUpload={async (files) => {
-              setFileList(files);
-            }}
+      {problemDetail!.type === "blank" ? (
+        <form
+          className={styles["modal-body"]}
+          style={{ minWidth: "500px" }}
+          onSubmit={async (e) => {
+            e.preventDefault();
+            const formData = new FormData(e.currentTarget);
+            formData.append(
+              "language",
+              problemDetail!.parsed_code_elements.language
+            );
+            formData.append(
+              "code",
+              generateFullCode(
+                problemDetail!.parsed_code_elements.data,
+                formData.getAll("blank[]") as string[]
+              )
+            );
+            await submit(auth.token, labId!, formData);
+            navigate(`/students/${lectureId}/history`);
+          }}
+        >
+          <CodeBlank
+            parsedCode={problemDetail!.parsed_code_elements.data}
+            language={problemDetail!.parsed_code_elements.language}
+          />
+          <button className={formStyles["primary-button"]} type="submit">
+            제출
+          </button>
+        </form>
+      ) : (
+        <form
+          className={styles["modal-body"]}
+          onSubmit={async (e) => {
+            e.preventDefault();
+            const formData = new FormData(e.currentTarget);
+            formData.append("language", language);
+            if (fileList) {
+              [...fileList].forEach((file) => formData.append("codes", file));
+            }
+            formData.append("code", code);
+            if (entryPoint) {
+              formData.append("entrypoint", entryPoint);
+            }
+            await submit(auth.token, labId!, formData);
+            navigate(`/students/${lectureId}/history`);
+          }}
+        >
+          <RadioGroup
+            title="프로그래밍 언어"
+            name="language"
+            valueList={["c", "java", "python", "plaintext"]}
+            textList={["C", "Java", "Python", "Text"]}
+            onChange={setLanguage as (value: string) => void}
           />
-          {!fileList || fileList.length === 0 ? (
-            <div>
-              <span className={inputStyle.title}>코드로 작성하여 제출</span>
-              <CodeBlock
-                height={500}
-                language={language}
-                value={code}
-                onChange={setCode}
+
+          <div className={styles.flex}>
+            {fileList && fileList.length > 1 ? (
+              <RadioGroup
+                title="엔트리 포인트 설정"
+                name="entry"
+                valueList={[...fileList].map((file) => file.name)}
+                textList={[...fileList].map((file) => file.name)}
+                onChange={setEntryPoint as (value: string) => void}
               />
-            </div>
-          ) : null}
-        </div>
+            ) : null}
+            <MultipleFileInput
+              title="파일로 제출"
+              name="files"
+              onFileUpload={async (files) => {
+                setFileList(files);
+              }}
+            />
+            {!fileList || fileList.length === 0 ? (
+              <div>
+                <span className={inputStyle.title}>코드로 작성하여 제출</span>
+                <CodeBlock
+                  height={500}
+                  language={language}
+                  value={code}
+                  onChange={setCode}
+                />
+              </div>
+            ) : null}
+          </div>
 
-        <button className={formStyles["primary-button"]} type="submit">
-          제출
-        </button>
-      </form>
+          <button className={formStyles["primary-button"]} type="submit">
+            제출
+          </button>
+        </form>
+      )}
     </Modal>
   );
 };
diff --git a/app/util/codeHole.ts b/app/util/codeHole.ts
index e427981..de7d2d4 100644
--- a/app/util/codeHole.ts
+++ b/app/util/codeHole.ts
@@ -347,3 +347,22 @@ export function parsedCodesToString(parsedCodes: parsedCodeElement[][]) {
     )
     .join("\r\n");
 }
+
+export function generateFullCode(
+  parsedCodes: parsedCodeElement[][],
+  blanks: string[]
+) {
+  console.log(blanks);
+  let blankIdx = 0;
+  return parsedCodes
+    .map((parsedCode) =>
+      parsedCode
+        .map((parsedCodeElement) =>
+          parsedCodeElement.type === "span"
+            ? parsedCodeElement.content
+            : blanks[blankIdx++]
+        )
+        .join("")
+    )
+    .join("\r\n");
+}