Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Migrate useSelfHostedUserList to TS Query V5 #3575

Merged
merged 4 commits into from
Dec 23, 2024
Merged

chore: Migrate useSelfHostedUserList to TS Query V5 #3575

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
43420a7
migrate useSelfHostedUserList to SelfHostedUserListQueryOpts
nicholas-codecov Dec 12, 2024
b87cfb8
update usage in MemberTable
nicholas-codecov Dec 12, 2024
331c544
fix typo
nicholas-codecov Dec 23, 2024
7636bf9
remove spread operation
nicholas-codecov Dec 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions src/pages/AdminSettings/AdminMembers/MemberList/MemberTable.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 } },
})
Expand All @@ -88,7 +87,7 @@ beforeAll(() => {
server.listen()
})

beforeEach(() => {
afterEach(() => {
queryClient.clear()
queryClientV5.clear()
server.resetHandlers()
Expand Down
56 changes: 46 additions & 10 deletions src/pages/AdminSettings/AdminMembers/MemberList/MemberTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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'

Expand Down Expand Up @@ -59,11 +64,6 @@ const columns = [
}),
]

interface MutationArgs {
activated: boolean
ownerid: number
}

interface CreateTableArgs {
tableData: UserListOwner[]
seatData: SelfHostedSettings
Expand Down Expand Up @@ -96,6 +96,35 @@ const createTable = ({ tableData, seatData, mutate }: CreateTableArgs) => {
)
}

interface Params {
activated?: boolean
search?: string
isAdmin?: boolean
}

const useQueryMembersList = (params: Params) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Im also kinda curious why we pulled the memo out of the query and into this new query in the component itself

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Beforehand the service query was a custom hook so we're okay to use a useMemo in there, whereas now with the queryOptions factory function it is no longer a custom hook, so we're not able to use a hook inside of the function.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

makes sense!

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 />
Expand All @@ -118,7 +147,12 @@ function LoadMoreTrigger({
}

interface URLParams {
provider: string
provider: Provider
}

interface MutationArgs {
activated: boolean
ownerid: number
}

function MemberTable() {
Expand All @@ -136,7 +170,7 @@ function MemberTable() {
})

const { data, isFetchingNextPage, hasNextPage, fetchNextPage, isLoading } =
useSelfHostedUserList(params)
useQueryMembersList(params)

const { mutate } = useMutation({
mutationFn: ({ activated, ownerid }: MutationArgs) =>
Expand All @@ -147,7 +181,9 @@ function MemberTable() {
queryKey: SelfHostedSettingsQueryOpts({ provider }).queryKey,
})
queryClient.invalidateQueries(['Seats'])
queryClient.invalidateQueries(['SelfHostedUserList'])
queryClientV5.invalidateQueries({
queryKey: SelfHostedUserListQueryOpts(params).queryKey,
})
},
})

Expand Down
Loading
Loading