feat: Update code

nuintun · Jun 18, 2024 · 7da4714 · 7da4714
1 parent 0b50095
commit 7da4714
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 115 deletions.
diff --git a/app/js/hooks/useList.ts b/app/js/hooks/useList.ts
@@ -9,37 +9,46 @@ import usePagingRequest, {
   Pagination as RequestPagination,
   Refs as RequestRefs,
   RequestOptions as RequestInit,
-  Sorter,
   Transform
 } from './usePagingRequest';
 import useLatestRef from './useLatestRef';
 import { useCallback, useMemo } from 'react';
-import useSearches, { Search } from './useSearches';
 import { GetProp, ListProps, PaginationProps } from 'antd';
-import usePagingOptions, { Options as UsePagingOptions } from './usePagingOptions';
+import useSearchFilters, { Filter } from './useSearchFilters';
+import usePagingOptions, { Options as PagingOptions } from './usePagingOptions';
 
 export interface Fetch {
   (options?: RequestOptions): void;
 }
 
+export interface Sorter {
+  orderBy: React.Key[];
+  orderType: ('ascend' | 'descend')[];
+}
+
+type ListPropsPicked = 'dataSource' | 'pagination';
+
 export interface RequestOptions extends RequestInit {
+  filter?: Filter | false;
   sorter?: Sorter | false;
   pagination?: Pagination;
 }
 
-export interface Refs<I, E> extends RequestRefs<I, E> {
-  readonly sorter: Sorter | false;
-}
-
 export type OnChange = GetProp<PaginationProps, 'onChange'>;
 
 export interface Options<I, E, T> extends InitOptions<I, E, T> {
   pagination?: Pagination;
 }
 
-export type Pagination = (UsePagingOptions & Partial<RequestPagination>) | false;
+export interface Refs<I, E> extends RequestRefs<I, E> {
+  readonly filters: [filter: Filter | false, sorter: Sorter | false];
+}
+
+export type Pagination = (PagingOptions & Partial<RequestPagination>) | false;
 
-export type DefaultListProps<I> = Required<Pick<ListProps<I>, 'loading' | 'dataSource' | 'pagination'>>;
+export interface DefaultListProps<I> extends Required<Pick<ListProps<I>, ListPropsPicked>> {
+  loading: boolean;
+}
 
 /**
  * @function useList
@@ -79,7 +88,7 @@ export default function useList<I, E = unknown, T = I>(
 ): [props: DefaultListProps<I | T>, fetch: Fetch, dispatch: Dispatch<I[] | T[]>, refs: Refs<I, E>] {
   const opitonsRef = useLatestRef(options);
   const getPagingOptions = usePagingOptions(options.pagination);
-  const [serialize, raw] = useSearches<[Search, Sorter]>([false, false]);
+  const [serialize, raw] = useSearchFilters<[Filter, Sorter]>([false, false]);
 
   const [loading, dataSource, request, dispatch, originRefs] = usePagingRequest(
     url,
@@ -88,10 +97,11 @@ export default function useList<I, E = unknown, T = I>(
   );
 
   const fetch: Fetch = useCallback((options = {}) => {
-    const { search, sorter } = options;
-    const query = serialize([search, sorter]);
+    const { filter, sorter } = options;
+    const { current: initOptions } = opitonsRef;
+    const query = { ...initOptions.query, ...serialize([filter, sorter]) };
 
-    request({ ...opitonsRef.current, ...options, search: query });
+    request({ ...opitonsRef.current, ...options, query });
   }, []);
 
   const onChange = useCallback<OnChange>((page, pageSize) => {
@@ -120,15 +130,8 @@ export default function useList<I, E = unknown, T = I>(
 
   const refs = useMemo<Refs<I, E>>(() => {
     return {
-      get search() {
-        const [search] = raw();
-
-        return search;
-      },
-      get sorter() {
-        const [, sorter] = raw();
-
-        return sorter;
+      get filters() {
+        return raw();
       },
       get response() {
         return originRefs.response;
@@ -139,5 +142,11 @@ export default function useList<I, E = unknown, T = I>(
     };
   }, []);
 
-  return [{ loading, dataSource, pagination }, fetch, dispatch as Dispatch<I[] | T[]>, refs];
+  const props: DefaultListProps<I | T> = {
+    loading,
+    dataSource,
+    pagination
+  };
+
+  return [props, fetch, dispatch as Dispatch<I[] | T[]>, refs];
 }
diff --git a/app/js/hooks/usePagingRequest.ts b/app/js/hooks/usePagingRequest.ts
@@ -4,7 +4,6 @@
 
 import { App } from 'antd';
 import useLatestRef from './useLatestRef';
-import useSearches, { Search } from './useSearches';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import useRequest, { Options as InitOptions, RequestOptions as RequestInit } from './useRequest';
 
@@ -30,13 +29,7 @@ export interface Fetch {
   (options?: RequestOptions): void;
 }
 
-export interface Sorter {
-  orderBy: React.Key[];
-  orderType: ('ascend' | 'descend')[];
-}
-
 export interface Refs<I, E> {
-  readonly search: Search | false;
   readonly response: Response<I, E>;
   readonly pagination: Pagination | false;
 }
@@ -52,7 +45,6 @@ export interface Options<I, E, T> extends Omit<RequestInit<Response<I, E>>, 'bod
 }
 
 export interface RequestOptions extends Omit<InitOptions, 'body' | 'delay' | 'method' | 'onUnauthorized'> {
-  search?: Search | false;
   pagination?: Partial<Pagination> | false;
 }
 
@@ -116,26 +108,21 @@ export default function usePagingRequest<I, E = unknown, T = I>(
   const urlRef = useLatestRef(url);
   const opitonsRef = useLatestRef(options);
   const responseRef = useRef<Response<I, E>>({});
-  const [serialize, raw] = useSearches<[Search]>([false]);
   const [dataSource, setDataSource] = useState<I[] | T[]>([]);
   const paginationRef = useRef<Pagination | false>(initPagination);
   const [loading, request] = useRequest(options, initialLoadingState);
 
   const fetch = useCallback<Fetch>((options = {}) => {
-    const requestInit = {
-      ...opitonsRef.current,
-      ...options
-    };
-
-    const { query: initQuery } = requestInit;
-    const hasPagination = hasQuery(paginationRef.current);
-    const query: Search = { ...initQuery, ...serialize([options.search]) };
+    const requestInit = { ...opitonsRef.current, ...options };
+    const { current: pagination } = paginationRef;
+    const hasPagination = hasQuery(pagination);
+    const { query = {} } = requestInit;
 
     if (hasPagination) {
       const { page, pageSize }: Pagination = {
         ...DEFAULT_PAGINATION,
         ...initPagination,
-        ...paginationRef.current,
+        ...pagination,
         ...options.pagination
       };
 
@@ -196,11 +183,6 @@ export default function usePagingRequest<I, E = unknown, T = I>(
 
   const refs = useMemo<Refs<I, E>>(() => {
     return {
-      get search() {
-        const [search] = raw();
-
-        return search;
-      },
       get response() {
         return responseRef.current;
       },

diff --git a/app/js/hooks/useSearchFilters.ts b/app/js/hooks/useSearchFilters.ts
@@ -0,0 +1,41 @@
+/**
+ * @module useSearchFilters
+ */
+
+import { useCallback, useRef } from 'react';
+import { Query as Filter } from '/js/utils/request';
+
+export type { Filter };
+
+export type SearchFilters<T extends Filter[]> = {
+  [K in keyof T]: T[K] extends Filter ? T[K] | false : T[K];
+};
+
+/**
+ * @function useSearchFilters
+ * @description [hook] 可缓存查询过滤条件
+ * @param initialValue 初始化查询过滤条件
+ */
+export default function useSearchFilters<T extends Filter[]>(
+  initialValue: SearchFilters<T>
+): [serialize: (value?: Partial<SearchFilters<T>>) => Filter, raw: () => SearchFilters<T>] {
+  const searchFiltersRef = useRef(initialValue);
+
+  const serialize = useCallback((value?: Partial<SearchFilters<T>>) => {
+    if (value && searchFiltersRef.current !== value) {
+      searchFiltersRef.current = searchFiltersRef.current.map((search, index) => {
+        return value[index] ?? search;
+      }) as SearchFilters<T>;
+    }
+
+    return searchFiltersRef.current.reduce<Filter>((values, value) => {
+      return value ? { ...values, ...value } : values;
+    }, {});
+  }, []);
+
+  const raw = useCallback(() => {
+    return searchFiltersRef.current;
+  }, []);
+
+  return [serialize, raw];
+}
diff --git a/app/js/hooks/useSearches.ts b/app/js/hooks/useSearches.ts
diff --git a/app/js/hooks/useTable.ts b/app/js/hooks/useTable.ts
@@ -9,41 +9,46 @@ import usePagingRequest, {
   Pagination as RequestPagination,
   Refs as RequestRefs,
   RequestOptions as RequestInit,
-  Sorter,
   Transform
 } from './usePagingRequest';
 import useLatestRef from './useLatestRef';
 import { GetProp, TableProps } from 'antd';
 import React, { useCallback, useMemo } from 'react';
-import useSearches, { Search } from './useSearches';
+import useSearchFilters, { Filter } from './useSearchFilters';
 import usePagingOptions, { Options as PagingOptions } from './usePagingOptions';
 
-export type Filter = Search;
-
 export interface Fetch {
   (options?: RequestOptions): void;
 }
 
+export interface Sorter {
+  orderBy: React.Key[];
+  orderType: ('ascend' | 'descend')[];
+}
+
 export interface RequestOptions extends RequestInit {
   filter?: Filter | false;
   sorter?: Sorter | false;
   pagination?: Pagination;
 }
 
-export interface Refs<I, E = {}> extends RequestRefs<I, E> {
-  readonly filter: Filter | false;
-  readonly sorter: Sorter | false;
-}
+export type OnChange<I> = GetProp<TableProps<I>, 'onChange'>;
 
 export interface Options<I, E, T> extends InitOptions<I, E, T> {
   pagination?: Pagination;
 }
 
-export type OnChange<I> = GetProp<TableProps<I>, 'onChange'>;
+export interface Refs<I, E = {}> extends RequestRefs<I, E> {
+  readonly filters: [filter: Filter | false, sorter: Sorter | false];
+}
+
+type TablePropsPicked = 'size' | 'onChange' | 'dataSource' | 'pagination';
 
 export type Pagination = (PagingOptions & Partial<RequestPagination>) | false;
 
-export type DefaultTableProps<I> = Required<Pick<TableProps<I>, 'size' | 'loading' | 'onChange' | 'dataSource' | 'pagination'>>;
+export interface DefaultTableProps<I> extends Required<Pick<TableProps<I>, TablePropsPicked>> {
+  loading: boolean;
+}
 
 /**
  * @function serializeField
@@ -92,7 +97,7 @@ export default function useTable<I, E = unknown, T = I>(
 ): [props: DefaultTableProps<I | T>, fetch: Fetch, dispatch: Dispatch<I[] | T[]>, refs: Refs<I, E>] {
   const opitonsRef = useLatestRef(options);
   const getPagingOptions = usePagingOptions(options.pagination);
-  const [serialize, raw] = useSearches<[Search, Filter, Sorter]>([false, false, false]);
+  const [serialize, raw] = useSearchFilters<[Filter, Sorter]>([false, false]);
 
   const [loading, dataSource, request, dispatch, originRefs] = usePagingRequest(
     url,
@@ -101,10 +106,11 @@ export default function useTable<I, E = unknown, T = I>(
   );
 
   const fetch: Fetch = useCallback((options = {}): void => {
-    const { search, filter, sorter } = options;
-    const query = serialize([search, filter, sorter]);
+    const { filter, sorter } = options;
+    const { current: initOptions } = opitonsRef;
+    const query = { ...initOptions.query, ...serialize([filter, sorter]) };
 
-    request({ ...opitonsRef.current, ...options, search: query });
+    request({ ...opitonsRef.current, ...options, query });
   }, []);
 
   const onChange = useCallback<OnChange<I | T>>((pagination, filter, sorter, { action }) => {
@@ -156,20 +162,8 @@ export default function useTable<I, E = unknown, T = I>(
 
   const refs = useMemo<Refs<I, E>>(() => {
     return {
-      get search() {
-        const [search] = raw();
-
-        return search;
-      },
-      get filter() {
-        const [, filter] = raw();
-
-        return filter;
-      },
-      get sorter() {
-        const [, , sorter] = raw();
-
-        return sorter;
+      get filters() {
+        return raw();
       },
       get response() {
         return originRefs.response;