From 32e7dbedf983272432a30aaef1bc1bff1cda5fdf Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 17 Sep 2022 22:16:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9C=8D=E5=8A=A1=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=88=B7=E6=96=B0=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

并优化Loading态样式，增加过渡动画
---
 client/shared/cache/utils.ts                  | 26 +++++++++-
 .../hooks/model/useAvailableServices.ts       | 17 +++++--
 .../shared/i18n/langs/en-US/translation.json  |  1 +
 .../shared/i18n/langs/zh-CN/translation.json  |  1 +
 client/web/src/components/Loading.tsx         | 16 ++++--
 .../components/modals/SettingsView/Status.tsx | 49 +++++++++++--------
 6 files changed, 79 insertions(+), 31 deletions(-)

diff --git a/client/shared/cache/utils.ts b/client/shared/cache/utils.ts
index 24bae2d9..1ca7eda9 100644
--- a/client/shared/cache/utils.ts
+++ b/client/shared/cache/utils.ts
@@ -15,12 +15,34 @@ export function buildCachedRequest<R, F extends (...args: any) => Promise<R>>(
   name: string,
   fn: F,
   options?: FetchQueryOptions
-): F {
-  return ((...args: any) => {
+): F & {
+  /**
+   * 根据name重新获取数据
+   */
+  refetch: () => Promise<void>;
+  /**
+   * 清空name相关缓存
+   */
+  clearCache: () => void;
+} {
+  const req = ((...args: any) => {
     return queryClient.fetchQuery(
       [name, JSON.stringify(args)],
       () => fn(...args),
       options
     );
   }) as any;
+
+  const refetch = () => {
+    return queryClient.refetchQueries([name]);
+  };
+
+  const clearCache = () => {
+    queryClient.removeQueries([name]);
+  };
+
+  req.refetch = refetch;
+  req.clearCache = clearCache;
+
+  return req;
 }
diff --git a/client/shared/hooks/model/useAvailableServices.ts b/client/shared/hooks/model/useAvailableServices.ts
index ead3c4da..a8866223 100644
--- a/client/shared/hooks/model/useAvailableServices.ts
+++ b/client/shared/hooks/model/useAvailableServices.ts
@@ -1,13 +1,24 @@
+import { useEffect } from 'react';
 import { fetchAvailableServices } from '../../model/common';
-import { useAsync } from '../useAsync';
+import { useAsyncFn } from '../useAsyncFn';
+import { useMemoizedFn } from '../useMemoizedFn';
 
 /**
  * 用于监测服务是否可用的hooks
  */
 export function useAvailableServices() {
-  const { loading, value: availableServices } = useAsync(() =>
+  const [{ loading, value: availableServices }, fetch] = useAsyncFn(() =>
     fetchAvailableServices()
   );
 
-  return { loading, availableServices };
+  useEffect(() => {
+    fetch();
+  }, []);
+
+  const refetch = useMemoizedFn(async () => {
+    fetchAvailableServices.clearCache();
+    fetch();
+  });
+
+  return { loading, availableServices, refetch };
 }
diff --git a/client/shared/i18n/langs/en-US/translation.json b/client/shared/i18n/langs/en-US/translation.json
index 38f8b85b..b452e7bc 100644
--- a/client/shared/i18n/langs/en-US/translation.json
+++ b/client/shared/i18n/langs/en-US/translation.json
@@ -209,6 +209,7 @@
   "kb55c8dba": "Invite Member",
   "kb5a17e73": "Leave group",
   "kb6f1c83f": "What do you want to call you?",
+  "kb76d94e0": "Refresh",
   "kb7a57f24": "Plugin Registry Service",
   "kb8185132": "Or",
   "kb96b79c5": "Allow management of invitation links",
diff --git a/client/shared/i18n/langs/zh-CN/translation.json b/client/shared/i18n/langs/zh-CN/translation.json
index 93968847..d1177c8a 100644
--- a/client/shared/i18n/langs/zh-CN/translation.json
+++ b/client/shared/i18n/langs/zh-CN/translation.json
@@ -209,6 +209,7 @@
   "kb55c8dba": "邀请成员",
   "kb5a17e73": "退出群组",
   "kb6f1c83f": "想要让大家如何称呼你",
+  "kb76d94e0": "刷新",
   "kb7a57f24": "插件中心服务",
   "kb8185132": "或",
   "kb96b79c5": "允许管理邀请链接",
diff --git a/client/web/src/components/Loading.tsx b/client/web/src/components/Loading.tsx
index dc9645ff..5ca5392a 100644
--- a/client/web/src/components/Loading.tsx
+++ b/client/web/src/components/Loading.tsx
@@ -12,11 +12,17 @@ export const Loading: React.FC<LoadingProps> = React.memo((props) => {
 
   return (
     <div className={clsx('relative', className)} style={style}>
-      {spinning && (
-        <div className="absolute inset-0 z-10 bg-white bg-opacity-20 flex justify-center items-center">
-          <LoadingSpinner />
-        </div>
-      )}
+      <div
+        className={clsx(
+          'absolute inset-0 z-10 bg-white bg-opacity-20 flex justify-center items-center transition-opacity duration-100',
+          {
+            'opacity-0 pointer-events-none': !spinning,
+            'opacity-100': spinning,
+          }
+        )}
+      >
+        <LoadingSpinner />
+      </div>
 
       {props.children}
     </div>
diff --git a/client/web/src/components/modals/SettingsView/Status.tsx b/client/web/src/components/modals/SettingsView/Status.tsx
index ea55f2f8..3d36e4bf 100644
--- a/client/web/src/components/modals/SettingsView/Status.tsx
+++ b/client/web/src/components/modals/SettingsView/Status.tsx
@@ -1,8 +1,9 @@
-import { LoadingSpinner } from '@/components/LoadingSpinner';
 import { pluginInspectServices } from '@/plugin/common';
-import { Icon } from '@/components/Icon';
+import { Icon } from 'tailchat-design';
 import React, { useMemo } from 'react';
 import { t, useAvailableServices } from 'tailchat-shared';
+import { Button } from 'antd';
+import { Loading } from '@/components/Loading';
 
 /**
  * 默认检查服务列表
@@ -71,28 +72,34 @@ export const SettingsStatus: React.FC = React.memo(() => {
     []
   ); // 需要检查服务状态的列表
 
-  const { loading, availableServices } = useAvailableServices();
-
-  if (loading) {
-    return <LoadingSpinner />;
-  }
+  const { loading, availableServices, refetch } = useAvailableServices();
 
   return (
     <div>
-      {inspectServices.map((service) => (
-        <div key={service.name} className="flex items-center">
-          <span className="mr-1">{service.label}:</span>
-          {availableServices?.includes(service.name) ? (
-            <span title={t('当前服务可用')}>
-              <Icon icon="emojione:white-heavy-check-mark" />
-            </span>
-          ) : (
-            <span title={t('服务异常')}>
-              <Icon icon="emojione:cross-mark-button" />
-            </span>
-          )}
-        </div>
-      ))}
+      <Button
+        className="mb-2"
+        type="primary"
+        loading={loading}
+        onClick={refetch}
+      >
+        {t('刷新')}
+      </Button>
+      <Loading spinning={loading}>
+        {inspectServices.map((service) => (
+          <div key={service.name} className="flex items-center">
+            <span className="mr-1">{service.label}:</span>
+            {availableServices?.includes(service.name) ? (
+              <span title={t('当前服务可用')}>
+                <Icon icon="emojione:white-heavy-check-mark" />
+              </span>
+            ) : (
+              <span title={t('服务异常')}>
+                <Icon icon="emojione:cross-mark-button" />
+              </span>
+            )}
+          </div>
+        ))}
+      </Loading>
     </div>
   );
 });