feat: display progress and complete status

exKAZUu-Research · Feb 13, 2024 · 46651a2 · 46651a2
1 parent 9cd9c33
commit 46651a2
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 3 deletions.
diff --git a/public/crown.png b/public/crown.png
diff --git a/src/app/(withAuth)/courses/[courseId]/page.tsx b/src/app/(withAuth)/courses/[courseId]/page.tsx
@@ -17,10 +17,13 @@ import {
   Tr,
   Td,
   Th,
+  Flex,
 } from '@chakra-ui/react';
 import type { NextPage } from 'next';
+import Image from 'next/image';
 import NextLink from 'next/link';
 import React, { useEffect, useState } from 'react';
+import { useSessionContext } from 'supertokens-auth-react/recipe/session';
 
 import {
   courseIdToProgramIdLists,
@@ -30,11 +33,18 @@ import {
 } from '../../../../problems/problemData';
 import { getLanguageIdFromSessionStorage, setLanguageIdToSessionStorage } from '../../../lib/SessionStorage';
 
+import { getUserSolvedProblems } from '@/src/app/lib/actions';
+
 const CoursePage: NextPage<{ params: { courseId: string } }> = ({ params }) => {
   const [selectedLanguageId, setSelectedLanguageId] = useState('');
+  const [userSolvedProblems, setUserSolvedProblems] = useState<Array<{ programId: string; languageId: string }>>([]);
 
   const SPECIFIED_COMPLETION_COUNT = 2;
 
+  const session = useSessionContext();
+  const userId = session.loading ? '' : session.userId;
+  const courseId = params.courseId;
+
   useEffect(() => {
     setSelectedLanguageId(getLanguageIdFromSessionStorage());
   }, []);
@@ -43,6 +53,15 @@ const CoursePage: NextPage<{ params: { courseId: string } }> = ({ params }) => {
     const inputValue = event.target.value;
     setLanguageIdToSessionStorage(inputValue);
     setSelectedLanguageId(inputValue);
+    getUserSolvedProblems(userId, courseId).then((data) => {
+      setUserSolvedProblems(data);
+    });
+  };
+
+  const countUserSolvedProblems = (programId: string, languageId: string): number => {
+    return userSolvedProblems.filter(
+      (userSolvedProblem) => userSolvedProblem.programId === programId && userSolvedProblem.languageId === languageId
+    ).length;
   };
 
   return (
@@ -79,8 +98,12 @@ const CoursePage: NextPage<{ params: { courseId: string } }> = ({ params }) => {
                     <Table>
                       <Thead>
                         <Tr>
-                          <Th textAlign="left">プログラム</Th>
-                          <Th align="left">進捗</Th>
+                          <Th textAlign="left" width="50%">
+                            プログラム
+                          </Th>
+                          <Th align="left" width="50%">
+                            進捗
+                          </Th>
                         </Tr>
                       </Thead>
                       <Tbody>
@@ -92,7 +115,18 @@ const CoursePage: NextPage<{ params: { courseId: string } }> = ({ params }) => {
                               </NextLink>
                             </Td>
                             <Td>
-                              <p>completedProblemCount / {SPECIFIED_COMPLETION_COUNT}</p>
+                              <Flex>
+                                <p>
+                                  {countUserSolvedProblems(programId, selectedLanguageId)} /{' '}
+                                  {SPECIFIED_COMPLETION_COUNT}
+                                </p>
+                                {countUserSolvedProblems(programId, selectedLanguageId) >=
+                                  SPECIFIED_COMPLETION_COUNT && (
+                                  <Box h={4} ml={2} position={'relative'} w={4}>
+                                    <Image fill alt="完了の王冠" src="/crown.png" />
+                                  </Box>
+                                )}
+                              </Flex>
                             </Td>
                           </Tr>
                         ))}

diff --git a/src/app/lib/actions.ts b/src/app/lib/actions.ts
@@ -22,3 +22,25 @@ export async function createUserSolvedProblem(
     console.error(error);
   }
 }
+
+export async function getUserSolvedProblems(
+  userId: string,
+  courseId: string
+): Promise<Array<{ programId: string; languageId: string }>> {
+  try {
+    const userSolvedProblems = await prisma.userSolvedProblem.findMany({
+      where: {
+        userId,
+        courseId,
+      },
+      select: {
+        programId: true,
+        languageId: true,
+      },
+    });
+    return userSolvedProblems;
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
+}