chore: Migrate useSelfHostedUserList to TS Query V5 (#3575)

Author: nsdeschenes

src/pages/AdminSettings/AdminMembers/MemberList/MemberTable.test.jsx

@@ -66,7 +66,6 @@ const mockOpenSeatsTaken = {
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false, cacheTime: Infinity } },
 })
-
 const queryClientV5 = new QueryClientV5({
   defaultOptions: { queries: { retry: false, cacheTime: Infinity } },
 })
@@ -88,7 +87,7 @@ beforeAll(() => {
   server.listen()
 })
 
-beforeEach(() => {
+afterEach(() => {
   queryClient.clear()
   queryClientV5.clear()
   server.resetHandlers()

src/pages/AdminSettings/AdminMembers/MemberList/MemberTable.tsx

@@ -4,8 +4,9 @@ import {
   useQueryClient,
 } from '@tanstack/react-query'
 import {
-  useQueryClient as useQueryClientV5,
   useSuspenseQuery as useSuspenseQueryV5,
+  useInfiniteQuery as useInfiniteQueryV5,
+  useQueryClient as useQueryClientV5,
 } from '@tanstack/react-queryV5'
 import {
   createColumnHelper,
@@ -19,9 +20,13 @@ import { useInView } from 'react-intersection-observer'
 import { useParams } from 'react-router'
 
 import { useLocationParams } from 'services/navigation'
-import { UserListOwner, useSelfHostedUserList } from 'services/selfHosted'
 import { SelfHostedSettingsQueryOpts } from 'services/selfHosted/SelfHostedSettingsQueryOpts'
+import {
+  SelfHostedUserListQueryOpts,
+  UserListOwner,
+} from 'services/selfHosted/SelfHostedUserListQueryOpts'
 import Api from 'shared/api'
+import { Provider } from 'shared/api/helpers'
 import Spinner from 'ui/Spinner'
 import Toggle from 'ui/Toggle'
 
@@ -59,11 +64,6 @@ const columns = [
   }),
 ]
 
-interface MutationArgs {
-  activated: boolean
-  ownerid: number
-}
-
 interface CreateTableArgs {
   tableData: UserListOwner[]
   seatData: SelfHostedSettings
@@ -96,6 +96,35 @@ const createTable = ({ tableData, seatData, mutate }: CreateTableArgs) => {
   )
 }
 
+interface Params {
+  activated?: boolean
+  search?: string
+  isAdmin?: boolean
+}
+
+const useQueryMembersList = (params: Params) => {
+  const {
+    data: queryData,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage,
+    isLoading,
+  } = useInfiniteQueryV5(SelfHostedUserListQueryOpts(params))
+
+  const flatUsersList = useMemo(
+    () => queryData?.pages?.flatMap((page) => page.results) ?? [],
+    [queryData?.pages]
+  )
+
+  return {
+    data: flatUsersList,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage,
+    isLoading,
+  }
+}
+
 const Loader = () => (
   <div className="mb-4 flex justify-center pt-4">
     <Spinner />
@@ -118,7 +147,12 @@ function LoadMoreTrigger({
 }
 
 interface URLParams {
-  provider: string
+  provider: Provider
+}
+
+interface MutationArgs {
+  activated: boolean
+  ownerid: number
 }
 
 function MemberTable() {
@@ -136,7 +170,7 @@ function MemberTable() {
   })
 
   const { data, isFetchingNextPage, hasNextPage, fetchNextPage, isLoading } =
-    useSelfHostedUserList(params)
+    useQueryMembersList(params)
 
   const { mutate } = useMutation({
     mutationFn: ({ activated, ownerid }: MutationArgs) =>
@@ -147,7 +181,9 @@ function MemberTable() {
         queryKey: SelfHostedSettingsQueryOpts({ provider }).queryKey,
       })
       queryClient.invalidateQueries(['Seats'])
-      queryClient.invalidateQueries(['SelfHostedUserList'])
+      queryClientV5.invalidateQueries({
+        queryKey: SelfHostedUserListQueryOpts(params).queryKey,
+      })
     },
   })