From 5c25f2308230d7e02ac1d27b5364864809037c5c Mon Sep 17 00:00:00 2001
From: sealday <zhanglin@daoyoucloud.com>
Date: Tue, 4 Jun 2024 12:03:59 +0800
Subject: [PATCH] fix: get app info (#1107)

Reviewed-on: https://git.daoyoucloud.com/daoyoucloud/tachybase/pulls/1107
---
 .../src/appInfo/CurrentAppInfoProvider.tsx    |  4 +-
 .../src/application/__tests__/hooks.test.tsx  | 39 ++-----------------
 .../components/defaultComponents.tsx          |  2 +-
 .../client/src/application/hooks/index.ts     |  1 -
 .../src/application/hooks/useAppSpin.ts       | 12 ------
 .../client/src/built-in/acl/ACLProvider.tsx   |  4 +-
 .../src/built-in/admin-layout/index.tsx       |  4 +-
 packages/core/client/src/built-in/index.tsx   | 12 +++++-
 .../SystemSettingsProvider.tsx                |  4 +-
 .../CollectionHistoryProvider.tsx             |  4 +-
 .../CollectionManagerProvider.tsx             | 11 +++---
 .../src/schema-component/antd/page/Page.tsx   |  4 +-
 .../client/src/user/CurrentUserProvider.tsx   |  4 +-
 .../@hera/plugin-homepage/src/client/Home.tsx |  5 +--
 .../src/client/DuplicatorProvider.tsx         |  6 +--
 .../plugin-gantt/src/client/index.tsx         | 16 ++++----
 .../plugin-kanban/src/client/index.tsx        | 16 ++++----
 .../plugin-map/src/client/block/index.tsx     |  2 +-
 .../plugin-map/src/client/index.tsx           | 10 ++---
 .../components/antd-mobile/Input/Input.tsx    |  7 ++--
 20 files changed, 53 insertions(+), 114 deletions(-)
 delete mode 100644 packages/core/client/src/application/hooks/useAppSpin.ts

diff --git a/packages/core/client/src/appInfo/CurrentAppInfoProvider.tsx b/packages/core/client/src/appInfo/CurrentAppInfoProvider.tsx
index 62ceebc46..c6b8103d6 100644
--- a/packages/core/client/src/appInfo/CurrentAppInfoProvider.tsx
+++ b/packages/core/client/src/appInfo/CurrentAppInfoProvider.tsx
@@ -1,7 +1,6 @@
 import React, { createContext, useContext } from 'react';
 
 import { useRequest } from '../api-client';
-import { useAppSpin } from '../application/hooks/useAppSpin';
 
 export const CurrentAppInfoContext = createContext(null);
 CurrentAppInfoContext.displayName = 'CurrentAppInfoContext';
@@ -18,12 +17,11 @@ export const useCurrentAppInfo = () => {
   }>(CurrentAppInfoContext);
 };
 export const CurrentAppInfoProvider = (props) => {
-  const { render } = useAppSpin();
   const result = useRequest({
     url: 'app:getInfo',
   });
   if (result.loading) {
-    return render();
+    return;
   }
   return <CurrentAppInfoContext.Provider value={result.data}>{props.children}</CurrentAppInfoContext.Provider>;
 };
diff --git a/packages/core/client/src/application/__tests__/hooks.test.tsx b/packages/core/client/src/application/__tests__/hooks.test.tsx
index 70ecf2d61..cee2582a5 100644
--- a/packages/core/client/src/application/__tests__/hooks.test.tsx
+++ b/packages/core/client/src/application/__tests__/hooks.test.tsx
@@ -1,9 +1,11 @@
-import { render, sleep, screen, waitFor } from '@tachybase/test/client';
 import React from 'react';
+import { render, screen, sleep, waitFor } from '@tachybase/test/client';
+
 import { describe } from 'vitest';
+
 import { Application } from '../Application';
+import { useApp, usePlugin, useRouter } from '../hooks';
 import { Plugin } from '../Plugin';
-import { useApp, usePlugin, useRouter, useAppSpin } from '../hooks';
 
 describe('Application Hooks', () => {
   describe('useApp()', () => {
@@ -59,37 +61,4 @@ describe('Application Hooks', () => {
       await sleep(10);
     });
   });
-
-  describe('useAppSpin()', () => {
-    test('no app, should render ant-design Spin', async () => {
-      const Demo = () => {
-        const spin = useAppSpin();
-        return spin.render();
-      };
-
-      render(<Demo />);
-
-      await waitFor(() => {
-        expect(document.querySelector('.ant-spin')).toBeTruthy();
-      });
-    });
-
-    test('has app, should render AppSpin Component', () => {
-      const Demo = () => {
-        const spin = useAppSpin();
-        return spin.render();
-      };
-
-      const app = new Application({
-        providers: [Demo],
-        components: {
-          AppSpin: () => <div data-testid="content">test</div>,
-        },
-      });
-      const Root = app.getRootComponent();
-      render(<Root></Root>);
-      expect(document.querySelector('.ant-spin')).toBeFalsy();
-      expect(screen.getByTestId('content')).toBeTruthy();
-    });
-  });
 });
diff --git a/packages/core/client/src/application/components/defaultComponents.tsx b/packages/core/client/src/application/components/defaultComponents.tsx
index b8f64f819..a40d33596 100644
--- a/packages/core/client/src/application/components/defaultComponents.tsx
+++ b/packages/core/client/src/application/components/defaultComponents.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { MainComponent } from './MainComponent';
 
diff --git a/packages/core/client/src/application/hooks/index.ts b/packages/core/client/src/application/hooks/index.ts
index dbb36261e..280cb51d9 100644
--- a/packages/core/client/src/application/hooks/index.ts
+++ b/packages/core/client/src/application/hooks/index.ts
@@ -1,4 +1,3 @@
 export * from './useApp';
 export * from './usePlugin';
 export * from './useRouter';
-export * from './useAppSpin';
diff --git a/packages/core/client/src/application/hooks/useAppSpin.ts b/packages/core/client/src/application/hooks/useAppSpin.ts
deleted file mode 100644
index 7f8598bce..000000000
--- a/packages/core/client/src/application/hooks/useAppSpin.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { Spin } from 'antd';
-
-import { useApp } from './useApp';
-
-export const useAppSpin = () => {
-  const app = useApp();
-  return {
-    render: () => (app?.renderComponent ? app?.renderComponent?.('AppSpin') : React.createElement(Spin)),
-  };
-};
diff --git a/packages/core/client/src/built-in/acl/ACLProvider.tsx b/packages/core/client/src/built-in/acl/ACLProvider.tsx
index 3b349c9d3..6b35e0643 100644
--- a/packages/core/client/src/built-in/acl/ACLProvider.tsx
+++ b/packages/core/client/src/built-in/acl/ACLProvider.tsx
@@ -6,7 +6,6 @@ import { Navigate } from 'react-router-dom';
 
 import { useAPIClient, useRequest } from '../../api-client';
 import { useApp } from '../../application';
-import { useAppSpin } from '../../application/hooks/useAppSpin';
 import { useBlockRequestContext } from '../../block-provider/BlockProvider';
 import { useCollection_deprecated, useCollectionManager_deprecated } from '../../collection-manager';
 import { useResourceActionContext } from '../../collection-manager/ResourceActionProvider';
@@ -38,7 +37,6 @@ const getRouteUrl = (props) => {
 export const ACLRolesCheckProvider = (props) => {
   const route = getRouteUrl(props.children.props);
   const { setDesignable } = useDesignable();
-  const { render } = useAppSpin();
   const api = useAPIClient();
   const app = useApp();
   const result = useRequest<{
@@ -68,7 +66,7 @@ export const ACLRolesCheckProvider = (props) => {
     },
   );
   if (result.loading) {
-    return render();
+    return;
   }
   if (result.error) {
     return <Navigate replace to={'/signin'} />;
diff --git a/packages/core/client/src/built-in/admin-layout/index.tsx b/packages/core/client/src/built-in/admin-layout/index.tsx
index a0f5f606f..74cd4f394 100644
--- a/packages/core/client/src/built-in/admin-layout/index.tsx
+++ b/packages/core/client/src/built-in/admin-layout/index.tsx
@@ -22,7 +22,6 @@ import {
   useRequest,
   useSystemSettings,
 } from '../..';
-import { useAppSpin } from '../../application/hooks/useAppSpin';
 import { Plugin } from '../../application/Plugin';
 import { VariablesProvider } from '../../variables';
 
@@ -202,7 +201,6 @@ const MenuEditor = (props) => {
     setCurrent(schema);
     navigate(`/admin/${schema['x-uid']}`);
   };
-  const { render } = useAppSpin();
   const adminSchemaUid = useAdminSchemaUid();
   const { data, loading } = useRequest<{
     data: any;
@@ -320,7 +318,7 @@ const MenuEditor = (props) => {
   );
 
   if (loading) {
-    return render();
+    return;
   }
   return (
     <SchemaIdContext.Provider value={defaultSelectedUid}>
diff --git a/packages/core/client/src/built-in/index.tsx b/packages/core/client/src/built-in/index.tsx
index 751cac93c..6077364fc 100644
--- a/packages/core/client/src/built-in/index.tsx
+++ b/packages/core/client/src/built-in/index.tsx
@@ -36,8 +36,18 @@ interface AppStatusProps {
 }
 
 const AppSpin = () => {
+  // TODO: better loading and mobile loading fix
   return (
-    <Spin style={{ position: 'fixed', top: '50%', left: '50%', fontSize: 72, transform: 'translate(-50%, -50%)' }} />
+    <Spin
+      size="large"
+      style={{
+        position: 'fixed',
+        top: '50%',
+        left: '50%',
+        fontSize: 72 * (window.devicePixelRatio || 1),
+        transform: 'translate(-50%, -50%)',
+      }}
+    />
   );
 };
 
diff --git a/packages/core/client/src/built-in/system-settings/SystemSettingsProvider.tsx b/packages/core/client/src/built-in/system-settings/SystemSettingsProvider.tsx
index 96518724b..692c3feab 100644
--- a/packages/core/client/src/built-in/system-settings/SystemSettingsProvider.tsx
+++ b/packages/core/client/src/built-in/system-settings/SystemSettingsProvider.tsx
@@ -3,7 +3,6 @@ import React, { createContext, ReactNode, useContext } from 'react';
 import { Result } from 'ahooks/es/useRequest/src/types';
 
 import { useRequest } from '../../api-client';
-import { useAppSpin } from '../../application/hooks/useAppSpin';
 
 export const SystemSettingsContext = createContext<Result<any, any>>(null);
 SystemSettingsContext.displayName = 'SystemSettingsContext';
@@ -13,12 +12,11 @@ export const useSystemSettings = () => {
 };
 
 export const SystemSettingsProvider: React.FC<{ children?: ReactNode }> = (props) => {
-  const { render } = useAppSpin();
   const result = useRequest({
     url: 'systemSettings:get/1?appends=logo',
   });
   if (result.loading) {
-    return render();
+    return;
   }
 
   return <SystemSettingsContext.Provider value={result}>{props.children}</SystemSettingsContext.Provider>;
diff --git a/packages/core/client/src/collection-manager/CollectionHistoryProvider.tsx b/packages/core/client/src/collection-manager/CollectionHistoryProvider.tsx
index f44b956c1..3627765ab 100644
--- a/packages/core/client/src/collection-manager/CollectionHistoryProvider.tsx
+++ b/packages/core/client/src/collection-manager/CollectionHistoryProvider.tsx
@@ -3,7 +3,6 @@ import React, { createContext, useContext, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import { useAPIClient, useRequest } from '../api-client';
-import { useAppSpin } from '../application/hooks/useAppSpin';
 
 export interface CollectionHistoryContextValue {
   historyCollections: any[];
@@ -42,7 +41,6 @@ export const CollectionHistoryProvider = (props) => {
 
   const isAdminPage = location.pathname.startsWith('/admin');
   const token = api.auth.getToken() || '';
-  const { render } = useAppSpin();
 
   useEffect(() => {
     if (isAdminPage && token) {
@@ -58,7 +56,7 @@ export const CollectionHistoryProvider = (props) => {
   };
 
   if (service.loading) {
-    return render();
+    return;
   }
 
   return (
diff --git a/packages/core/client/src/collection-manager/CollectionManagerProvider.tsx b/packages/core/client/src/collection-manager/CollectionManagerProvider.tsx
index ba42906ae..113ca5f1a 100644
--- a/packages/core/client/src/collection-manager/CollectionManagerProvider.tsx
+++ b/packages/core/client/src/collection-manager/CollectionManagerProvider.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
+
 import { useAPIClient, useRequest } from '../api-client';
-import { CollectionManagerSchemaComponentProvider } from './CollectionManagerSchemaComponentProvider';
-import { CollectionCategroriesContext } from './context';
-import { CollectionManagerOptions } from './types';
 import { CollectionManagerProvider } from '../data-source/collection/CollectionManagerProvider';
 import { useDataSourceManager } from '../data-source/data-source/DataSourceManagerProvider';
 import { useCollectionHistory } from './CollectionHistoryProvider';
-import { useAppSpin } from '../application/hooks/useAppSpin';
+import { CollectionManagerSchemaComponentProvider } from './CollectionManagerSchemaComponentProvider';
+import { CollectionCategroriesContext } from './context';
+import { CollectionManagerOptions } from './types';
 
 /**
  * @deprecated use `CollectionManagerProvider` instead
@@ -40,9 +40,8 @@ export const RemoteCollectionManagerProvider = (props: any) => {
     data: any;
   }>(coptions);
 
-  const { render } = useAppSpin();
   if (service.loading) {
-    return render();
+    return;
   }
 
   const refreshCategory = async () => {
diff --git a/packages/core/client/src/schema-component/antd/page/Page.tsx b/packages/core/client/src/schema-component/antd/page/Page.tsx
index f2430234b..742c3b0e3 100644
--- a/packages/core/client/src/schema-component/antd/page/Page.tsx
+++ b/packages/core/client/src/schema-component/antd/page/Page.tsx
@@ -12,7 +12,6 @@ import { useSearchParams } from 'react-router-dom';
 
 import { FormDialog } from '..';
 import { useToken } from '../__builtins__';
-import { useAppSpin } from '../../../application/hooks/useAppSpin';
 import { useStyles as useAClStyles } from '../../../built-in/acl/style';
 import { useDocumentTitle } from '../../../built-in/document-title';
 import { FilterBlockProvider } from '../../../filter-provider/FilterProvider';
@@ -202,10 +201,9 @@ function PageContent(
   props: any,
 ): React.ReactNode {
   const { token } = useToken();
-  const { render } = useAppSpin();
 
   if (loading) {
-    return render();
+    return;
   }
 
   return !disablePageHeader && enablePageTabs ? (
diff --git a/packages/core/client/src/user/CurrentUserProvider.tsx b/packages/core/client/src/user/CurrentUserProvider.tsx
index 41f4c49a2..7d7df53eb 100644
--- a/packages/core/client/src/user/CurrentUserProvider.tsx
+++ b/packages/core/client/src/user/CurrentUserProvider.tsx
@@ -3,7 +3,6 @@ import React, { createContext, useContext, useMemo } from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
 
 import { ReturnTypeOfUseRequest, useRequest } from '../api-client';
-import { useAppSpin } from '../application/hooks/useAppSpin';
 import { useACLRoleContext } from '../built-in/acl';
 import { useCompile } from '../schema-component';
 
@@ -33,13 +32,12 @@ export const useCurrentRoles = () => {
 };
 
 export const CurrentUserProvider = (props) => {
-  const { render } = useAppSpin();
   const result = useRequest<any>({
     url: 'auth:check',
   });
 
   if (result.loading) {
-    return render();
+    return;
   }
 
   return <CurrentUserContext.Provider value={result}>{props.children}</CurrentUserContext.Provider>;
diff --git a/packages/plugins/@hera/plugin-homepage/src/client/Home.tsx b/packages/plugins/@hera/plugin-homepage/src/client/Home.tsx
index 54766704f..f4af91139 100644
--- a/packages/plugins/@hera/plugin-homepage/src/client/Home.tsx
+++ b/packages/plugins/@hera/plugin-homepage/src/client/Home.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useAppSpin, useRequest } from '@tachybase/client';
+import { useRequest } from '@tachybase/client';
 
 import { Carousel, Image } from 'antd';
 
@@ -7,7 +7,6 @@ import { useStyles } from './style';
 
 export const HomePage: React.FC<{}> = () => {
   const { styles } = useStyles();
-  const { render } = useAppSpin();
   const { data, loading } = useRequest<{ data: any }>({
     url: 'home_page_presentations:list',
     params: {
@@ -16,7 +15,7 @@ export const HomePage: React.FC<{}> = () => {
   });
 
   if (loading) {
-    return render();
+    return;
   }
   const date = new Date();
   const year = date.getFullYear();
diff --git a/packages/plugins/@tachybase/plugin-backup-restore/src/client/DuplicatorProvider.tsx b/packages/plugins/@tachybase/plugin-backup-restore/src/client/DuplicatorProvider.tsx
index 79d302f0e..141ce4133 100644
--- a/packages/plugins/@tachybase/plugin-backup-restore/src/client/DuplicatorProvider.tsx
+++ b/packages/plugins/@tachybase/plugin-backup-restore/src/client/DuplicatorProvider.tsx
@@ -2,11 +2,7 @@ import React from 'react';
 import { CurrentAppInfoProvider, SchemaComponentOptions } from '@tachybase/client';
 
 export const DuplicatorProvider = function (props) {
-  return (
-    <CurrentAppInfoProvider>
-      <SchemaComponentOptions>{props.children}</SchemaComponentOptions>
-    </CurrentAppInfoProvider>
-  );
+  return <SchemaComponentOptions>{props.children}</SchemaComponentOptions>;
 };
 
 DuplicatorProvider.displayName = 'DuplicatorProvider';
diff --git a/packages/plugins/@tachybase/plugin-gantt/src/client/index.tsx b/packages/plugins/@tachybase/plugin-gantt/src/client/index.tsx
index 31ab42919..84e5cbac4 100644
--- a/packages/plugins/@tachybase/plugin-gantt/src/client/index.tsx
+++ b/packages/plugins/@tachybase/plugin-gantt/src/client/index.tsx
@@ -16,16 +16,14 @@ Gantt.Designer = GanttDesigner;
 Gantt.Event = Event;
 export { Gantt };
 
-const GanttProvider = React.memo((props) => {
+const GanttProvider = React.memo((props: { children: React.ReactNode }) => {
   return (
-    <CurrentAppInfoProvider>
-      <SchemaComponentOptions
-        components={{ Gantt, GanttBlockInitializer, GanttBlockProvider }}
-        scope={{ useGanttBlockProps }}
-      >
-        {props.children}
-      </SchemaComponentOptions>
-    </CurrentAppInfoProvider>
+    <SchemaComponentOptions
+      components={{ Gantt, GanttBlockInitializer, GanttBlockProvider }}
+      scope={{ useGanttBlockProps }}
+    >
+      {props.children}
+    </SchemaComponentOptions>
   );
 });
 
diff --git a/packages/plugins/@tachybase/plugin-kanban/src/client/index.tsx b/packages/plugins/@tachybase/plugin-kanban/src/client/index.tsx
index 3a4053c72..619c7d402 100644
--- a/packages/plugins/@tachybase/plugin-kanban/src/client/index.tsx
+++ b/packages/plugins/@tachybase/plugin-kanban/src/client/index.tsx
@@ -19,16 +19,14 @@ Kanban.Designer = KanbanDesigner;
 
 const KanbanV2 = Kanban;
 
-const KanbanPluginProvider = React.memo((props) => {
+const KanbanPluginProvider = React.memo((props: { children: React.ReactNode }) => {
   return (
-    <CurrentAppInfoProvider>
-      <SchemaComponentOptions
-        components={{ Kanban, KanbanBlockProvider, KanbanV2, KanbanBlockInitializer }}
-        scope={{ useKanbanBlockProps }}
-      >
-        {props.children}
-      </SchemaComponentOptions>
-    </CurrentAppInfoProvider>
+    <SchemaComponentOptions
+      components={{ Kanban, KanbanBlockProvider, KanbanV2, KanbanBlockInitializer }}
+      scope={{ useKanbanBlockProps }}
+    >
+      {props.children}
+    </SchemaComponentOptions>
   );
 });
 KanbanPluginProvider.displayName = 'KanbanPluginProvider';
diff --git a/packages/plugins/@tachybase/plugin-map/src/client/block/index.tsx b/packages/plugins/@tachybase/plugin-map/src/client/block/index.tsx
index e3638ff00..37b317664 100644
--- a/packages/plugins/@tachybase/plugin-map/src/client/block/index.tsx
+++ b/packages/plugins/@tachybase/plugin-map/src/client/block/index.tsx
@@ -6,7 +6,7 @@ import { MapBlockDesigner } from './MapBlockDesigner';
 import { MapBlockInitializer } from './MapBlockInitializer';
 import { MapBlockProvider, useMapBlockProps } from './MapBlockProvider';
 
-export const MapBlockOptions: React.FC = (props) => {
+export const MapBlockOptions = (props) => {
   return (
     <SchemaComponentOptions
       scope={{ useMapBlockProps }}
diff --git a/packages/plugins/@tachybase/plugin-map/src/client/index.tsx b/packages/plugins/@tachybase/plugin-map/src/client/index.tsx
index a5ef34079..ef05ef819 100644
--- a/packages/plugins/@tachybase/plugin-map/src/client/index.tsx
+++ b/packages/plugins/@tachybase/plugin-map/src/client/index.tsx
@@ -9,13 +9,11 @@ import { Configuration, Map } from './components';
 import { fields } from './fields';
 import { generateNTemplate, NAMESPACE } from './locale';
 
-const MapProvider = React.memo((props) => {
+const MapProvider = React.memo((props: { children: React.ReactNode }) => {
   return (
-    <CurrentAppInfoProvider>
-      <SchemaComponentOptions components={{ Map }}>
-        <MapBlockOptions>{props.children}</MapBlockOptions>
-      </SchemaComponentOptions>
-    </CurrentAppInfoProvider>
+    <SchemaComponentOptions components={{ Map }}>
+      <MapBlockOptions>{props.children}</MapBlockOptions>
+    </SchemaComponentOptions>
   );
 });
 MapProvider.displayName = 'MapProvider';
diff --git a/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Input/Input.tsx b/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Input/Input.tsx
index bdaf3cce9..17627ca3e 100644
--- a/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Input/Input.tsx
+++ b/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Input/Input.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
-import { css } from '@tachybase/client';
 import { connect, mapProps, mapReadPretty } from '@tachybase/schema';
 
 import { Input, InputProps, TextArea, TextAreaProps } from 'antd-mobile';
 
-type ComposedInput = React.FC<InputProps> & {
-  TextArea?: React.FC<TextAreaProps>;
+type ComposedInput = ((props: InputProps) => React.ReactNode) & {
+  TextArea?: (props: TextAreaProps) => React.ReactNode;
 };
 
 export const MInput: ComposedInput = connect(
@@ -14,7 +13,7 @@ export const MInput: ComposedInput = connect(
     return { placeholder: '请输入内容', clearable: true, ...props, style: { '--font-size': '12px' } };
   }),
   mapReadPretty((props) => {
-    return <text style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{props.value}</text>;
+    return <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{props.value}</span>;
   }),
 );