YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: update component name

Browse Source
This commit is contained in:
Steven
2024-04-09 20:51:09 +08:00
parent 000b3a7a2c
commit 6028838f03
5 changed files with 9 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
web/src/components/UserStatisticsView.tsx Normal file
View File

@ -0,0 +1,70 @@
import { useEffect, useState } from "react";
import { memoServiceClient } from "@/grpcweb";
import { useTagStore } from "@/store/module";
import { useMemoStore } from "@/store/v1";
import { User } from "@/types/proto/api/v2/user_service";
import { useTranslate } from "@/utils/i18n";
import Icon from "./Icon";
interface Props {
user: User;
}
const UserStatisticsView = (props: Props) => {
const { user } = props;
const t = useTranslate();
const tagStore = useTagStore();
const memoStore = useMemoStore();
const [memoAmount, setMemoAmount] = useState(0);
const [isRequesting, setIsRequesting] = useState(false);
const days = Math.ceil((Date.now() - user.createTime!.getTime()) / 86400000);
const memos = Object.values(memoStore.getState().memoMapByName);
const tags = tagStore.state.tags.length;
useEffect(() => {
if (memos.length === 0) {
return;
}
(async () => {
setIsRequesting(true);
const { stats } = await memoServiceClient.getUserMemosStats({
name: user.name,
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
});
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-md 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">
<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 flex justify-start items-center">
<Icon.CalendarDays className="w-4 h-auto mr-1" />
<span className="block text-base sm:text-sm">{t("common.days")}</span>
</div>
<span className="font-mono">{days}</span>
</div>
<div className="w-full flex justify-between items-center">
<div className="w-full flex justify-start items-center">
<Icon.Library className="w-4 h-auto mr-1" />
<span className="block text-base sm:text-sm">{t("common.memos")}</span>
</div>
{isRequesting ? <Icon.Loader className="animate-spin w-4 h-auto text-gray-400" /> : <span className="font-mono">{memoAmount}</span>}
</div>
<div className="w-full flex justify-between items-center">
<div className="w-full flex justify-start items-center">
<Icon.Hash className="w-4 h-auto mr-1" />
<span className="block text-base sm:text-sm">{t("common.tags")}</span>
</div>
<span className="font-mono">{tags}</span>
</div>
</div>
);
};
export default UserStatisticsView;