diff --git a/src/pages/PlanPage/PlanPage.jsx b/src/pages/PlanPage/PlanPage.jsx index 91f68ea88a..8ae321a08c 100644 --- a/src/pages/PlanPage/PlanPage.jsx +++ b/src/pages/PlanPage/PlanPage.jsx @@ -1,5 +1,6 @@ import { Elements } from '@stripe/react-stripe-js' import { loadStripe } from '@stripe/stripe-js' +import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5' import { lazy, Suspense } from 'react' import { Redirect, Switch, useParams } from 'react-router-dom' @@ -7,11 +8,11 @@ import config from 'config' import { SentryRoute } from 'sentry' -import { usePlanPageData } from 'pages/PlanPage/hooks' import LoadingLogo from 'ui/LoadingLogo' import { PlanProvider } from './context' import PlanBreadcrumb from './PlanBreadcrumb' +import { PlanPageDataQueryOpts } from './queries/PlanPageDataQueryOpts' import Tabs from './Tabs' const CancelPlanPage = lazy(() => import('./subRoutes/CancelPlanPage')) @@ -33,7 +34,9 @@ const Loader = () => ( function PlanPage() { const { owner, provider } = useParams() - const { data: ownerData } = usePlanPageData({ owner, provider }) + const { data: ownerData } = useSuspenseQueryV5( + PlanPageDataQueryOpts({ owner, provider }) + ) if (config.IS_SELF_HOSTED || !ownerData?.isCurrentUserPartOfOrg) { return diff --git a/src/pages/PlanPage/PlanPage.test.jsx b/src/pages/PlanPage/PlanPage.test.jsx index 78eab0ec26..3cdb714f09 100644 --- a/src/pages/PlanPage/PlanPage.test.jsx +++ b/src/pages/PlanPage/PlanPage.test.jsx @@ -1,4 +1,8 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { + QueryClientProvider as QueryClientProviderV5, + QueryClient as QueryClientV5, +} from '@tanstack/react-queryV5' import { render, screen, waitFor } from '@testing-library/react' import { graphql, HttpResponse } from 'msw' import { setupServer } from 'msw/node' @@ -28,32 +32,32 @@ vi.mock('./subRoutes/UpgradePlanPage', () => ({ const server = setupServer() const queryClient = new QueryClient({ - defaultOptions: { - queries: { - retry: false, - suspense: true, - }, - }, + defaultOptions: { queries: { retry: false, suspense: true } }, +}) +const queryClientV5 = new QueryClientV5({ + defaultOptions: { queries: { retry: false } }, }) let testLocation const wrapper = (initialEntries = '') => ({ children }) => ( - - - - {children} - - { - testLocation = location - return null - }} - /> - - + + + + + {children} + { + testLocation = location + return null + }} + /> + + + + ) beforeAll(() => { @@ -61,6 +65,7 @@ beforeAll(() => { }) afterEach(() => { queryClient.clear() + queryClientV5.clear() server.resetHandlers() vi.resetAllMocks() }) diff --git a/src/pages/PlanPage/hooks/index.ts b/src/pages/PlanPage/hooks/index.ts deleted file mode 100644 index c36a9f63a6..0000000000 --- a/src/pages/PlanPage/hooks/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './usePlanPageData' diff --git a/src/pages/PlanPage/hooks/usePlanPageData.test.tsx b/src/pages/PlanPage/queries/PlanPageDataQueryOpts.test.tsx similarity index 73% rename from src/pages/PlanPage/hooks/usePlanPageData.test.tsx rename to src/pages/PlanPage/queries/PlanPageDataQueryOpts.test.tsx index 62f81c6388..d078d5422c 100644 --- a/src/pages/PlanPage/hooks/usePlanPageData.test.tsx +++ b/src/pages/PlanPage/queries/PlanPageDataQueryOpts.test.tsx @@ -1,11 +1,15 @@ -import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { + QueryClientProvider as QueryClientProviderV5, + QueryClient as QueryClientV5, + useQuery as useQueryV5, +} from '@tanstack/react-queryV5' import { renderHook, waitFor } from '@testing-library/react' import { graphql, HttpResponse } from 'msw' import { setupServer } from 'msw/node' import { MemoryRouter, Route } from 'react-router-dom' import { type MockInstance } from 'vitest' -import { usePlanPageData } from './usePlanPageData' +import { PlanPageDataQueryOpts } from './PlanPageDataQueryOpts' const mockOwner = { username: 'cool-user', @@ -13,25 +17,33 @@ const mockOwner = { numberOfUploads: 30, } -const queryClient = new QueryClient({ +const queryClientV5 = new QueryClientV5({ defaultOptions: { queries: { retry: false } }, }) const wrapper: React.FC = ({ children }) => ( - {children} + + {children} + ) const server = setupServer() -beforeAll(() => server.listen()) +beforeAll(() => { + server.listen() +}) + beforeEach(() => { server.resetHandlers() - queryClient.clear() + queryClientV5.clear() +}) + +afterAll(() => { + server.close() }) -afterAll(() => server.close()) describe('usePlanPageData', () => { function setup({ invalidSchema = false }) { @@ -53,10 +65,12 @@ describe('usePlanPageData', () => { it('returns data for the owner page', async () => { const { result } = renderHook( () => - usePlanPageData({ - owner: 'popcorn', - provider: 'gh', - }), + useQueryV5( + PlanPageDataQueryOpts({ + owner: 'popcorn', + provider: 'gh', + }) + ), { wrapper } ) @@ -81,10 +95,12 @@ describe('usePlanPageData', () => { setup({ invalidSchema: true }) const { result } = renderHook( () => - usePlanPageData({ - owner: 'popcorn', - provider: 'gh', - }), + useQueryV5( + PlanPageDataQueryOpts({ + owner: 'popcorn', + provider: 'gh', + }) + ), { wrapper } ) diff --git a/src/pages/PlanPage/hooks/usePlanPageData.ts b/src/pages/PlanPage/queries/PlanPageDataQueryOpts.ts similarity index 73% rename from src/pages/PlanPage/hooks/usePlanPageData.ts rename to src/pages/PlanPage/queries/PlanPageDataQueryOpts.ts index 2b5b169b51..538ebd995b 100644 --- a/src/pages/PlanPage/hooks/usePlanPageData.ts +++ b/src/pages/PlanPage/queries/PlanPageDataQueryOpts.ts @@ -1,8 +1,8 @@ -import { useQuery } from '@tanstack/react-query' +import { queryOptions as queryOptionsV5 } from '@tanstack/react-queryV5' import { z } from 'zod' import Api from 'shared/api' -import { NetworkErrorObject } from 'shared/api/helpers' +import { rejectNetworkError } from 'shared/api/helpers' const RequestSchema = z.object({ owner: z @@ -24,17 +24,20 @@ const query = ` } ` -type UsePlanPageDataParams = { +type PlanPageDataQueryArgs = { owner: string provider: string } -export function usePlanPageData({ owner, provider }: UsePlanPageDataParams) { +export function PlanPageDataQueryOpts({ + owner, + provider, +}: PlanPageDataQueryArgs) { const variables = { username: owner, } - return useQuery({ + return queryOptionsV5({ queryKey: ['PlanPageData', variables, provider], queryFn: ({ signal }) => Api.graphql({ @@ -46,11 +49,12 @@ export function usePlanPageData({ owner, provider }: UsePlanPageDataParams) { const parsedRes = RequestSchema.safeParse(res?.data) if (!parsedRes.success) { - return Promise.reject({ + return rejectNetworkError({ status: 404, data: {}, dev: 'usePlanPageData - 404 schema parsing failed', - } satisfies NetworkErrorObject) + error: parsedRes.error, + }) } return parsedRes.data?.owner ?? null diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/FreePlanCard/FreePlanCard.jsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/FreePlanCard/FreePlanCard.jsx index cafa615985..dbd87380a7 100644 --- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/FreePlanCard/FreePlanCard.jsx +++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/FreePlanCard/FreePlanCard.jsx @@ -1,8 +1,9 @@ +import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5' import isNumber from 'lodash/isNumber' import PropType from 'prop-types' import { useParams } from 'react-router-dom' -import { usePlanPageData } from 'pages/PlanPage/hooks' +import { PlanPageDataQueryOpts } from 'pages/PlanPage/queries/PlanPageDataQueryOpts' import { planPropType, TrialStatuses, @@ -25,7 +26,9 @@ import PlanPricing from '../shared/PlanPricing' function FreePlanCard({ plan, scheduledPhase }) { const { provider, owner } = useParams() - const { data: ownerData } = usePlanPageData({ owner, provider }) + const { data: ownerData } = useSuspenseQueryV5( + PlanPageDataQueryOpts({ owner, provider }) + ) const { data: planData } = usePlanData({ provider, owner, diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/FreePlanCard/FreePlanCard.test.jsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/FreePlanCard/FreePlanCard.test.jsx index 41ce08b5c2..71696693fc 100644 --- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/FreePlanCard/FreePlanCard.test.jsx +++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/FreePlanCard/FreePlanCard.test.jsx @@ -1,4 +1,8 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { + QueryClientProvider as QueryClientProviderV5, + QueryClient as QueryClientV5, +} from '@tanstack/react-queryV5' import { render, screen } from '@testing-library/react' import { graphql, http, HttpResponse } from 'msw' import { setupServer } from 'msw/node' @@ -159,12 +163,17 @@ const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false, suspense: true } }, }) +const queryClientV5 = new QueryClientV5({ + defaultOptions: { queries: { retry: false } }, +}) + beforeAll(() => { server.listen() }) afterEach(() => { queryClient.clear() + queryClientV5.clear() server.resetHandlers() vi.resetAllMocks() }) @@ -174,13 +183,15 @@ afterAll(() => { }) const wrapper = ({ children }) => ( - - - - Loading

}>{children}
-
-
-
+ + + + + Loading

}>{children}
+
+
+
+
) describe('FreePlanCard', () => { diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/PaidPlanCard/PaidPlanCard.test.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/PaidPlanCard/PaidPlanCard.test.tsx index c0300bc522..50bc02c58a 100644 --- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/PaidPlanCard/PaidPlanCard.test.tsx +++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/PaidPlanCard/PaidPlanCard.test.tsx @@ -1,7 +1,12 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { + QueryClientProvider as QueryClientProviderV5, + QueryClient as QueryClientV5, +} from '@tanstack/react-queryV5' import { render, screen } from '@testing-library/react' import { graphql, http, HttpResponse } from 'msw' import { setupServer } from 'msw/node' +import { Suspense } from 'react' import { MemoryRouter, Route } from 'react-router-dom' import { Plan, PretrialPlan, TrialStatuses } from 'services/account' @@ -66,23 +71,37 @@ const mockScheduleDetail = { const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } }, }) +const queryClientV5 = new QueryClientV5({ + defaultOptions: { queries: { retry: false } }, +}) const wrapper: React.FC = ({ children }) => ( - - - {children} - - + + + + + {children} + + + + ) const server = setupServer() -beforeAll(() => server.listen()) +beforeAll(() => { + server.listen() +}) + afterEach(() => { queryClient.clear() + queryClientV5.clear() server.resetHandlers() }) -afterAll(() => server.close()) + +afterAll(() => { + server.close() +}) interface SetupArgs { hasScheduledDetails?: boolean diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/PaidPlanCard/PaidPlanCard.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/PaidPlanCard/PaidPlanCard.tsx index c1436133d0..f2f05e8433 100644 --- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/PaidPlanCard/PaidPlanCard.tsx +++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/PaidPlanCard/PaidPlanCard.tsx @@ -1,7 +1,8 @@ +import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5' import isNumber from 'lodash/isNumber' import { useParams } from 'react-router-dom' -import { usePlanPageData } from 'pages/PlanPage/hooks' +import { PlanPageDataQueryOpts } from 'pages/PlanPage/queries/PlanPageDataQueryOpts' import { useAccountDetails, usePlanData } from 'services/account' import BenefitList from 'shared/plan/BenefitList' import ScheduledPlanDetails from 'shared/plan/ScheduledPlanDetails' @@ -22,7 +23,9 @@ function PaidPlanCard() { provider, owner, }) - const { data: ownerData } = usePlanPageData({ owner, provider }) + const { data: ownerData } = useSuspenseQueryV5( + PlanPageDataQueryOpts({ owner, provider }) + ) const scheduledPhase = accountDetails?.scheduleDetail?.scheduledPhase const plan = planData?.plan