From 8c0bee3840a04ef49aa80c0960ffe56f2c7b0d0c Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sat, 1 Jun 2024 23:27:35 +0800
Subject: [PATCH] chore: tweak refresh button

---
 web/src/components/UserStatisticsView.tsx | 68 ++++++++++-------------
 web/src/hooks/index.ts                    |  3 +
 web/src/hooks/useAsyncEffect.ts           |  9 +++
 3 files changed, 41 insertions(+), 39 deletions(-)
 create mode 100644 web/src/hooks/useAsyncEffect.ts

diff --git a/web/src/components/UserStatisticsView.tsx b/web/src/components/UserStatisticsView.tsx
index e9bb6c7c502da..f5c56242183b7 100644
--- a/web/src/components/UserStatisticsView.tsx
+++ b/web/src/components/UserStatisticsView.tsx
@@ -1,12 +1,12 @@
 import { Divider, Tooltip } from "@mui/joy";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import toast from "react-hot-toast";
 import { memoServiceClient } from "@/grpcweb";
+import useAsyncEffect from "@/hooks/useAsyncEffect";
 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 { showCommonDialog } from "./Dialog/CommonDialog";
 import Icon from "./Icon";
 
 interface Props {
@@ -30,51 +30,41 @@ const UserStatisticsView = (props: Props) => {
   const days = Math.ceil((Date.now() - user.createTime!.getTime()) / 86400000);
   const memos = Object.values(memoStore.getState().memoMapByName);
 
-  useEffect(() => {
-    (async () => {
-      setIsRequesting(true);
-      const { properties } = await memoServiceClient.listMemoProperties({
-        name: `memos/-`,
-      });
-      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);
-    })();
+  useAsyncEffect(async () => {
+    setIsRequesting(true);
+    const { properties } = await memoServiceClient.listMemoProperties({
+      name: `memos/-`,
+    });
+    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);
   }, [memos.length, user.name]);
 
-  const handleRebuildMemoTags = () => {
-    showCommonDialog({
-      title: "Refresh",
-      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();
-      },
+  const handleRebuildMemoTags = async () => {
+    await memoServiceClient.rebuildMemoProperty({
+      name: "memos/-",
     });
+    toast.success("Refresh successfully");
+    window.location.reload();
   };
 
   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="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>
-        <div className="hidden group-hover:block">
+        <div className="">
           <Tooltip title={"Refresh"} placement="top">
             <Icon.RefreshCcw
               className="text-gray-400 w-4 h-auto cursor-pointer opacity-60 hover:opacity-100"
diff --git a/web/src/hooks/index.ts b/web/src/hooks/index.ts
index 4e7282ac31c18..881f945893026 100644
--- a/web/src/hooks/index.ts
+++ b/web/src/hooks/index.ts
@@ -1,3 +1,6 @@
 export * from "./useLoading";
 export * from "./useCurrentUser";
 export * from "./useNavigateTo";
+export * from "./useAsyncEffect";
+export * from "./useFilterWithUrlParams";
+export * from "./useResponsiveWidth";
diff --git a/web/src/hooks/useAsyncEffect.ts b/web/src/hooks/useAsyncEffect.ts
new file mode 100644
index 0000000000000..f83d0f0294e8f
--- /dev/null
+++ b/web/src/hooks/useAsyncEffect.ts
@@ -0,0 +1,9 @@
+import { DependencyList, useEffect } from "react";
+
+const useAsyncEffect = (effect: () => void | Promise<void>, deps?: DependencyList): void => {
+  useEffect(() => {
+    effect();
+  }, deps);
+};
+
+export default useAsyncEffect;