fix: add mobx observer

Author: HSunboy

src/component/Task/MutipleAsyncTask/CreateModal/DatabaseQueue.tsx

@@ -2,7 +2,7 @@ import { IConnection, IConnectionStatus } from '@/d.ts';
 import login from '@/store/login';
 import { formatMessage } from '@/util/intl';
 import { Button, Divider, Form, Space, Timeline, Tooltip } from 'antd';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { DeleteOutlined, DownOutlined, PlusOutlined, UpOutlined } from '@ant-design/icons';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -14,6 +14,7 @@ import { DatabasePermissionType } from '@/d.ts/database';
 import { SelectTemplate, CreateTemplate } from '../components/Template';
 import datasourceStatus from '@/store/datasourceStatus';
 import styles from './index.less';
+import { observer } from 'mobx-react';
 
 export const checkDbExpiredByDataSourceStatus = (status: IConnectionStatus) => {
   switch (status) {
@@ -34,11 +35,12 @@ export const DatabaseQueueSelect: React.FC<{
   rootName: (number | string)[];
   multipleDatabaseChangeOpen: boolean;
   setDefaultDatasource: React.Dispatch<React.SetStateAction<IConnection>>;
-}> = ({ rootName, multipleDatabaseChangeOpen, setDefaultDatasource }) => {
+}> = observer(({ rootName, multipleDatabaseChangeOpen, setDefaultDatasource }) => {
   const form = Form.useFormInstance();
+  const statusMap = datasourceStatus.statusMap;
   const projectId = Form.useWatch('projectId', form);
   const [databaseIdMap, setDatabaseIdMap] = useState<Map<number, boolean>>(new Map());
-  const [databaseOptions, setDatabaseOptions] = useState<DatabaseOption[]>([]);
+  const [_databaseOptions, setDatabaseOptions] = useState<DatabaseOption[]>([]);
   const {
     data,
     run,
@@ -60,7 +62,7 @@ export const DatabaseQueueSelect: React.FC<{
     );
     if (databaseList?.contents?.length) {
       setDefaultDatasource(databaseList?.contents?.[0]?.dataSource);
-      await datasourceStatus.asyncUpdateStatus([
+      datasourceStatus.asyncUpdateStatus([
         ...new Set(databaseList?.contents?.map((item) => item.dataSource?.id)),
       ]);
       setDatabaseOptions(
@@ -84,6 +86,15 @@ export const DatabaseQueueSelect: React.FC<{
     setDatabaseIdMap(databaseIdMap);
   };
 
+  const databaseOptions = useMemo(() => {
+    return _databaseOptions?.map((item) => {
+      return {
+        ...item,
+        expired: checkDbExpiredByDataSourceStatus(statusMap.get(item?.dataSource?.id)?.status),
+      };
+    });
+  }, [statusMap, _databaseOptions]);
+
   useEffect(() => {
     if (multipleDatabaseChangeOpen && projectId) {
       loadDatabaseList(projectId);
@@ -234,7 +245,7 @@ export const DatabaseQueueSelect: React.FC<{
       </Form.List>
     </div>
   );
-};
+});
 
 const DatabaseQueue: React.FC<{
   multipleDatabaseChangeOpen: boolean;

src/component/Task/MutipleAsyncTask/components/Template/EditTemplate.tsx

@@ -11,26 +11,28 @@ import login from '@/store/login';
 import { DownOutlined, PlusOutlined, UpOutlined, DeleteOutlined } from '@ant-design/icons';
 import { useRequest } from 'ahooks';
 import { Form, message, Input, Timeline, Space, Divider, Button, Drawer } from 'antd';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { flatArray } from '../../CreateModal/helper';
 import InnerSelecter, { DatabaseOption } from '../../CreateModal/InnerSelecter';
 import styles from './index.less';
 import datasourceStatus from '@/store/datasourceStatus';
 import { checkDbExpiredByDataSourceStatus } from '../../CreateModal/DatabaseQueue';
+import { observer } from 'mobx-react';
 
 const EditTemplate: React.FC<{
   open: boolean;
   projectId: number;
   templateId: number;
   onSuccess?: () => Promise<void>;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}> = ({ open, projectId, templateId, setOpen, onSuccess }) => {
+}> = observer(({ open, projectId, templateId, setOpen, onSuccess }) => {
   const [form] = Form.useForm();
+  const statusMap = datasourceStatus.statusMap;
   const orderedDatabaseIds = Form.useWatch<number[][]>(['orders'], form);
   const [currentTemplate, setCurrentTemplate] = useState<Template>();
-  const [databaseOptions, setDatabaseOptions] = useState<DatabaseOption[]>([]);
+  const [_databaseOptions, setDatabaseOptions] = useState<DatabaseOption[]>([]);
   const {
     data,
     run,
@@ -51,7 +53,7 @@ const EditTemplate: React.FC<{
       true,
     );
     if (databaseList?.contents?.length) {
-      await datasourceStatus.asyncUpdateStatus([
+      datasourceStatus.asyncUpdateStatus([
         ...new Set(databaseList?.contents?.map((item) => item?.dataSource?.id)),
       ]);
       setDatabaseOptions(
@@ -70,6 +72,16 @@ const EditTemplate: React.FC<{
       );
     }
   };
+
+  const databaseOptions = useMemo(() => {
+    return _databaseOptions?.map((item) => {
+      return {
+        ...item,
+        expired: checkDbExpiredByDataSourceStatus(statusMap.get(item?.dataSource?.id)?.status),
+      };
+    });
+  }, [statusMap, _databaseOptions]);
+
   const initTemplate = async (templateId: number) => {
     const response = await detailTemplate(templateId, login?.organizationId?.toString());
     setCurrentTemplate(response);
@@ -394,5 +406,5 @@ const EditTemplate: React.FC<{
       </Form>
     </Drawer>
   );
-};
+});
 export default EditTemplate;

src/page/Project/Database/index.tsx

@@ -94,7 +94,7 @@ const Database: React.FC<IProps> = ({ id, modalStore }) => {
       true,
     );
     if (res) {
-      await datasourceStatus.asyncUpdateStatus(res?.contents?.map((item) => item?.dataSource?.id));
+      datasourceStatus.asyncUpdateStatus(res?.contents?.map((item) => item?.dataSource?.id));
       setData(res?.contents);
       setTotal(res?.page?.totalElements);
     }

src/page/Workspace/SideBar/ResourceTree/DatabaseTree/index.tsx

@@ -51,7 +51,7 @@ const DatabaseTree: React.FC<IProps> = function ({ openSelectPanel }) {
     databaseList.forEach((d) => {
       ids.add(d.dataSource?.id);
     });
-    await datasourceStatus.asyncUpdateStatus(Array.from(ids));
+    datasourceStatus.asyncUpdateStatus(Array.from(ids));
   }
 
   useEffect(() => {

src/page/Workspace/context/WorkspaceStore.tsx

@@ -80,7 +80,7 @@ export default function WorkspaceStore({ children }) {
   const reloadDatasourceList = useCallback(async () => {
     const data = await fetchDatasource();
     setDatasourceList(data?.contents || []);
-    await datasourceStatus.asyncUpdateStatus(data?.contents?.map((a) => a.id));
+    datasourceStatus.asyncUpdateStatus(data?.contents?.map((a) => a.id));
   }, []);
 
   const reloadProjectList = useCallback(async () => {

src/store/datasourceStatus.ts

@@ -74,7 +74,7 @@ export class DataSourceStatusStore {
     });
     if (this.status === 'stop') {
       this.status = 'running';
-      await this.fetchStatus();
+      this.fetchStatus();
     }
   }