From ea48a28ccbccd9a6472ad94def6d9ef890af082e Mon Sep 17 00:00:00 2001
From: an-lee <an.lee.work@gmail.com>
Date: Tue, 16 Jul 2024 18:02:47 +0800
Subject: [PATCH] Feat display chapter finishes count (#813)

* display chapter finishes count

* update style

* display posts from all users as default
---
 .../components/courses/chapter-card.tsx       | 35 ++++++++++++-------
 .../components/courses/chapter-content.tsx    | 12 +++++--
 .../components/posts/post-recording.tsx       |  2 +-
 enjoy/src/renderer/components/posts/posts.tsx |  4 +--
 enjoy/src/types/chapter.d.ts                  |  1 +
 5 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/enjoy/src/renderer/components/courses/chapter-card.tsx b/enjoy/src/renderer/components/courses/chapter-card.tsx
index bb0d7e77..49378d1e 100644
--- a/enjoy/src/renderer/components/courses/chapter-card.tsx
+++ b/enjoy/src/renderer/components/courses/chapter-card.tsx
@@ -1,4 +1,4 @@
-import { CheckCircleIcon } from "lucide-react";
+import { CheckCircleIcon, UsersIcon } from "lucide-react";
 import { Link } from "react-router-dom";
 
 export const ChapterCard = (props: {
@@ -10,21 +10,32 @@ export const ChapterCard = (props: {
     <Link
       to={`/courses/${chapter.courseId}/chapters/${chapter.sequence}`}
       key={chapter.id}
-      className="p-4 border hover:shadow cursor-pointer rounded-lg relative"
+      className="p-2 border hover:shadow cursor-pointer rounded-lg relative"
     >
+      <div className="flex items-center justify-start space-x-1 text-muted-foreground mb-1">
+        <CheckCircleIcon
+          className={`w-4 h-4 ${
+            active
+              ? "text-yellow-500"
+              : chapter.finished
+              ? "text-green-600"
+              : "text-muted-foreground"
+          }`}
+        />
+      </div>
       <div className="text-center text-sm font-bold font-mono mb-2">
         # {chapter.sequence}
       </div>
-      <div className="text-center font-mono line-clamp-1">{chapter.title}</div>
-      <CheckCircleIcon
-        className={`absolute top-2 left-2 w-4 h-4 ${
-          active
-            ? "text-yellow-500"
-            : chapter.finished
-            ? "text-green-600"
-            : "text-muted-foreground"
-        }`}
-      />
+      <div className="text-center font-mono line-clamp-1 mb-2">
+        {chapter.title}
+      </div>
+      {typeof chapter.finishesCount === "number" &&
+        chapter.finishesCount > 0 && (
+          <div className="flex items-center justify-end space-x-1 text-muted-foreground">
+            <span className="text-xs">{chapter.finishesCount}</span>
+            <UsersIcon className="w-3 h-3" />
+          </div>
+        )}
     </Link>
   );
 };
diff --git a/enjoy/src/renderer/components/courses/chapter-content.tsx b/enjoy/src/renderer/components/courses/chapter-content.tsx
index 0be94893..9794b793 100644
--- a/enjoy/src/renderer/components/courses/chapter-content.tsx
+++ b/enjoy/src/renderer/components/courses/chapter-content.tsx
@@ -4,7 +4,7 @@ import { t } from "i18next";
 import { useContext, useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { ExampleContent, MarkdownWrapper } from "@renderer/components";
-import { CheckCircleIcon } from "lucide-react";
+import { CheckCircleIcon, UsersIcon } from "lucide-react";
 
 export const ChapterContent = (props: {
   chapter: ChapterType;
@@ -45,10 +45,18 @@ export const ChapterContent = (props: {
   return (
     <div className="">
       <div className="flex items-center justify-between mb-2">
-        <div className="">
+        <div className="flex items-center space-x-2">
           <CheckCircleIcon
             className={`w-4 h-4 ${chapter.finished ? "text-green-600" : ""}`}
           />
+
+          {typeof chapter.finishesCount === "number" &&
+            chapter.finishesCount > 0 && (
+              <div className="flex items-center space-x-1 text-muted-foreground">
+                <UsersIcon className="w-4 h-4" />
+                <span className="text-sm">{chapter.finishesCount}</span>
+              </div>
+            )}
         </div>
         <div className="flex items-center space-x-2">
           {chapter.sequence > 1 && (
diff --git a/enjoy/src/renderer/components/posts/post-recording.tsx b/enjoy/src/renderer/components/posts/post-recording.tsx
index a5d115f7..54185fec 100644
--- a/enjoy/src/renderer/components/posts/post-recording.tsx
+++ b/enjoy/src/renderer/components/posts/post-recording.tsx
@@ -52,7 +52,7 @@ export const PostRecording = (props: {
       />
 
       {recording.pronunciationAssessment && (
-        <div className="my-2">
+        <div className="my-2 flex justify-end">
           <PronunciationAssessmentScoreDetail
             assessment={recording.pronunciationAssessment}
           />
diff --git a/enjoy/src/renderer/components/posts/posts.tsx b/enjoy/src/renderer/components/posts/posts.tsx
index f429b169..406fff6b 100644
--- a/enjoy/src/renderer/components/posts/posts.tsx
+++ b/enjoy/src/renderer/components/posts/posts.tsx
@@ -20,9 +20,7 @@ export const Posts = (props: { userId?: string; by?: string }) => {
   const [type, setType] = useState<
     "all" | "recording" | "medium" | "story" | "prompt" | "gpt" | "note"
   >("all");
-  const [by, setBy] = useState<"all" | "following">(
-    userId ? "all" : "following"
-  );
+  const [by, setBy] = useState<"all" | "following">("all");
   const [posts, setPosts] = useState<PostType[]>([]);
   const [nextPage, setNextPage] = useState(1);
 
diff --git a/enjoy/src/types/chapter.d.ts b/enjoy/src/types/chapter.d.ts
index 8d07d408..6e536621 100644
--- a/enjoy/src/types/chapter.d.ts
+++ b/enjoy/src/types/chapter.d.ts
@@ -6,6 +6,7 @@ type ChapterType = {
   title: string;
   content: string;
   course?: CourseType;
+  finishesCount?: number;
   translations?: {
     language: string;
     content: string;