Feature/add problem answer list (#77)

* add: 問題詳細ページで回答済み一覧が確認できるようになった * add: 回答内容が閲覧できるように改善
ictsc · Jan 2, 2023 · cadada3 · cadada3
1 parent 91b9f53
commit cadada3
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 2 deletions.
diff --git a/hooks/answer.ts b/hooks/answer.ts
@@ -15,8 +15,13 @@ export const useAnswers = (id: string) => {
 
   const {data, mutate} = useSWR(`problems/${id}/answers`, fetcher)
 
+  const getAnswer = (id: string): Answer | null => {
+    return data?.data?.answers.find((answer) => answer.id === id) ?? null
+  }
+
   return {
     answers: data?.data?.answers ?? [],
+    getAnswer,
     mutate
   }
 }
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "eslint": "8.28.0",
     "eslint-config-next": "^13.1.1",
     "ky": "^0.33.0",
+    "luxon": "^3.2.0",
     "next": "^13.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -29,6 +30,7 @@
     "zenn-markdown-html": "^0.1.132"
   },
   "devDependencies": {
+    "@types/luxon": "^3.2.0",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.19",
     "tailwindcss": "^3.2.4"

diff --git a/pages/problems/[problemId].tsx b/pages/problems/[problemId].tsx
@@ -4,6 +4,7 @@ import {useRouter} from "next/router";
 import Error from "next/error";
 
 import {useForm, Controller, SubmitHandler} from "react-hook-form";
+import {DateTime} from "luxon";
 
 import ICTSCNavBar from "../../components/Navbar";
 import ICTSCCard from "../../components/Card";
@@ -13,13 +14,15 @@ import LoadingPage from "../../components/LoadingPage";
 import {useApi} from "../../hooks/api";
 import {useAuth} from "../../hooks/auth";
 import {useProblems} from "../../hooks/problem";
+import {useAnswers} from "../../hooks/answer";
 
 type Inputs = {
   answer: string;
 }
 
 const ProblemPage = () => {
   const router = useRouter();
+  const {problemId} = router.query;
 
   const {handleSubmit, control, watch, formState: {errors}} = useForm<Inputs>()
   // answer のフォームを監視
@@ -30,12 +33,14 @@ const ProblemPage = () => {
   const {getProblem, isLoading} = useProblems();
   const [isPreview, setIsPreview] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedAnswerId, setSelectedAnswerId] = useState<string | null>(null);
   const [status, setStatus] = useState<number | null>(null);
 
-
-  const {problemId} = router.query;
   const problem = getProblem(problemId as string);
 
+  const {answers, getAnswer, mutate} = useAnswers(problem?.id as string);
+  const selectedAnswer = getAnswer(selectedAnswerId as string);
+
   // モーダルを表示しバリデーションを行う
   const onModal: SubmitHandler<Inputs> = async () => {
     setIsModalOpen(true)
@@ -51,6 +56,10 @@ const ProblemPage = () => {
     })
 
     setStatus(response.status)
+
+    if (response.ok) {
+      await mutate()
+    }
   }
 
 
@@ -68,6 +77,8 @@ const ProblemPage = () => {
     );
   }
 
+  console.log(answers)
+
 
   return (
       <>
@@ -144,6 +155,78 @@ const ProblemPage = () => {
             </form>
           </ICTSCCard>
           <div className={'text-sm pt-2'}>※ 回答は20分に1度のみです</div>
+          <div className={'divider'}/>
+          <div className={'pb-2'}>
+            定期的に自動更新されます
+          </div>
+          <div className={'overflow-x-auto'}>
+            <table className="table border table-compact w-full">
+              <thead>
+              <tr>
+                <th className={'w-[196px]'}>提出日時</th>
+                <th className={'w-[100px]'}>問題コード</th>
+                <th>問題</th>
+                <th className={'w-[100px]'}>得点</th>
+                <th className={'w-[100px]'}>チェック済み</th>
+                <th className={'w-[50px]'}></th>
+              </tr>
+              </thead>
+              <tbody>
+              {answers
+                  .sort((a, b) => {
+                    if (a.created_at < b.created_at) {
+                      return 1;
+                    }
+                    if (a.created_at > b.created_at) {
+                      return -1;
+                    }
+                    return 0;
+                  })
+                  .map((answer) => {
+                    const createdAt = DateTime.fromISO(answer.created_at)
+
+                    return (
+                        <tr key={answer.id}>
+                          <td>{createdAt.toFormat('yyyy-MM-dd HH:mm:ss')}</td>
+                          <td>{problem?.code}</td>
+                          <td>{problem?.title}</td>
+                          <td className={'text-right'}>{answer?.point ?? '--'} pt</td>
+                          <td className={'text-center'}>{answer.point != null ? '○' : '採点中'}</td>
+                          <td>
+                            <a href={'#preview'} className={'link'}
+                               onClick={() => setSelectedAnswerId(answer.id)}>投稿内容</a>
+                          </td>
+                        </tr>
+                    );
+                  })}
+              <tr>
+              </tr>
+              </tbody>
+            </table>
+          </div>
+          {selectedAnswer != null && (
+              <div className={'pt-8'} id={'preview'}>
+                <ICTSCCard>
+                  <div className={'flex flex-row justify-between pb-4'}>
+                    <div className={'flex flex-row items-center'}>
+                      {selectedAnswer.point !== null && (
+                          <div className={'pr-2'}>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={3}
+                                 stroke="green" className="w-6 h-6">
+                              <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
+                            </svg>
+                          </div>
+                      )}
+                      チーム: {selectedAnswer.user_group.name}({selectedAnswer.user_group.organization})
+                    </div>
+                    <div>
+                      {DateTime.fromISO(selectedAnswer.created_at).toFormat('yyyy-MM-dd HH:mm:ss')}
+                    </div>
+                  </div>
+                  <MarkdownPreview content={selectedAnswer.body}/>
+                </ICTSCCard>
+              </div>
+          )}
         </div>
       </>
   )

diff --git a/yarn.lock b/yarn.lock
@@ -188,6 +188,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/luxon@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-3.2.0.tgz#99901b4ab29a5fdffc88fff59b3b47fbfbe0557b"
+  integrity sha512-lGmaGFoaXHuOLXFvuju2bfvZRqxAqkHPx9Y9IQdQABrinJJshJwfNCKV+u7rR3kJbiqfTF/NhOkcxxAFrObyaA==
+
 "@types/[email protected]":
   version "18.11.9"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.9.tgz#02d013de7058cea16d36168ef2fc653464cfbad4"
@@ -1626,6 +1631,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+luxon@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.2.0.tgz#7962c5dafcd3623e70e222882be49b381e7a8718"
+  integrity sha512-Namj3XqoJjFekq/JHQEaaAv4zyE/fyyDBrMEBnIL2s/X54SC8W5Ea0uej1TRXUArWec8OojsAVsGBYhNRjpMVw==
+
 markdown-it-anchor@^8.4.1:
   version "8.6.5"
   resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-8.6.5.tgz#30c4bc5bbff327f15ce3c429010ec7ba75e7b5f8"