From e13c84f270892fe331470c501a350ccb85313669 Mon Sep 17 00:00:00 2001
From: Yuki Ito <37338201+ykit00@users.noreply.github.com>
Date: Fri, 16 Feb 2024 20:54:02 +0900
Subject: [PATCH] feat: display lesson progress

---
 .../(withAuth)/courses/[courseId]/Course.tsx  | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/app/(withAuth)/courses/[courseId]/Course.tsx b/src/app/(withAuth)/courses/[courseId]/Course.tsx
index 7c9d0023..67903cb6 100644
--- a/src/app/(withAuth)/courses/[courseId]/Course.tsx
+++ b/src/app/(withAuth)/courses/[courseId]/Course.tsx
@@ -18,6 +18,7 @@ import {
   Td,
   Th,
   Flex,
+  HStack,
 } from '@chakra-ui/react';
 import Image from 'next/image';
 import NextLink from 'next/link';
@@ -55,6 +56,15 @@ export const Course: React.FC<{
     ).length;
   };
 
+  const countCompletedProblems = (programIds: string[], languageId: string): number => {
+    let count = 0;
+
+    for (const programId of programIds) {
+      if (countUserSolvedProblems(programId, languageId) >= SPECIFIED_COMPLETION_COUNT) count++;
+    }
+    return count;
+  };
+
   return (
     <main>
       <Heading as="h1" marginBottom="4">
@@ -79,8 +89,20 @@ export const Course: React.FC<{
             <Accordion allowToggle>
               <AccordionItem>
                 <AccordionButton>
-                  <Box flex="1" textAlign="left">
-                    第{iLesson + 1}回
+                  <Box flex="1">
+                    <HStack spacing="50%">
+                      <Box>第{iLesson + 1}回</Box>
+                      <HStack>
+                        <Box>
+                          Completed {countCompletedProblems(programIds, selectedLanguageId)} / {programIds.length}
+                        </Box>
+                        {countCompletedProblems(programIds, selectedLanguageId) >= programIds.length && (
+                          <Box h={4} ml={2} position={'relative'} w={4}>
+                            <Image fill alt="完了の王冠" src="/crown.png" />
+                          </Box>
+                        )}
+                      </HStack>
+                    </HStack>
                   </Box>
                   <AccordionIcon />
                 </AccordionButton>