chore: deprecate memo creation stats legacy api

web/src/components/HomeSidebar.tsx

@@ -1,6 +1,6 @@
+import MemoCreationHeatMap from "./MemoCreationHeatMap";
 import SearchBar from "./SearchBar";
 import TagList from "./TagList";
-import UsageHeatMap from "./UsageHeatMap";
 
 const HomeSidebar = () => {
   return (
@@ -8,7 +8,7 @@ const HomeSidebar = () => {
       <div className="px-4 pr-8 mb-4 w-full">
         <SearchBar />
       </div>
-      <UsageHeatMap />
+      <MemoCreationHeatMap />
       <TagList />
     </aside>
   );

web/src/components/MemoCreationHeatMap.tsx

@@ -1,21 +1,26 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { getMemoStats } from "@/helpers/api";
+import { memoServiceClient } from "@/grpcweb";
 import { DAILY_TIMESTAMP } from "@/helpers/consts";
 import { getDateStampByDate, getDateString, getTimeStampByDate } from "@/helpers/datetime";
 import * as utils from "@/helpers/utils";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useNavigateTo from "@/hooks/useNavigateTo";
 import { useGlobalStore } from "@/store/module";
-import { useUserStore, extractUsernameFromName, useMemoStore } from "@/store/v1";
+import { useMemoStore } from "@/store/v1";
 import { useTranslate, Translations } from "@/utils/i18n";
 import "@/less/usage-heat-map.less";
 
+interface DailyUsageStat {
+  timestamp: number;
+  count: number;
+}
+
 const tableConfig = {
   width: 10,
   height: 7,
 };
 
-const getInitialUsageStat = (usedDaysAmount: number, beginDayTimestamp: number): DailyUsageStat[] => {
+const getInitialCreationStats = (usedDaysAmount: number, beginDayTimestamp: number): DailyUsageStat[] => {
   const initialUsageStat: DailyUsageStat[] = [];
   for (let i = 1; i <= usedDaysAmount; i++) {
     initialUsageStat.push({
@@ -26,15 +31,9 @@ const getInitialUsageStat = (usedDaysAmount: number, beginDayTimestamp: number):
   return initialUsageStat;
 };
 
-interface DailyUsageStat {
-  timestamp: number;
-  count: number;
-}
-
-const UsageHeatMap = () => {
+const MemoCreationHeatMap = () => {
   const t = useTranslate();
   const navigateTo = useNavigateTo();
-  const userStore = useUserStore();
   const user = useCurrentUser();
   const memoStore = useMemoStore();
   const todayTimeStamp = getDateStampByDate(Date.now());
@@ -46,44 +45,30 @@ const UsageHeatMap = () => {
   const usedDaysAmount = (tableConfig.width - 1) * tableConfig.height + todayDay;
   const beginDayTimestamp = todayTimeStamp - usedDaysAmount * DAILY_TIMESTAMP;
   const [memoAmount, setMemoAmount] = useState(0);
-  const [createdDays, setCreatedDays] = useState(0);
-  const [allStat, setAllStat] = useState<DailyUsageStat[]>(getInitialUsageStat(usedDaysAmount, beginDayTimestamp));
+  const [creationStatus, setCreationStatus] = useState<DailyUsageStat[]>(getInitialCreationStats(usedDaysAmount, beginDayTimestamp));
   const containerElRef = useRef<HTMLDivElement>(null);
   const memos = Object.values(memoStore.getState().memoMapById);
-
-  useEffect(() => {
-    userStore.getOrFetchUserByUsername(extractUsernameFromName(user.name)).then((user) => {
-      if (!user) {
-        return;
-      }
-      setCreatedDays(Math.ceil((Date.now() - getTimeStampByDate(user.createTime)) / 1000 / 3600 / 24));
-    });
-  }, [user.name]);
+  const createdDays = Math.ceil((Date.now() - getTimeStampByDate(user.createTime)) / 1000 / 3600 / 24);
 
   useEffect(() => {
     if (memos.length === 0) {
       return;
     }
 
-    getMemoStats(extractUsernameFromName(user.name))
-      .then(({ data }) => {
-        setMemoAmount(data.length);
-        const newStat: DailyUsageStat[] = getInitialUsageStat(usedDaysAmount, beginDayTimestamp);
-        for (const record of data) {
-          const index = (getDateStampByDate(record * 1000) - beginDayTimestamp) / (1000 * 3600 * 24) - 1;
-          if (index >= 0) {
-            // because of dailight savings, some days may be 23 hours long instead of 24 hours long
-            // this causes the calculations to yield weird indices such as 40.93333333333
-            // rounding them may not give you the exact day on the heat map, but it's not too bad
-            const exactIndex = +index.toFixed(0);
-            newStat[exactIndex].count += 1;
-          }
-        }
-        setAllStat([...newStat]);
-      })
-      .catch((error) => {
-        console.error(error);
+    (async () => {
+      const { memoCreationStats } = await memoServiceClient.getUserMemosStats({
+        name: user.name,
       });
+      const tempStats = getInitialCreationStats(usedDaysAmount, beginDayTimestamp);
+      Object.entries(memoCreationStats).forEach(([k, v]) => {
+        const dayIndex = Math.floor((getDateStampByDate(k) - beginDayTimestamp) / DAILY_TIMESTAMP) - 1;
+        if (tempStats[dayIndex]) {
+          tempStats[dayIndex].count = v;
+        }
+      });
+      setCreationStatus(tempStats);
+      setMemoAmount(Object.values(memoCreationStats).reduce((acc, cur) => acc + cur, 0));
+    })();
   }, [memos.length, user.name]);
 
   const handleUsageStatItemMouseEnter = useCallback((event: React.MouseEvent, item: DailyUsageStat) => {
@@ -118,7 +103,8 @@ const UsageHeatMap = () => {
     <>
       <div className="usage-heat-map-wrapper" ref={containerElRef}>
         <div className="usage-heat-map">
-          {allStat.map((v, i) => {
+          {}
+          {creationStatus.map((v, i) => {
             const count = v.count;
             const colorLevel =
               count <= 0
@@ -167,4 +153,4 @@ const UsageHeatMap = () => {
   );
 };
 
-export default UsageHeatMap;
+export default MemoCreationHeatMap;

web/src/components/kit/DatePicker.tsx

@@ -2,11 +2,10 @@ import { Badge, Button } from "@mui/joy";
 import classNames from "classnames";
 import { useEffect, useRef, useState } from "react";
 import useClickAway from "react-use/lib/useClickAway";
-import { getMemoStats } from "@/helpers/api";
+import { memoServiceClient } from "@/grpcweb";
 import { DAILY_TIMESTAMP } from "@/helpers/consts";
 import { getDateStampByDate, isFutureDate } from "@/helpers/datetime";
 import useCurrentUser from "@/hooks/useCurrentUser";
-import { extractUsernameFromName } from "@/store/v1";
 import { useTranslate } from "@/utils/i18n";
 import Icon from "../Icon";
 import "@/less/common/date-picker.less";
@@ -36,14 +35,17 @@ const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) => {
   }, [datestamp]);
 
   useEffect(() => {
-    getMemoStats(extractUsernameFromName(user.name)).then(({ data }) => {
+    (async () => {
+      const { memoCreationStats } = await memoServiceClient.getUserMemosStats({
+        name: user.name,
+      });
       const m = new Map();
-      for (const record of data) {
-        const date = getDateStampByDate(record * 1000);
+      Object.entries(memoCreationStats).forEach(([k]) => {
+        const date = getDateStampByDate(k);
         m.set(date, true);
-      }
+      });
       setCountByDate(m);
-    });
+    })();
   }, [user.name]);
 
   const firstDate = new Date(currentDateStamp);