From 0f21aa358653709288a4c7b83a6283ba3019075c Mon Sep 17 00:00:00 2001
From: mackt <1033530438@qq.com>
Date: Fri, 5 Apr 2024 07:42:46 +0800
Subject: [PATCH] update(component): Add thumb and update collect.

---
 src/app/vol/[journalId]/page.tsx | 15 ++++--------
 src/components/Collect.tsx       | 23 +++++++-----------
 src/components/Thumb.tsx         | 40 ++++++++++++++++++++++++++++++++
 3 files changed, 54 insertions(+), 24 deletions(-)
 create mode 100644 src/components/Thumb.tsx

diff --git a/src/app/vol/[journalId]/page.tsx b/src/app/vol/[journalId]/page.tsx
index cda0df6..056c553 100644
--- a/src/app/vol/[journalId]/page.tsx
+++ b/src/app/vol/[journalId]/page.tsx
@@ -3,7 +3,7 @@
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
 
-import { JournalCard, SongCardList, HotJournalList, Comment, Coolect } from '@/components';
+import { JournalCard, SongCardList, HotJournalList, Comment, Collect } from '@/components';
 import { apiGetJournalInfoById, apiGetSongsByJournalNo } from '@/services';
 
 const getData = async (journalId: string) => {
@@ -51,10 +51,9 @@ export default async function JournalDetail({ params: { journalId } }: { params:
             </div>
           </div>
           {/* 收藏 */}
-          <Coolect
-            haveCollect={journalInfo.haveCollect}
-            count={journalInfo.totalCommentReply}
-            text="人收藏"
+          <Collect
+            active={journalInfo.haveCollect}
+            text={`${journalInfo.totalCommentReply}人收藏`}
             id={journalInfo.id}
             type="1"
           />
@@ -68,11 +67,7 @@ export default async function JournalDetail({ params: { journalId } }: { params:
         {/* 卡片 */}
         <SongCardList className="my-40px w-full" songList={songList} />
 
-        <Comment
-          commentList={journalInfo.commentList}
-          totalCommentReply={journalInfo.totalCommentReplyInt}
-          className="w-full"
-        />
+        <Comment journalId={journalInfo.id} totalCommentReply={journalInfo.totalCommentReply} className="w-full" />
       </div>
 
       <div className="w-[346px]">
diff --git a/src/components/Collect.tsx b/src/components/Collect.tsx
index 42905a8..3a845a0 100644
--- a/src/components/Collect.tsx
+++ b/src/components/Collect.tsx
@@ -1,3 +1,5 @@
+// 期刊收藏
+
 'use client';
 
 import { useEffect, useState } from 'react';
@@ -5,38 +7,31 @@ import { useEffect, useState } from 'react';
 import { apiCollect } from '@/services';
 
 interface Props {
-  haveCollect: boolean;
+  active: boolean;
   id: string;
   type: string;
   size?: number;
-  count?: string;
   text?: string;
 }
 
-export default function Collect({ haveCollect, id, type, size = 24, count = '0', text = '' }: Props) {
+export default function Collect({ active, id, type, size = 24, text = '' }: Props) {
   const [state, setState] = useState<boolean>(false); // 收藏状态
 
   useEffect(() => {
-    setState(haveCollect);
-  }, [haveCollect]);
+    setState(active);
+  }, [active]);
 
   // 收藏/取消收藏
   const handleCollect = async () => {
-    setState(!state);
+    setState(!state); // 更新收藏状态
     const res = await apiCollect({ isAdd: !state, objectId: id, collectType: type });
-    if (res.code !== 200) {
-      setState(!state);
-    }
+    if (res.code !== 200) setState(!state); // 如果请求失败，回退状态
   };
 
   return (
     <div className="flex flex-row items-center gap-[9px] cursor-pointer group" onClick={handleCollect}>
       {/* 文案 */}
-      {!!text && (
-        <p className="text-[rgba(0,0,0,0.4)] text-[13px] leading-[18.2px] group-hover:text-theme">
-          {`${count}${text}`}
-        </p>
-      )}
+      {!!text && <p className="text-[rgba(0,0,0,0.4)] text-[13px] leading-[18.2px] group-hover:text-theme">{text}</p>}
       {/* 图标 */}
 
       <div
diff --git a/src/components/Thumb.tsx b/src/components/Thumb.tsx
new file mode 100644
index 0000000..42d4132
--- /dev/null
+++ b/src/components/Thumb.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { apiCollect } from '@/services';
+
+interface Props {
+  active: boolean;
+  id: string;
+  type: string;
+  size?: number;
+  text?: string;
+}
+
+export default function Collect({ active, id, type, size = 24, text = '' }: Props) {
+  const [state, setState] = useState<boolean>(false); // 点赞状态
+
+  useEffect(() => {
+    setState(active);
+  }, [active]);
+
+  // 收藏/取消收藏
+  const handleCollect = async () => {
+    setState(!state); // 更新点赞状态
+    const res = await apiCollect({ isAdd: !state, objectId: id, collectType: type });
+    if (res.code !== 200) setState(!state); // 如果请求失败，回退状态
+  };
+
+  return (
+    <div className="flex flex-row items-center gap-[9px] cursor-pointer group" onClick={handleCollect}>
+      {/* 文案 */}
+      {!!text && <p className="text-[rgba(0,0,0,0.4)] text-[13px] leading-[18.2px] group-hover:text-theme">{text}</p>}
+      {/* 图标 */}
+
+      <div
+        className={`w-[${size}px] h-[${size}px] ${state ? 'bg-[url(/img/icon/thumb-active.svg)]' : 'bg-[url(/img/icon/thumb.svg)]'} group-hover:bg-[url(/img/icon/thumb-active.svg)]`}
+      />
+    </div>
+  );
+}