diff --git a/packages/common/graphql/src/graphql/admin/get-users-count.gql b/packages/common/graphql/src/graphql/admin/get-users-count.gql deleted file mode 100644 index e5b97fb79b..0000000000 --- a/packages/common/graphql/src/graphql/admin/get-users-count.gql +++ /dev/null @@ -1,3 +0,0 @@ -query getUsersCount { - usersCount -} diff --git a/packages/common/graphql/src/graphql/admin/list-users.gql b/packages/common/graphql/src/graphql/admin/list-users.gql index d1fb23d48b..ce6c42055a 100644 --- a/packages/common/graphql/src/graphql/admin/list-users.gql +++ b/packages/common/graphql/src/graphql/admin/list-users.gql @@ -9,4 +9,5 @@ query listUsers($filter: ListUserInput!) { emailVerified avatarUrl } + usersCount } diff --git a/packages/common/graphql/src/graphql/index.ts b/packages/common/graphql/src/graphql/index.ts index 5115f19345..1d870b80a1 100644 --- a/packages/common/graphql/src/graphql/index.ts +++ b/packages/common/graphql/src/graphql/index.ts @@ -171,14 +171,6 @@ export const getUserByEmailQuery = { }`, }; -export const getUsersCountQuery = { - id: 'getUsersCountQuery' as const, - op: 'getUsersCount', - query: `query getUsersCount { - usersCount -}`, -}; - export const importUsersMutation = { id: 'importUsersMutation' as const, op: 'ImportUsers', @@ -212,6 +204,7 @@ export const listUsersQuery = { emailVerified avatarUrl } + usersCount }`, }; diff --git a/packages/common/graphql/src/schema.ts b/packages/common/graphql/src/schema.ts index a5988959ea..aafdbfec94 100644 --- a/packages/common/graphql/src/schema.ts +++ b/packages/common/graphql/src/schema.ts @@ -2811,10 +2811,6 @@ export type GetUserByEmailQuery = { } | null; }; -export type GetUsersCountQueryVariables = Exact<{ [key: string]: never }>; - -export type GetUsersCountQuery = { __typename?: 'Query'; usersCount: number }; - export type ImportUsersMutationVariables = Exact<{ input: ImportUsersInput; }>; @@ -2833,6 +2829,7 @@ export type ListUsersQueryVariables = Exact<{ export type ListUsersQuery = { __typename?: 'Query'; + usersCount: number; users: Array<{ __typename?: 'UserType'; id: string; @@ -4969,11 +4966,6 @@ export type Queries = variables: GetUserByEmailQueryVariables; response: GetUserByEmailQuery; } - | { - name: 'getUsersCountQuery'; - variables: GetUsersCountQueryVariables; - response: GetUsersCountQuery; - } | { name: 'listUsersQuery'; variables: ListUsersQueryVariables; 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 fb49b6e6c2..cdeaf31d28 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,8 +4,8 @@ import { useQuery } from '@affine/admin/use-query'; import { getUserByEmailQuery } from '@affine/graphql'; import { ExportIcon, ImportIcon, PlusIcon } from '@blocksuite/icons/rc'; import type { Table } from '@tanstack/react-table'; +import type { Dispatch, SetStateAction } from 'react'; import { - type SetStateAction, startTransition, useCallback, useEffect, @@ -22,8 +22,11 @@ import { CreateUserForm } from './user-form'; interface DataTableToolbarProps { data: TData[]; - setDataTable: (data: TData[]) => void; + usersCount: number; selectedUsers: UserType[]; + setDataTable: (data: TData[]) => void; + setRowCount: (rowCount: number) => void; + setMemoUsers: Dispatch>; table?: Table; } @@ -60,8 +63,11 @@ function useDebouncedValue(value: T, delay: number): T { export function DataTableToolbar({ data, + usersCount, selectedUsers, setDataTable, + setRowCount, + setMemoUsers, table, }: DataTableToolbarProps) { const [value, setValue] = useState(''); @@ -90,13 +96,25 @@ export function DataTableToolbar({ startTransition(() => { if (!debouncedValue) { setDataTable(data); + setRowCount(usersCount); } else if (result) { + setMemoUsers(prev => [...new Set([...prev, result])]); setDataTable([result as TData]); + setRowCount(1); } else { setDataTable([]); + setRowCount(0); } }); - }, [data, debouncedValue, result, setDataTable]); + }, [ + data, + debouncedValue, + result, + setDataTable, + setMemoUsers, + setRowCount, + usersCount, + ]); const onValueChange = useCallback( (e: { currentTarget: { value: SetStateAction } }) => { 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 a323eff7ce..80b0e8a868 100644 --- a/packages/frontend/admin/src/modules/accounts/components/data-table.tsx +++ b/packages/frontend/admin/src/modules/accounts/components/data-table.tsx @@ -21,13 +21,14 @@ import { type Dispatch, type SetStateAction, useEffect, useState } from 'react'; import type { UserType } from '../schema'; import { DataTablePagination } from './data-table-pagination'; import { DataTableToolbar } from './data-table-toolbar'; -import { useUserCount } from './use-user-management'; interface DataTableProps { columns: ColumnDef[]; data: TData[]; pagination: PaginationState; + usersCount: number; selectedUsers: UserType[]; + setMemoUsers: Dispatch>; onPaginationChange: Dispatch< SetStateAction<{ pageIndex: number; @@ -40,22 +41,23 @@ export function DataTable({ columns, data, pagination, + usersCount, selectedUsers, + setMemoUsers, onPaginationChange, }: DataTableProps) { - const usersCount = useUserCount(); - const [rowSelection, setRowSelection] = useState({}); const [columnFilters, setColumnFilters] = useState([]); const [tableData, setTableData] = useState(data); + const [rowCount, setRowCount] = useState(usersCount); const table = useReactTable({ data: tableData, columns, getCoreRowModel: getCoreRowModel(), getRowId: row => row.id, manualPagination: true, - rowCount: usersCount, + rowCount: rowCount, enableFilters: true, onPaginationChange: onPaginationChange, enableRowSelection: true, @@ -72,13 +74,20 @@ export function DataTable({ setTableData(data); }, [data]); + useEffect(() => { + setRowCount(usersCount); + }, [usersCount]); + return (
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 15726d8528..5ea56c6748 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 @@ -2,7 +2,6 @@ import { useMutateQueryResource, useMutation, } from '@affine/admin/use-mutation'; -import { useQuery } from '@affine/admin/use-query'; import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks'; import { createChangePasswordUrlMutation, @@ -10,7 +9,6 @@ import { deleteUserMutation, disableUserMutation, enableUserMutation, - getUsersCountQuery, type ImportUsersInput, type ImportUsersMutation, importUsersMutation, @@ -225,15 +223,6 @@ export const useDisableUser = () => { return disableById; }; -export const useUserCount = () => { - const { - data: { usersCount }, - } = useQuery({ - query: getUsersCountQuery, - }); - return usersCount; -}; - export const useImportUsers = () => { const { trigger: importUsers } = useMutation({ mutation: importUsersMutation, diff --git a/packages/frontend/admin/src/modules/accounts/index.tsx b/packages/frontend/admin/src/modules/accounts/index.tsx index 0bcef51233..80d8367f88 100644 --- a/packages/frontend/admin/src/modules/accounts/index.tsx +++ b/packages/frontend/admin/src/modules/accounts/index.tsx @@ -7,7 +7,7 @@ import type { UserType } from './schema'; import { useUserList } from './use-user-list'; export function AccountPage() { - const { users, pagination, setPagination } = useUserList(); + const { users, pagination, setPagination, usersCount } = useUserList(); // Remember the user temporarily, because userList is paginated on the server side,can't get all users at once. const [memoUsers, setMemoUsers] = useState([]); @@ -32,8 +32,10 @@ export function AccountPage() { data={users} columns={columns} pagination={pagination} + usersCount={usersCount} onPaginationChange={setPagination} selectedUsers={selectedUsers} + setMemoUsers={setMemoUsers} /> ); diff --git a/packages/frontend/admin/src/modules/accounts/use-user-list.ts b/packages/frontend/admin/src/modules/accounts/use-user-list.ts index 6b1abeaadf..23677148ce 100644 --- a/packages/frontend/admin/src/modules/accounts/use-user-list.ts +++ b/packages/frontend/admin/src/modules/accounts/use-user-list.ts @@ -8,7 +8,7 @@ export const useUserList = () => { pageSize: 10, }); const { - data: { users }, + data: { users, usersCount }, } = useQuery({ query: listUsersQuery, variables: { @@ -23,5 +23,6 @@ export const useUserList = () => { users, pagination, setPagination, + usersCount, }; };