chore: update statistics view

web/src/components/HomeSidebar/HomeSidebar.tsx

@@ -1,7 +1,6 @@
 import clsx from "clsx";
 import SearchBar from "@/components/SearchBar";
 import UserStatisticsView from "@/components/UserStatisticsView";
-import useCurrentUser from "@/hooks/useCurrentUser";
 import TagsSection from "./TagsSection";
 
 interface Props {
@@ -9,8 +8,6 @@ interface Props {
 }
 
 const HomeSidebar = (props: Props) => {
-  const currentUser = useCurrentUser();
-
   return (
     <aside
       className={clsx(
@@ -19,7 +16,7 @@ const HomeSidebar = (props: Props) => {
       )}
     >
       <SearchBar />
-      <UserStatisticsView user={currentUser} />
+      <UserStatisticsView />
       <TagsSection />
     </aside>
   );

web/src/components/TimelineSidebar/TimelineSidebar.tsx

@@ -1,5 +1,4 @@
 import clsx from "clsx";
-import useCurrentUser from "@/hooks/useCurrentUser";
 import TagsSection from "../HomeSidebar/TagsSection";
 import SearchBar from "../SearchBar";
 import UserStatisticsView from "../UserStatisticsView";
@@ -9,8 +8,6 @@ interface Props {
 }
 
 const TimelineSidebar = (props: Props) => {
-  const currentUser = useCurrentUser();
-
   return (
     <aside
       className={clsx(
@@ -19,7 +16,7 @@ const TimelineSidebar = (props: Props) => {
       )}
     >
       <SearchBar />
-      <UserStatisticsView user={currentUser} />
+      <UserStatisticsView />
       <TagsSection />
     </aside>
   );

web/src/components/UserStatisticsView.tsx

@@ -4,16 +4,12 @@ import { useState } from "react";
 import toast from "react-hot-toast";
 import { memoServiceClient } from "@/grpcweb";
 import useAsyncEffect from "@/hooks/useAsyncEffect";
+import useCurrentUser from "@/hooks/useCurrentUser";
 import { useFilterStore } from "@/store/module";
 import { useMemoStore } from "@/store/v1";
-import { User } from "@/types/proto/api/v1/user_service";
 import { useTranslate } from "@/utils/i18n";
 import Icon from "./Icon";
 
-interface Props {
-  user: User;
-}
-
 interface UserMemoStats {
   link: number;
   taskList: number;
@@ -21,16 +17,15 @@ interface UserMemoStats {
   incompleteTasks: number;
 }
 
-const UserStatisticsView = (props: Props) => {
-  const { user } = props;
+const UserStatisticsView = () => {
   const t = useTranslate();
+  const currentUser = useCurrentUser();
   const memoStore = useMemoStore();
   const filterStore = useFilterStore();
   const [memoAmount, setMemoAmount] = useState(0);
   const [isRequesting, setIsRequesting] = useState(false);
   const [memoStats, setMemoStats] = useState<UserMemoStats>({ link: 0, taskList: 0, code: 0, incompleteTasks: 0 });
-  const days = Math.ceil((Date.now() - user.createTime!.getTime()) / 86400000);
-  const memos = Object.values(memoStore.getState().memoMapByName);
+  const days = Math.ceil((Date.now() - currentUser.createTime!.getTime()) / 86400000);
   const filter = filterStore.state;
 
   useAsyncEffect(async () => {
@@ -56,7 +51,7 @@ const UserStatisticsView = (props: Props) => {
     setMemoStats(memoStats);
     setMemoAmount(properties.length);
     setIsRequesting(false);
-  }, [memos.length, user.name]);
+  }, [memoStore.stateId]);
 
   const handleRebuildMemoTags = async () => {
     await memoServiceClient.rebuildMemoProperty({
@@ -117,20 +112,24 @@ const UserStatisticsView = (props: Props) => {
             onClick={() => filterStore.setMemoPropertyFilter({ hasTaskList: !filter.memoPropertyFilter?.hasTaskList })}
           >
             <div className="w-auto flex justify-start items-center mr-1">
-              <Icon.CheckCircle className="w-4 h-auto mr-1" />
+              {memoStats.incompleteTasks > 0 ? (
+                <Icon.ListTodo className="w-4 h-auto mr-1" />
+              ) : (
+                <Icon.CheckCircle className="w-4 h-auto mr-1" />
+              )}
               <span className="block text-sm">{t("memo.to-do")}</span>
             </div>
-            {memoStats.incompleteTasks > 0 && (
-              <>
-                <Tooltip title={"Done"} placement="top" arrow>
-                  <span className="text-sm truncate">{memoStats.taskList - memoStats.incompleteTasks}</span>
-                </Tooltip>
-                <span className="text-sm font-mono opacity-50">/</span>
-              </>
-            )}
-            <Tooltip title={"Total"} placement="top" arrow>
+            {memoStats.incompleteTasks > 0 ? (
+              <Tooltip title={"Done / Total"} placement="top" arrow>
+                <div className="text-sm flex flex-row items-start justify-center">
+                  <span className="truncate">{memoStats.taskList - memoStats.incompleteTasks}</span>
+                  <span className="font-mono opacity-50">/</span>
+                  <span className="truncate">{memoStats.taskList}</span>
+                </div>
+              </Tooltip>
+            ) : (
               <span className="text-sm truncate">{memoStats.taskList}</span>
-            </Tooltip>
+            )}
           </div>
           <div
             className={clsx(

web/src/store/v1/memo.ts

@@ -1,13 +1,18 @@
+import { uniqueId } from "lodash-es";
 import { create } from "zustand";
 import { combine } from "zustand/middleware";
 import { memoServiceClient } from "@/grpcweb";
 import { CreateMemoRequest, ListMemosRequest, Memo } from "@/types/proto/api/v1/memo_service";
 
 interface State {
+  // stateId is used to identify the store instance state.
+  // It should be update when any state change.
+  stateId: string;
   memoMapByName: Record<string, Memo>;
 }
 
 const getDefaultState = (): State => ({
+  stateId: uniqueId(),
   memoMapByName: {},
 });
 
@@ -21,7 +26,7 @@ export const useMemoStore = create(
       for (const memo of memos) {
         memoMap[memo.name] = memo;
       }
-      set({ memoMapByName: memoMap });
+      set({ stateId: uniqueId(), memoMapByName: memoMap });
       return { memos, nextPageToken };
     },
     getOrFetchMemoByName: async (name: string, options?: { skipCache?: boolean; skipStore?: boolean }) => {
@@ -36,7 +41,7 @@ export const useMemoStore = create(
       });
       if (!options?.skipStore) {
         memoMap[name] = memo;
-        set({ memoMapByName: memoMap });
+        set({ stateId: uniqueId(), memoMapByName: memoMap });
       }
       return memo;
     },
@@ -51,7 +56,7 @@ export const useMemoStore = create(
       for (const memo of memos) {
         memoMap[memo.name] = memo;
       }
-      set({ memoMapByName: memoMap });
+      set({ stateId: uniqueId(), memoMapByName: memoMap });
       return memos;
     },
     getMemoByUid: (uid: string) => {
@@ -62,7 +67,7 @@ export const useMemoStore = create(
       const memo = await memoServiceClient.createMemo(request);
       const memoMap = get().memoMapByName;
       memoMap[memo.name] = memo;
-      set({ memoMapByName: memoMap });
+      set({ stateId: uniqueId(), memoMapByName: memoMap });
       return memo;
     },
     updateMemo: async (update: Partial<Memo>, updateMask: string[]) => {
@@ -73,7 +78,7 @@ export const useMemoStore = create(
 
       const memoMap = get().memoMapByName;
       memoMap[memo.name] = memo;
-      set({ memoMapByName: memoMap });
+      set({ stateId: uniqueId(), memoMapByName: memoMap });
       return memo;
     },
     deleteMemo: async (name: string) => {
@@ -83,7 +88,7 @@ export const useMemoStore = create(
 
       const memoMap = get().memoMapByName;
       delete memoMap[name];
-      set({ memoMapByName: memoMap });
+      set({ stateId: uniqueId(), memoMapByName: memoMap });
     },
   })),
 );
@@ -93,7 +98,7 @@ export const useMemoList = () => {
   const memos = Object.values(memoStore.getState().memoMapByName);
 
   const reset = () => {
-    memoStore.setState({ memoMapByName: {} });
+    memoStore.setState({ stateId: uniqueId(), memoMapByName: {} });
   };
 
   const size = () => {