diff --git a/public/crown.png b/public/crown.png new file mode 100644 index 00000000..efa99119 Binary files /dev/null and b/public/crown.png differ diff --git a/src/app/(withAuth)/courses/[courseId]/page.tsx b/src/app/(withAuth)/courses/[courseId]/page.tsx index 7333cc20..7abe6381 100644 --- 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>([]); 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 }) => { - - + + @@ -92,7 +115,18 @@ const CoursePage: NextPage<{ params: { courseId: string } }> = ({ params }) => { ))} diff --git a/src/app/lib/actions.ts b/src/app/lib/actions.ts index a437c5c9..efe1e3e3 100644 --- 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> { + try { + const userSolvedProblems = await prisma.userSolvedProblem.findMany({ + where: { + userId, + courseId, + }, + select: { + programId: true, + languageId: true, + }, + }); + return userSolvedProblems; + } catch (error) { + console.error(error); + return []; + } +}
プログラム進捗 + プログラム + + 進捗 +
-

completedProblemCount / {SPECIFIED_COMPLETION_COUNT}

+ +

+ {countUserSolvedProblems(programId, selectedLanguageId)} /{' '} + {SPECIFIED_COMPLETION_COUNT} +

+ {countUserSolvedProblems(programId, selectedLanguageId) >= + SPECIFIED_COMPLETION_COUNT && ( + + 完了の王冠 + + )} +