From 05247bb24ef2638719ab6e0402d529215b897803 Mon Sep 17 00:00:00 2001 From: JimmFly Date: Wed, 14 Aug 2024 03:49:45 +0000 Subject: [PATCH] fix(admin): frequent query requests in the search (#7854) --- .../components/data-table-toolbar.tsx | 41 ++++++++---- .../accounts/components/data-table.tsx | 9 +-- .../components/use-user-management.ts | 11 ++++ .../admin/src/modules/accounts/index.tsx | 20 +----- .../src/modules/accounts/use-user-list.ts | 27 ++++++++ .../admin/src/modules/config/index.tsx | 52 +++------------- .../config/use-server-service-configs.ts | 62 +++++++++++++++++++ 7 files changed, 141 insertions(+), 81 deletions(-) create mode 100644 packages/frontend/admin/src/modules/accounts/use-user-list.ts create mode 100644 packages/frontend/admin/src/modules/config/use-server-service-configs.ts diff --git a/packages/frontend/admin/src/modules/accounts/components/data-table-toolbar.tsx b/packages/frontend/admin/src/modules/accounts/components/data-table-toolbar.tsx index dba7c34803..68f2b822b9 100644 --- a/packages/frontend/admin/src/modules/accounts/components/data-table-toolbar.tsx +++ b/packages/frontend/admin/src/modules/accounts/components/data-table-toolbar.tsx @@ -4,7 +4,13 @@ import { useQuery } from '@affine/core/hooks/use-query'; import { getUserByEmailQuery } from '@affine/graphql'; import { PlusIcon } from 'lucide-react'; import type { SetStateAction } from 'react'; -import { startTransition, useCallback, useEffect, useState } from 'react'; +import { + startTransition, + useCallback, + useEffect, + useMemo, + useState, +} from 'react'; import { useRightPanel } from '../../layout'; import { DiscardChanges } from './discard-changes'; @@ -15,6 +21,21 @@ interface DataTableToolbarProps { setDataTable: (data: TData[]) => void; } +const useSearch = () => { + const [value, setValue] = useState(''); + const { data } = useQuery({ + query: getUserByEmailQuery, + variables: { email: value }, + }); + + const result = useMemo(() => data?.userByEmail, [data]); + + return { + result, + query: setValue, + }; +}; + function useDebouncedValue(value: T, delay: number): T { const [debouncedValue, setDebouncedValue] = useState(value); @@ -37,9 +58,10 @@ export function DataTableToolbar({ }: DataTableToolbarProps) { const [value, setValue] = useState(''); const [dialogOpen, setDialogOpen] = useState(false); - const debouncedValue = useDebouncedValue(value, 500); + const debouncedValue = useDebouncedValue(value, 1000); const { setRightPanelContent, openPanel, closePanel, isOpen } = useRightPanel(); + const { result, query } = useSearch(); const handleConfirm = useCallback(() => { setRightPanelContent(); @@ -51,12 +73,9 @@ export function DataTableToolbar({ } }, [setRightPanelContent, closePanel, dialogOpen, isOpen, openPanel]); - const result = useQuery({ - query: getUserByEmailQuery, - variables: { - email: value, - }, - }).data.userByEmail; + useEffect(() => { + query(debouncedValue); + }, [debouncedValue, query]); useEffect(() => { startTransition(() => { @@ -68,13 +87,11 @@ export function DataTableToolbar({ setDataTable([]); } }); - }, [data, debouncedValue, result, setDataTable, value]); + }, [data, debouncedValue, result, setDataTable]); const onValueChange = useCallback( (e: { currentTarget: { value: SetStateAction } }) => { - startTransition(() => { - setValue(e.currentTarget.value); - }); + setValue(e.currentTarget.value); }, [] ); diff --git a/packages/frontend/admin/src/modules/accounts/components/data-table.tsx b/packages/frontend/admin/src/modules/accounts/components/data-table.tsx index 261ec82db9..508286e868 100644 --- a/packages/frontend/admin/src/modules/accounts/components/data-table.tsx +++ b/packages/frontend/admin/src/modules/accounts/components/data-table.tsx @@ -5,8 +5,6 @@ import { TableCell, TableRow, } from '@affine/admin/components/ui/table'; -import { useQuery } from '@affine/core/hooks/use-query'; -import { getUsersCountQuery } from '@affine/graphql'; import type { ColumnDef, PaginationState } from '@tanstack/react-table'; import { flexRender, @@ -17,6 +15,7 @@ import { type Dispatch, type SetStateAction, useEffect, useState } from 'react'; import { DataTablePagination } from './data-table-pagination'; import { DataTableToolbar } from './data-table-toolbar'; +import { useUserCount } from './use-user-management'; interface DataTableProps { columns: ColumnDef[]; @@ -36,11 +35,7 @@ export function DataTable({ pagination, onPaginationChange, }: DataTableProps) { - const { - data: { usersCount }, - } = useQuery({ - query: getUsersCountQuery, - }); + const usersCount = useUserCount(); const [tableData, setTableData] = useState(data); const table = useReactTable({ diff --git a/packages/frontend/admin/src/modules/accounts/components/use-user-management.ts b/packages/frontend/admin/src/modules/accounts/components/use-user-management.ts index cfe43dc7bd..ff52f08448 100644 --- a/packages/frontend/admin/src/modules/accounts/components/use-user-management.ts +++ b/packages/frontend/admin/src/modules/accounts/components/use-user-management.ts @@ -3,10 +3,12 @@ import { useMutateQueryResource, useMutation, } from '@affine/core/hooks/use-mutation'; +import { useQuery } from '@affine/core/hooks/use-query'; import { createChangePasswordUrlMutation, createUserMutation, deleteUserMutation, + getUsersCountQuery, listUsersQuery, updateAccountFeaturesMutation, updateAccountMutation, @@ -159,3 +161,12 @@ export const useDeleteUser = () => { return deleteById; }; + +export const useUserCount = () => { + const { + data: { usersCount }, + } = useQuery({ + query: getUsersCountQuery, + }); + return usersCount; +}; diff --git a/packages/frontend/admin/src/modules/accounts/index.tsx b/packages/frontend/admin/src/modules/accounts/index.tsx index eafa0b2a72..8ad4dbc626 100644 --- a/packages/frontend/admin/src/modules/accounts/index.tsx +++ b/packages/frontend/admin/src/modules/accounts/index.tsx @@ -1,27 +1,11 @@ import { Separator } from '@affine/admin/components/ui/separator'; -import { useQuery } from '@affine/core/hooks/use-query'; -import { listUsersQuery } from '@affine/graphql'; -import { useState } from 'react'; import { columns } from './components/columns'; import { DataTable } from './components/data-table'; +import { useUserList } from './use-user-list'; export function AccountPage() { - const [pagination, setPagination] = useState({ - pageIndex: 0, - pageSize: 10, - }); - const { - data: { users }, - } = useQuery({ - query: listUsersQuery, - variables: { - filter: { - first: pagination.pageSize, - skip: pagination.pageIndex * pagination.pageSize, - }, - }, - }); + const { users, pagination, setPagination } = useUserList(); return (
diff --git a/packages/frontend/admin/src/modules/accounts/use-user-list.ts b/packages/frontend/admin/src/modules/accounts/use-user-list.ts new file mode 100644 index 0000000000..fd24e8867d --- /dev/null +++ b/packages/frontend/admin/src/modules/accounts/use-user-list.ts @@ -0,0 +1,27 @@ +import { useQuery } from '@affine/core/hooks/use-query'; +import { listUsersQuery } from '@affine/graphql'; +import { useState } from 'react'; + +export const useUserList = () => { + const [pagination, setPagination] = useState({ + pageIndex: 0, + pageSize: 10, + }); + const { + data: { users }, + } = useQuery({ + query: listUsersQuery, + variables: { + filter: { + first: pagination.pageSize, + skip: pagination.pageIndex * pagination.pageSize, + }, + }, + }); + + return { + users, + pagination, + setPagination, + }; +}; diff --git a/packages/frontend/admin/src/modules/config/index.tsx b/packages/frontend/admin/src/modules/config/index.tsx index 6a5772956e..3612628e98 100644 --- a/packages/frontend/admin/src/modules/config/index.tsx +++ b/packages/frontend/admin/src/modules/config/index.tsx @@ -6,36 +6,14 @@ import { } from '@affine/admin/components/ui/card'; import { ScrollArea } from '@affine/admin/components/ui/scroll-area'; import { Separator } from '@affine/admin/components/ui/separator'; -import { useQueryImmutable } from '@affine/core/hooks/use-query'; -import { getServerServiceConfigsQuery } from '@affine/graphql'; import { AboutAFFiNE } from './about'; - -type ServerConfig = { - externalUrl: string; - https: boolean; - host: string; - port: number; - path: string; -}; - -type MailerConfig = { - host: string; - port: number; - sender: string; -}; - -type DatabaseConfig = { - host: string; - port: number; - user: string; - database: string; -}; - -type ServerServiceConfig = { - name: string; - config: ServerConfig | MailerConfig | DatabaseConfig; -}; +import type { + DatabaseConfig, + MailerConfig, + ServerConfig, +} from './use-server-service-configs'; +import { useServerServiceConfigs } from './use-server-service-configs'; export function ConfigPage() { return ( @@ -166,22 +144,8 @@ const MailerCard = ({ mailerConfig }: { mailerConfig?: MailerConfig }) => { }; export function ServerServiceConfig() { - const { data } = useQueryImmutable({ - query: getServerServiceConfigsQuery, - }); - const server = data.serverServiceConfigs.find( - (service: ServerServiceConfig) => service.name === 'server' - ); - const mailer = data.serverServiceConfigs.find( - (service: ServerServiceConfig) => service.name === 'mailer' - ); - const database = data.serverServiceConfigs.find( - (service: ServerServiceConfig) => service.name === 'database' - ); - - const serverConfig = server?.config as ServerConfig | undefined; - const mailerConfig = mailer?.config as MailerConfig | undefined; - const databaseConfig = database?.config as DatabaseConfig | undefined; + const { serverConfig, mailerConfig, databaseConfig } = + useServerServiceConfigs(); return (
diff --git a/packages/frontend/admin/src/modules/config/use-server-service-configs.ts b/packages/frontend/admin/src/modules/config/use-server-service-configs.ts new file mode 100644 index 0000000000..fed57313cc --- /dev/null +++ b/packages/frontend/admin/src/modules/config/use-server-service-configs.ts @@ -0,0 +1,62 @@ +import { useQueryImmutable } from '@affine/core/hooks/use-query'; +import { getServerServiceConfigsQuery } from '@affine/graphql'; +import { useMemo } from 'react'; + +export type ServerConfig = { + externalUrl: string; + https: boolean; + host: string; + port: number; + path: string; +}; + +export type MailerConfig = { + host: string; + port: number; + sender: string; +}; + +export type DatabaseConfig = { + host: string; + port: number; + user: string; + database: string; +}; + +export type ServerServiceConfig = { + name: string; + config: ServerConfig | MailerConfig | DatabaseConfig; +}; + +export const useServerServiceConfigs = () => { + const { data } = useQueryImmutable({ + query: getServerServiceConfigsQuery, + }); + const server = useMemo( + () => + data.serverServiceConfigs.find( + (service: ServerServiceConfig) => service.name === 'server' + ), + [data.serverServiceConfigs] + ); + const mailer = useMemo( + () => + data.serverServiceConfigs.find( + (service: ServerServiceConfig) => service.name === 'mailer' + ), + [data.serverServiceConfigs] + ); + const database = useMemo( + () => + data.serverServiceConfigs.find( + (service: ServerServiceConfig) => service.name === 'database' + ), + [data.serverServiceConfigs] + ); + + const serverConfig = server?.config as ServerConfig | undefined; + const mailerConfig = mailer?.config as MailerConfig | undefined; + const databaseConfig = database?.config as DatabaseConfig | undefined; + + return { serverConfig, mailerConfig, databaseConfig }; +};