Copilot commented on code in PR #3075: URL: https://github.com/apache/apisix-dashboard/pull/3075#discussion_r2099264095
########## src/apis/hooks.ts: ########## @@ -15,47 +15,208 @@ * limitations under the License. */ import { queryOptions, useSuspenseQuery } from '@tanstack/react-query'; +import type { AxiosInstance } from 'axios'; -import { getUpstreamListReq } from '@/apis/upstreams'; +import { getRouteListReq, getRouteReq } from '@/apis/routes'; +import { getUpstreamListReq, getUpstreamReq } from '@/apis/upstreams'; import { req } from '@/config/req'; +import type { + APISIXDetailResponse, + APISIXListResponse, +} from '@/types/schema/apisix/type'; import { type PageSearchType } from '@/types/schema/pageSearch'; import { useSearchParams } from '@/utils/useSearchParams'; -import { useTablePagination } from '@/utils/useTablePagination'; +import { + type ListPageKeys, + useTablePagination, +} from '@/utils/useTablePagination'; -import { getRouteListReq, getRouteReq } from './routes'; +import { + getConsumerGroupListReq, + getConsumerGroupReq, +} from './consumer_groups'; +import { getConsumerListReq, getConsumerReq } from './consumers'; +import { getCredentialListReq, getCredentialReq } from './credentials'; +import { getGlobalRuleListReq, getGlobalRuleReq } from './global_rules'; +import { getPluginConfigListReq, getPluginConfigReq } from './plugin_configs'; +import { getProtoListReq, getProtoReq } from './protos'; +import { getSecretListReq, getSecretReq } from './secrets'; +import { getServiceListReq, getServiceReq } from './services'; +import { getSSLListReq, getSSLReq } from './ssls'; +import { getStreamRouteListReq, getStreamRouteReq } from './stream_routes'; -export const getUpstreamListQueryOptions = (props: PageSearchType) => { - return queryOptions({ - queryKey: ['upstreams', props.page, props.page_size], - queryFn: () => getUpstreamListReq(req, props), - }); -}; +const genDetailQueryOptions = + <T extends unknown[], R>( + key: string, + getDetailReq: ( + req: AxiosInstance, + ...args: T + ) => Promise<APISIXDetailResponse<R>> + ) => + (...args: T) => { + return queryOptions({ + queryKey: [key, ...args], + queryFn: () => getDetailReq(req, ...args), + }); + }; +/** simple factory func for list query options which support extends PageSearchType */ +const genListQueryOptions = + <P extends PageSearchType, R>( + key: string, + listReq: (req: AxiosInstance, props: P) => Promise<APISIXListResponse<R>> + ) => + (props: P) => { + return queryOptions({ + queryKey: [key, props], + queryFn: () => listReq(req, props), + }); + }; -export const useUpstreamList = () => { - const { params, setParams } = useSearchParams('/upstreams/'); - const upstreamQuery = useSuspenseQuery(getUpstreamListQueryOptions(params)); - const { data, isLoading, refetch } = upstreamQuery; - const pagination = useTablePagination({ data, setParams, params }); - return { data, isLoading, refetch, pagination }; +/** simple hook factory func for list hooks which support extends PageSearchType */ +export const genUseList = <T extends ListPageKeys, P extends PageSearchType, R>( + routeId: T, + listQueryOptions: ReturnType<typeof genListQueryOptions<P, R>> +) => { + return () => { + const { params, setParams } = useSearchParams<T, P>(routeId); + const listQuery = useSuspenseQuery(listQueryOptions(params)); + const { data, isLoading, refetch } = listQuery; + const opts = { data, setParams, params }; + const pagination = useTablePagination(opts); + return { data, isLoading, refetch, pagination }; + }; }; -export const getRouteListQueryOptions = (props: PageSearchType) => { +export const getUpstreamQueryOptions = genDetailQueryOptions( + 'upstream', + getUpstreamReq +); +export const getUpstreamListQueryOptions = genListQueryOptions( + 'upstreams', + getUpstreamListReq +); +export const useUpstreamList = genUseList( + '/upstreams/', + getUpstreamListQueryOptions +); + +export const getRouteQueryOptions = genDetailQueryOptions('route', getRouteReq); +export const getRouteListQueryOptions = genListQueryOptions( + 'routes', + getRouteListReq +); +export const useRouteList = genUseList('/routes/', getRouteListQueryOptions); + +export const getConsumerGroupQueryOptions = genDetailQueryOptions( + 'consumer_group', + getConsumerGroupReq +); +export const getConsumerGroupListQueryOptions = genListQueryOptions( + 'consumer_groups', + getConsumerGroupListReq +); +export const useConsumerGroupList = genUseList( + '/consumer_groups/', + getConsumerGroupListQueryOptions +); + +export const getStreamRouteQueryOptions = genDetailQueryOptions( + 'stream_route', + getStreamRouteReq +); +export const getStreamRouteListQueryOptions = genListQueryOptions( + 'stream_routes', + getStreamRouteListReq +); +export const useStreamRouteList = genUseList( + '/stream_routes/', + getStreamRouteListQueryOptions +); + +export const getServiceQueryOptions = genDetailQueryOptions( + 'service', + getServiceReq +); +export const getServiceListQueryOptions = genListQueryOptions( + 'services', + getServiceListReq +); +export const useServiceList = genUseList( + '/services/', + getServiceListQueryOptions +); + +export const getGlobalRuleQueryOptions = genDetailQueryOptions( + 'global_rule', + getGlobalRuleReq +); +export const getGlobalRuleListQueryOptions = genListQueryOptions( + 'global_rules', + getGlobalRuleListReq +); +export const useGlobalRuleList = genUseList( + '/global_rules/', + getGlobalRuleListQueryOptions +); + +export const getPluginConfigQueryOptions = genDetailQueryOptions( + 'plugin_config', + getPluginConfigReq +); +export const getPluginConfigListQueryOptions = genListQueryOptions( + 'plugin_configs', + getPluginConfigListReq +); +export const usePluginConfigList = genUseList( + '/plugin_configs/', + getPluginConfigListQueryOptions +); + +export const getSSLQueryOptions = genDetailQueryOptions('ssl', getSSLReq); +export const getSSLListQueryOptions = genListQueryOptions('ssls', getSSLListReq); +export const useSSLList = genUseList('/ssls/', getSSLListQueryOptions); + +export const getConsumerQueryOptions = genDetailQueryOptions( + 'consumer', + getConsumerReq +); +export const getConsumerListQueryOptions = genListQueryOptions( + 'consumers', + getConsumerListReq +); +export const useConsumerList = genUseList( + '/consumers/', + getConsumerListQueryOptions +); + +export const getCredentialQueryOptions = genDetailQueryOptions( + 'credential', + getCredentialReq +); +export const getCredentialListQueryOptions = (username: string) => { return queryOptions({ - queryKey: ['routes', props.page, props.page_size], - queryFn: () => getRouteListReq(req, props), + queryKey: ['credentials', username], + queryFn: () => getCredentialListReq(req, { username }), }); }; Review Comment: [nitpick] Consider refactoring getCredentialListQueryOptions to use the existing genListQueryOptions factory function for consistency with other list query options. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: notifications-unsubscr...@apisix.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org