refactor(platform): adjust useAPI

Author: xiejay97

packages/platform/src/app/core/http/mock.ts

@@ -1,4 +1,4 @@
-import type { DeviceDoc } from '../../hooks/api/types';
+import type { DeviceDoc } from '../../utils/types';
 import type { UserState, NotificationItem } from '../state';
 import type { JWTToken, JWTTokenPayload } from '../token';
 

packages/platform/src/app/hooks/api/index.ts

@@ -1,3 +1,3 @@
-export { useAPI } from './api';
+export { useAPI } from './useAPI';
 export { usePageTitle } from './usePageTitle';
 export { useQueryParams } from './useQueryParams';

packages/platform/src/app/hooks/index.ts

@@ -1,37 +1,43 @@
 // https://cloud.google.com/apis/design
-
-import type { StandardFields, StandardGetParams, StandardListRes } from './types';
-
 import { useEventCallback } from '@react-devui/hooks';
 
-import { useHttp } from '../../core';
+import { useHttp } from '../core';
+
+interface StandardListRes<T> {
+  resources: T[];
+  metadata: {
+    page: number;
+    page_size: number;
+    total_size: number;
+  };
+}
 
 export function useAPI(url: string) {
   const http = useHttp();
 
   return {
-    list: useEventCallback(<T extends StandardFields = any, P extends StandardGetParams = StandardGetParams>(params?: P) =>
+    list: useEventCallback(<T = any, P = any>(params?: P) =>
       http<StandardListRes<T>>({
         url,
         method: 'get',
         params,
       })
     ),
-    get: useEventCallback(<T extends StandardFields = any, P extends StandardGetParams = StandardGetParams>(id: number, params?: P) =>
+    get: useEventCallback(<T = any, P = any>(id: number, params?: P) =>
       http<T>({
         url: `${url}/${id}`,
         method: 'get',
         params,
       })
     ),
-    create: useEventCallback(<T extends StandardFields = any, D = any>(data: D) =>
+    create: useEventCallback(<T = any, D = any>(data: D) =>
       http<T, D>({
         url,
         method: 'post',
         data,
       })
     ),
-    update: useEventCallback(<T extends StandardFields = any, D = any>(id: number, data: D) =>
+    update: useEventCallback(<T = any, D = any>(id: number, data: D) =>
       http<T, D>({
         url: `${url}/${id}`,
         method: 'put',

…ges/platform/src/app/hooks/api/useAPI.ts packages/platform/src/app/hooks/useAPI.tspackages/platform/src/app/hooks/api/useAPI.ts renamed to packages/platform/src/app/hooks/useAPI.ts packages/platform/src/app/hooks/api/useAPI.ts renamed to packages/platform/src/app/hooks/useAPI.ts

@@ -1,4 +1,4 @@
-import type { StandardFields } from './api/types';
+import type { StandardFields } from '../utils/types';
 
 import { useImmer } from '@react-devui/hooks';
 

packages/platform/src/app/hooks/useTable.ts

@@ -1,4 +1,4 @@
-import type { DeviceDoc } from '../../../hooks/api/types';
+import type { DeviceDoc, StandardQueryParams } from '../../../utils/types';
 import type { DSelectItem } from '@react-devui/ui/components/select';
 
 import { isUndefined } from 'lodash';
@@ -30,6 +30,8 @@ import { useAPI, useQueryParams } from '../../../hooks';
 import { AppDeviceModal } from './DeviceModal';
 import styles from './StandardTable.module.scss';
 
+type Device = DeviceDoc;
+
 interface DeviceQueryParams {
   keyword: string;
   sort: 'id' | '-id' | null;
@@ -68,7 +70,7 @@ export default function StandardTable(): JSX.Element | null {
 
   const [deviceTable, setDeviceTable] = useImmer({
     loading: true,
-    list: [] as DeviceDoc[],
+    list: [] as Device[],
     totalSize: 0,
     selected: new Set<number>(),
   });
@@ -79,12 +81,12 @@ export default function StandardTable(): JSX.Element | null {
 
   const [paramsOfDeleteModal, setParamsOfDeleteModal] = useImmer<{
     visible: boolean;
-    device: DeviceDoc;
+    device: Device;
   }>();
 
   const [paramsOfDeviceModal, setParamsOfDeviceModal] = useImmer<{
     visible: boolean;
-    device: DeviceDoc | undefined;
+    device: Device | undefined;
   }>();
   const [deviceForm, updateDeviceForm] = useForm(
     () =>
@@ -93,7 +95,7 @@ export default function StandardTable(): JSX.Element | null {
         model: new FormControl<string | null>(null, Validators.required),
       })
   );
-  const openDeviceModal = (device?: DeviceDoc) => {
+  const openDeviceModal = (device?: Device) => {
     setParamsOfDeviceModal({ visible: true, device });
     deviceForm.reset(device ? { name: device.name, model: device.model } : undefined);
     updateDeviceForm();
@@ -117,7 +119,7 @@ export default function StandardTable(): JSX.Element | null {
   useEffect(() => {
     setDeviceQuerySaved(deviceQuery);
 
-    const apiQuery: any = {
+    const apiQuery: StandardQueryParams = {
       page: deviceQuery.page,
       page_size: deviceQuery.pageSize,
     };
@@ -128,7 +130,7 @@ export default function StandardTable(): JSX.Element | null {
     setDeviceTable((draft) => {
       draft.loading = true;
     });
-    deviceApi.list<DeviceDoc>(apiQuery).subscribe({
+    deviceApi.list<Device>(apiQuery).subscribe({
       next: (res) => {
         setDeviceQuery((draft) => {
           draft.page = res.metadata.page;

packages/platform/src/app/routes/list/standard-table/StandardTable.tsx

@@ -1,4 +1,4 @@
-import type { DeviceDoc } from '../../../../hooks/api/types';
+import type { DeviceDoc } from '../../../../utils/types';
 import type { DSelectItem } from '@react-devui/ui/components/select';
 
 import { isUndefined } from 'lodash';
@@ -15,6 +15,8 @@ import { useAPI } from '../../../../hooks';
 import { AppDeviceModal } from '../DeviceModal';
 import styles from './Detail.module.scss';
 
+type Device = DeviceDoc;
+
 export default function Detail(): JSX.Element | null {
   const { t } = useTranslation();
   const async = useAsync();
@@ -25,7 +27,7 @@ export default function Detail(): JSX.Element | null {
   const { id: _id } = useParams();
   const id = Number(_id!);
 
-  const [device, setDevice] = useState<DeviceDoc>();
+  const [device, setDevice] = useState<Device>();
 
   const [modelList, setModelList] = useState<DSelectItem<string>[]>();
 
@@ -39,7 +41,7 @@ export default function Detail(): JSX.Element | null {
         model: new FormControl<string | null>(null, Validators.required),
       })
   );
-  const openEditModal = (device: DeviceDoc) => {
+  const openEditModal = (device: Device) => {
     setParamsOfEditModal({ visible: true });
     editForm.reset({ name: device.name, model: device.model });
     updateEditForm();

packages/platform/src/app/routes/list/standard-table/detail/Detail.tsx

@@ -1,29 +1,14 @@
-export interface StandardFields {
-  id: number;
-  create_time: number;
-  update_time: number;
-}
-
-export interface ErrorStandardFields {
-  error: {
-    code: string;
-    message: string;
-  };
-}
-
-export interface StandardGetParams {
+export interface StandardQueryParams {
   sort?: string;
   page?: number;
   page_size?: number;
+  [index: string]: any;
 }
 
-export interface StandardListRes<T> {
-  resources: T[];
-  metadata: {
-    page: number;
-    page_size: number;
-    total_size: number;
-  };
+export interface StandardFields {
+  id: number;
+  create_time: number;
+  update_time: number;
 }
 
 export interface DeviceDoc extends StandardFields {