feat: update statistics view

server/router/api/v1/memo_service.go

@@ -563,6 +563,44 @@ func (s *APIV1Service) ExportMemos(ctx context.Context, request *v1pb.ExportMemo
 	}, nil
 }
 
+func (s *APIV1Service) ListMemoProperties(ctx context.Context, request *v1pb.ListMemoPropertiesRequest) (*v1pb.ListMemoPropertiesResponse, error) {
+	user, err := s.GetCurrentUser(ctx)
+	if err != nil {
+		return nil, status.Errorf(codes.Internal, "failed to get current user")
+	}
+
+	normalRowStatus := store.Normal
+	memoFind := &store.FindMemo{
+		CreatorID:       &user.ID,
+		RowStatus:       &normalRowStatus,
+		ExcludeComments: true,
+		// Default exclude content for performance.
+		ExcludeContent: true,
+	}
+	if request.Name != "memos/-" {
+		memoID, err := ExtractMemoIDFromName(request.Name)
+		if err != nil {
+			return nil, status.Errorf(codes.InvalidArgument, "invalid memo name: %v", err)
+		}
+		memoFind.ID = &memoID
+	}
+
+	memos, err := s.Store.ListMemos(ctx, memoFind)
+	if err != nil {
+		return nil, status.Errorf(codes.Internal, "failed to list memos")
+	}
+
+	properties := []*v1pb.MemoProperty{}
+	for _, memo := range memos {
+		if memo.Payload.Property != nil {
+			properties = append(properties, convertMemoPropertyFromStore(memo.Payload.Property))
+		}
+	}
+	return &v1pb.ListMemoPropertiesResponse{
+		Properties: properties,
+	}, nil
+}
+
 func (s *APIV1Service) RebuildMemoProperty(ctx context.Context, request *v1pb.RebuildMemoPropertyRequest) (*emptypb.Empty, error) {
 	user, err := s.GetCurrentUser(ctx)
 	if err != nil {

web/src/components/UserStatisticsView.tsx

@@ -9,13 +9,20 @@ interface Props {
   user: User;
 }
 
+interface UserMemoStats {
+  links: number;
+  todos: number;
+  code: number;
+}
+
 const UserStatisticsView = (props: Props) => {
   const { user } = props;
   const t = useTranslate();
-  const tagStore = useTagStore();
   const memoStore = useMemoStore();
+  const tagStore = useTagStore();
   const [memoAmount, setMemoAmount] = useState(0);
   const [isRequesting, setIsRequesting] = useState(false);
+  const [memoStats, setMemoStats] = useState<UserMemoStats>({ links: 0, todos: 0, code: 0 });
   const days = Math.ceil((Date.now() - user.createTime!.getTime()) / 86400000);
   const memos = Object.values(memoStore.getState().memoMapByName);
   const tags = tagStore.sortedTags().length;
@@ -27,40 +34,75 @@ const UserStatisticsView = (props: Props) => {
 
     (async () => {
       setIsRequesting(true);
-      const { stats } = await memoServiceClient.getUserMemosStats({
+      const { properties } = await memoServiceClient.listMemoProperties({
-        name: user.name,
+        name: `memos/-`,
-        timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
       });
+      const memoStats: UserMemoStats = { links: 0, todos: 0, code: 0 };
+      properties.forEach((property) => {
+        if (property.hasLink) {
+          memoStats.links += 1;
+        }
+        if (property.hasTaskList) {
+          memoStats.todos += 1;
+        }
+        if (property.hasCode) {
+          memoStats.code += 1;
+        }
+      });
+      setMemoStats(memoStats);
+      setMemoAmount(properties.length);
       setIsRequesting(false);
-      setMemoAmount(Object.values(stats).reduce((acc, cur) => acc + cur, 0));
     })();
   }, [memos.length, user.name]);
 
   return (
     <div className="w-full border mt-2 py-2 px-3 rounded-lg space-y-0.5 text-gray-500 dark:text-gray-400 bg-zinc-50 dark:bg-zinc-900 dark:border-zinc-800">
-      <div className="mb-1 w-full flex flex-row justify-between items-center">
+      <div className="w-full flex flex-row justify-between items-center">
         <p className="text-sm font-medium leading-6 dark:text-gray-500">{t("common.statistics")}</p>
       </div>
-      <div className="w-full flex justify-between items-center">
+      <div className="w-full grid grid-cols-2 gap-x-4">
-        <div className="w-full flex justify-start items-center">
+        <div className="w-full flex justify-between items-center">
-          <Icon.CalendarDays className="w-4 h-auto mr-1" />
+          <div className="w-auto flex justify-start items-center">
-          <span className="block text-base sm:text-sm">{t("common.days")}</span>
+            <Icon.CalendarDays className="w-4 h-auto mr-1" />
+            <span className="block text-base sm:text-sm">{t("common.days")}</span>
+          </div>
+          <span>{days}</span>
         </div>
-        <span className="font-mono">{days}</span>
+        <div className="w-full flex justify-between items-center">
-      </div>
+          <div className="w-auto flex justify-start items-center">
-      <div className="w-full flex justify-between items-center">
+            <Icon.Library className="w-4 h-auto mr-1" />
-        <div className="w-full flex justify-start items-center">
+            <span className="block text-base sm:text-sm">{t("common.memos")}</span>
-          <Icon.Library className="w-4 h-auto mr-1" />
+          </div>
-          <span className="block text-base sm:text-sm">{t("common.memos")}</span>
+          {isRequesting ? <Icon.Loader className="animate-spin w-4 h-auto text-gray-400" /> : <span className="">{memoAmount}</span>}
         </div>
-        {isRequesting ? <Icon.Loader className="animate-spin w-4 h-auto text-gray-400" /> : <span className="font-mono">{memoAmount}</span>}
+        <div className="w-full flex justify-between items-center">
-      </div>
+          <div className="w-auto flex justify-start items-center">
-      <div className="w-full flex justify-between items-center">
+            <Icon.Hash className="w-4 h-auto mr-1" />
-        <div className="w-full flex justify-start items-center">
+            <span className="block text-base sm:text-sm">{t("common.tags")}</span>
-          <Icon.Tags className="w-4 h-auto mr-1" />
+          </div>
-          <span className="block text-base sm:text-sm">{t("common.tags")}</span>
+          <span>{tags}</span>
+        </div>
+        <div className="w-full flex justify-between items-center">
+          <div className="w-auto flex justify-start items-center">
+            <Icon.Link className="w-4 h-auto mr-1" />
+            <span className="block text-base sm:text-sm">Links</span>
+          </div>
+          <span className="">{memoStats.links}</span>
+        </div>
+        <div className="w-full flex justify-between items-center">
+          <div className="w-auto flex justify-start items-center">
+            <Icon.CheckCircle className="w-4 h-auto mr-1" />
+            <span className="block text-base sm:text-sm">Todos</span>
+          </div>
+          <span className="">{memoStats.todos}</span>
+        </div>
+        <div className="w-full flex justify-between items-center">
+          <div className="w-auto flex justify-start items-center">
+            <Icon.Code2 className="w-4 h-auto mr-1" />
+            <span className="block text-base sm:text-sm">Code</span>
+          </div>
+          <span className="">{memoStats.code}</span>
         </div>
-        <span className="font-mono">{tags}</span>
       </div>
     </div>
   );