import { useState, useRef, useMemo, useCallback, useEffect } from "react"; import { WEBAPP_URL } from "@calcom/lib/constants"; import { useDebounce } from "@calcom/lib/hooks/useDebounce"; import { trpc } from "@calcom/trpc/react"; import { Badge, ConfirmationDialogContent, Dialog, DropdownActions, showToast, Table, TextField, Avatar, } from "@calcom/ui"; import { Edit, Trash, Lock } from "@calcom/ui/components/icon"; import { withLicenseRequired } from "../../common/components/LicenseRequired"; const { Cell, ColumnTitle, Header, Row } = Table; const FETCH_LIMIT = 25; function UsersTableBare() { const tableContainerRef = useRef(null); const utils = trpc.useContext(); const [searchTerm, setSearchTerm] = useState(""); const debouncedSearchTerm = useDebounce(searchTerm, 500); const mutation = trpc.viewer.users.delete.useMutation({ onSuccess: async () => { showToast("User has been deleted", "success"); // Lets not invalidated the whole cache, just remove the user from the cache. // usefull cause in prod this will be fetching 100k+ users utils.viewer.admin.listPaginated.setInfiniteData({ limit: FETCH_LIMIT }, (data) => { if (!data) { return { pages: [], pageParams: [], }; } return { ...data, pages: data.pages.map((page) => ({ ...page, rows: page.rows.filter((row) => row.id !== userToDelete), })), }; }); }, onError: (err) => { console.error(err.message); showToast("There has been an error deleting this user.", "error"); }, onSettled: () => { setUserToDelete(null); }, }); const { data, fetchNextPage, isFetching } = trpc.viewer.admin.listPaginated.useInfiniteQuery( { limit: FETCH_LIMIT, searchTerm: debouncedSearchTerm, }, { getNextPageParam: (lastPage) => lastPage.nextCursor, keepPreviousData: true, refetchOnWindowFocus: false, } ); const sendPasswordResetEmail = trpc.viewer.admin.sendPasswordReset.useMutation({ onSuccess: () => { showToast("Password reset email has been sent", "success"); }, }); //we must flatten the array of arrays from the useInfiniteQuery hook const flatData = useMemo(() => data?.pages?.flatMap((page) => page.rows) ?? [], [data]); const totalDBRowCount = data?.pages?.[0]?.meta?.totalRowCount ?? 0; const totalFetched = flatData.length; //called on scroll and possibly on mount to fetch more data as the user scrolls and reaches bottom of table const fetchMoreOnBottomReached = useCallback( (containerRefElement?: HTMLDivElement | null) => { if (containerRefElement) { const { scrollHeight, scrollTop, clientHeight } = containerRefElement; //once the user has scrolled within 300px of the bottom of the table, fetch more data if there is any if (scrollHeight - scrollTop - clientHeight < 300 && !isFetching && totalFetched < totalDBRowCount) { fetchNextPage(); } } }, [fetchNextPage, isFetching, totalFetched, totalDBRowCount] ); useEffect(() => { fetchMoreOnBottomReached(tableContainerRef.current); }, [fetchMoreOnBottomReached]); const [userToDelete, setUserToDelete] = useState(null); return ( <> setSearchTerm(e.target.value)} />
fetchMoreOnBottomReached()} style={{ height: "calc(100vh - 30vh)", overflow: "auto", }}>
User Timezone Role Edit
{flatData.map((user) => (
{user.name} /{user.username}
{user.email}
{user.timeZone} {user.role.toLowerCase()}
sendPasswordResetEmail.mutate({ userId: user.id }), icon: Lock, }, { id: "delete", label: "Delete", color: "destructive", onClick: () => setUserToDelete(user.id), icon: Trash, }, ]} />
))}
setUserToDelete(null)} onConfirm={() => { if (!userToDelete) return; mutation.mutate({ userId: userToDelete }); }} />
); } const DeleteUserDialog = ({ user, onConfirm, onClose, }: { user: number | null; onConfirm: () => void; onClose: () => void; }) => { return ( // eslint-disable-next-line @typescript-eslint/no-empty-function -- noop (open ? () => {} : onClose())}>

Are you sure you want to delete this user?

); }; export const UsersTable = withLicenseRequired(UsersTableBare);