chore: tweak refresh button

This commit is contained in:
Steven 2024-06-01 23:27:35 +08:00
parent 78f6064530
commit 8c0bee3840
3 changed files with 41 additions and 39 deletions

View file

@ -1,12 +1,12 @@
import { Divider, Tooltip } from "@mui/joy"; import { Divider, Tooltip } from "@mui/joy";
import { useEffect, useState } from "react"; import { useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { memoServiceClient } from "@/grpcweb"; import { memoServiceClient } from "@/grpcweb";
import useAsyncEffect from "@/hooks/useAsyncEffect";
import { useFilterStore } from "@/store/module"; import { useFilterStore } from "@/store/module";
import { useMemoStore } from "@/store/v1"; import { useMemoStore } from "@/store/v1";
import { User } from "@/types/proto/api/v1/user_service"; import { User } from "@/types/proto/api/v1/user_service";
import { useTranslate } from "@/utils/i18n"; import { useTranslate } from "@/utils/i18n";
import { showCommonDialog } from "./Dialog/CommonDialog";
import Icon from "./Icon"; import Icon from "./Icon";
interface Props { interface Props {
@ -30,51 +30,41 @@ const UserStatisticsView = (props: Props) => {
const days = Math.ceil((Date.now() - user.createTime!.getTime()) / 86400000); const days = Math.ceil((Date.now() - user.createTime!.getTime()) / 86400000);
const memos = Object.values(memoStore.getState().memoMapByName); const memos = Object.values(memoStore.getState().memoMapByName);
useEffect(() => { useAsyncEffect(async () => {
(async () => { setIsRequesting(true);
setIsRequesting(true); const { properties } = await memoServiceClient.listMemoProperties({
const { properties } = await memoServiceClient.listMemoProperties({ name: `memos/-`,
name: `memos/-`, });
}); const memoStats: UserMemoStats = { links: 0, todos: 0, code: 0 };
const memoStats: UserMemoStats = { links: 0, todos: 0, code: 0 }; properties.forEach((property) => {
properties.forEach((property) => { if (property.hasLink) {
if (property.hasLink) { memoStats.links += 1;
memoStats.links += 1; }
} if (property.hasTaskList) {
if (property.hasTaskList) { memoStats.todos += 1;
memoStats.todos += 1; }
} if (property.hasCode) {
if (property.hasCode) { memoStats.code += 1;
memoStats.code += 1; }
} });
}); setMemoStats(memoStats);
setMemoStats(memoStats); setMemoAmount(properties.length);
setMemoAmount(properties.length); setIsRequesting(false);
setIsRequesting(false);
})();
}, [memos.length, user.name]); }, [memos.length, user.name]);
const handleRebuildMemoTags = () => { const handleRebuildMemoTags = async () => {
showCommonDialog({ await memoServiceClient.rebuildMemoProperty({
title: "Refresh", name: "memos/-",
content: "It will refersh memo properties, are you sure?",
style: "warning",
dialogName: "refersh-memo-property-dialog",
onConfirm: async () => {
await memoServiceClient.rebuildMemoProperty({
name: "memos/-",
});
toast.success("Refresh successfully");
window.location.reload();
},
}); });
toast.success("Refresh successfully");
window.location.reload();
}; };
return ( 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="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="group w-full flex flex-row justify-between items-center"> <div className="w-full mb-1 flex flex-row justify-between items-center">
<p className="text-sm font-medium leading-6 dark:text-gray-500">{t("common.statistics")}</p> <p className="text-sm font-medium leading-6 dark:text-gray-500">{t("common.statistics")}</p>
<div className="hidden group-hover:block"> <div className="">
<Tooltip title={"Refresh"} placement="top"> <Tooltip title={"Refresh"} placement="top">
<Icon.RefreshCcw <Icon.RefreshCcw
className="text-gray-400 w-4 h-auto cursor-pointer opacity-60 hover:opacity-100" className="text-gray-400 w-4 h-auto cursor-pointer opacity-60 hover:opacity-100"

View file

@ -1,3 +1,6 @@
export * from "./useLoading"; export * from "./useLoading";
export * from "./useCurrentUser"; export * from "./useCurrentUser";
export * from "./useNavigateTo"; export * from "./useNavigateTo";
export * from "./useAsyncEffect";
export * from "./useFilterWithUrlParams";
export * from "./useResponsiveWidth";

View file

@ -0,0 +1,9 @@
import { DependencyList, useEffect } from "react";
const useAsyncEffect = (effect: () => void | Promise<void>, deps?: DependencyList): void => {
useEffect(() => {
effect();
}, deps);
};
export default useAsyncEffect;