From 604ecf52c70071159d6df6b4ae580935073f2ea2 Mon Sep 17 00:00:00 2001 From: David Crespo Date: Fri, 6 Dec 2024 12:50:45 -0600 Subject: [PATCH] convert some more, actually cut some lines! --- app/forms/image-from-snapshot.tsx | 23 +++++------- app/forms/vpc-edit.tsx | 23 +++++------- app/pages/lookups.ts | 14 +++---- .../project/floating-ips/FloatingIpsPage.tsx | 37 +++++++------------ app/pages/project/vpcs/VpcPage/VpcPage.tsx | 22 ++++------- app/pages/project/vpcs/VpcsPage.tsx | 21 +++-------- 6 files changed, 54 insertions(+), 86 deletions(-) diff --git a/app/forms/image-from-snapshot.tsx b/app/forms/image-from-snapshot.tsx index 8d44a1d8ef..b6e7e2a55d 100644 --- a/app/forms/image-from-snapshot.tsx +++ b/app/forms/image-from-snapshot.tsx @@ -10,10 +10,10 @@ import { useForm } from 'react-hook-form' import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom' import { - apiQueryClient, + apiq, + queryClient, useApiMutation, - useApiQueryClient, - usePrefetchedApiQuery, + usePrefetchedQuery, type ImageCreate, } from '@oxide/api' @@ -26,6 +26,7 @@ import { getProjectSnapshotSelector, useProjectSnapshotSelector } from '~/hooks/ import { addToast } from '~/stores/toast' import { PropertiesTable } from '~/ui/lib/PropertiesTable' import { pb } from '~/util/path-builder' +import type * as PP from '~/util/path-params' const defaultValues: Omit = { name: '', @@ -34,29 +35,25 @@ const defaultValues: Omit = { version: '', } +const snapshotView = ({ project, snapshot }: PP.Snapshot) => + apiq('snapshotView', { path: { snapshot }, query: { project } }) + CreateImageFromSnapshotSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => { const { project, snapshot } = getProjectSnapshotSelector(params) - await apiQueryClient.prefetchQuery('snapshotView', { - path: { snapshot }, - query: { project }, - }) + await queryClient.prefetchQuery(snapshotView({ project, snapshot })) return null } export function CreateImageFromSnapshotSideModalForm() { const { snapshot, project } = useProjectSnapshotSelector() - const { data } = usePrefetchedApiQuery('snapshotView', { - path: { snapshot }, - query: { project }, - }) + const { data } = usePrefetchedQuery(snapshotView({ project, snapshot })) const navigate = useNavigate() - const queryClient = useApiQueryClient() const onDismiss = () => navigate(pb.snapshots({ project })) const createImage = useApiMutation('imageCreate', { onSuccess(image) { - queryClient.invalidateQueries('imageList') + queryClient.invalidateEndpoint('imageList') addToast(<>Image {image.name} created) // prettier-ignore onDismiss() }, diff --git a/app/forms/vpc-edit.tsx b/app/forms/vpc-edit.tsx index 0982d17f10..473eedc649 100644 --- a/app/forms/vpc-edit.tsx +++ b/app/forms/vpc-edit.tsx @@ -8,12 +8,7 @@ import { useForm } from 'react-hook-form' import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom' -import { - apiQueryClient, - useApiMutation, - useApiQueryClient, - usePrefetchedApiQuery, -} from '@oxide/api' +import { apiq, queryClient, useApiMutation, usePrefetchedQuery } from '@oxide/api' import { DescriptionField } from '~/components/form/fields/DescriptionField' import { NameField } from '~/components/form/fields/NameField' @@ -22,26 +17,26 @@ import { HL } from '~/components/HL' import { getVpcSelector, useVpcSelector } from '~/hooks/use-params' import { addToast } from '~/stores/toast' import { pb } from '~/util/path-builder' +import type * as PP from '~/util/path-params' + +const vpcView = ({ project, vpc }: PP.Vpc) => + apiq('vpcView', { path: { vpc }, query: { project } }) EditVpcSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => { const { project, vpc } = getVpcSelector(params) - await apiQueryClient.prefetchQuery('vpcView', { path: { vpc }, query: { project } }) + await queryClient.prefetchQuery(vpcView({ project, vpc })) return null } export function EditVpcSideModalForm() { const { vpc: vpcName, project } = useVpcSelector() - const queryClient = useApiQueryClient() const navigate = useNavigate() - const { data: vpc } = usePrefetchedApiQuery('vpcView', { - path: { vpc: vpcName }, - query: { project }, - }) + const { data: vpc } = usePrefetchedQuery(vpcView({ project, vpc: vpcName })) const editVpc = useApiMutation('vpcUpdate', { onSuccess(updatedVpc) { - queryClient.invalidateQueries('vpcList') + queryClient.invalidateEndpoint('vpcList') navigate(pb.vpc({ project, vpc: updatedVpc.name })) addToast(<>VPC {updatedVpc.name} updated) // prettier-ignore @@ -51,7 +46,7 @@ export function EditVpcSideModalForm() { // page's VPC gets cleared out while we're still on the page. If we're // navigating to a different page, its query will fetch anew regardless. if (vpc.name === updatedVpc.name) { - queryClient.invalidateQueries('vpcView') + queryClient.invalidateEndpoint('vpcView') } }, }) diff --git a/app/pages/lookups.ts b/app/pages/lookups.ts index 52413f2e42..9fa98cd2e3 100644 --- a/app/pages/lookups.ts +++ b/app/pages/lookups.ts @@ -7,19 +7,19 @@ */ import { redirect, type LoaderFunctionArgs } from 'react-router-dom' -import { apiQueryClient } from '@oxide/api' +import { apiq, queryClient } from '@oxide/api' import { trigger404 } from '~/components/ErrorBoundary' import { pb } from '~/util/path-builder' export async function instanceLookupLoader({ params }: LoaderFunctionArgs) { try { - const instance = await apiQueryClient.fetchQuery('instanceView', { - path: { instance: params.instance! }, - }) - const project = await apiQueryClient.fetchQuery('projectView', { - path: { project: instance.projectId }, - }) + const instance = await queryClient.fetchQuery( + apiq('instanceView', { path: { instance: params.instance! } }) + ) + const project = await queryClient.fetchQuery( + apiq('projectView', { path: { project: instance.projectId } }) + ) return redirect(pb.instance({ project: project.name, instance: instance.name })) } catch (_e) { throw trigger404 diff --git a/app/pages/project/floating-ips/FloatingIpsPage.tsx b/app/pages/project/floating-ips/FloatingIpsPage.tsx index de198518a0..39053df5ef 100644 --- a/app/pages/project/floating-ips/FloatingIpsPage.tsx +++ b/app/pages/project/floating-ips/FloatingIpsPage.tsx @@ -11,11 +11,10 @@ import { useForm } from 'react-hook-form' import { Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router-dom' import { - apiQueryClient, + apiq, getListQFn, queryClient, useApiMutation, - useApiQueryClient, usePrefetchedQuery, type FloatingIp, type Instance, @@ -67,15 +66,12 @@ FloatingIpsPage.loader = async ({ params }: LoaderFunctionArgs) => { // fetch IP Pools and preload into RQ cache so fetches by ID in // IpPoolCell can be mostly instant yet gracefully fall back to // fetching individually if we don't fetch them all here - apiQueryClient - .fetchQuery('projectIpPoolList', { query: { limit: ALL_ISH } }) + queryClient + .fetchQuery(apiq('projectIpPoolList', { query: { limit: ALL_ISH } })) .then((pools) => { for (const pool of pools.items) { - apiQueryClient.setQueryData( - 'projectIpPoolView', - { path: { pool: pool.id } }, - pool - ) + const { queryKey } = apiq('projectIpPoolView', { path: { pool: pool.id } }) + queryClient.setQueryData(queryKey, pool) } }), ]) @@ -102,14 +98,13 @@ const staticCols = [ export function FloatingIpsPage() { const [floatingIpToModify, setFloatingIpToModify] = useState(null) - const queryClient = useApiQueryClient() const { project } = useProjectSelector() const { data: instances } = usePrefetchedQuery(instanceList(project).optionsFn()) const navigate = useNavigate() const { mutateAsync: floatingIpDetach } = useApiMutation('floatingIpDetach', { onSuccess(floatingIp) { - queryClient.invalidateQueries('floatingIpList') + queryClient.invalidateEndpoint('floatingIpList') addToast(<>Floating IP {floatingIp.name} detached) // prettier-ignore }, onError: (err) => { @@ -118,8 +113,8 @@ export function FloatingIpsPage() { }) const { mutateAsync: deleteFloatingIp } = useApiMutation('floatingIpDelete', { onSuccess(_data, variables) { - queryClient.invalidateQueries('floatingIpList') - queryClient.invalidateQueries('ipPoolUtilizationView') + queryClient.invalidateEndpoint('floatingIpList') + queryClient.invalidateEndpoint('ipPoolUtilizationView') addToast(<>Floating IP {variables.path.floatingIp} deleted) // prettier-ignore }, }) @@ -171,14 +166,11 @@ export function FloatingIpsPage() { { label: 'Edit', onActivate: () => { - apiQueryClient.setQueryData( - 'floatingIpView', - { - path: { floatingIp: floatingIp.name }, - query: { project }, - }, - floatingIp - ) + const { queryKey } = apiq('floatingIpView', { + path: { floatingIp: floatingIp.name }, + query: { project }, + }) + queryClient.setQueryData(queryKey, floatingIp) navigate(pb.floatingIpEdit({ project, floatingIp: floatingIp.name })) }, }, @@ -251,10 +243,9 @@ const AttachFloatingIpModal = ({ project: string onDismiss: () => void }) => { - const queryClient = useApiQueryClient() const floatingIpAttach = useApiMutation('floatingIpAttach', { onSuccess(floatingIp) { - queryClient.invalidateQueries('floatingIpList') + queryClient.invalidateEndpoint('floatingIpList') addToast(<>Floating IP {floatingIp.name} attached) // prettier-ignore onDismiss() }, diff --git a/app/pages/project/vpcs/VpcPage/VpcPage.tsx b/app/pages/project/vpcs/VpcPage/VpcPage.tsx index 97adda95eb..dfb6a0f041 100644 --- a/app/pages/project/vpcs/VpcPage/VpcPage.tsx +++ b/app/pages/project/vpcs/VpcPage/VpcPage.tsx @@ -8,12 +8,7 @@ import { useMemo } from 'react' import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom' -import { - apiQueryClient, - useApiMutation, - useApiQueryClient, - usePrefetchedApiQuery, -} from '@oxide/api' +import { apiq, queryClient, useApiMutation, usePrefetchedQuery } from '@oxide/api' import { Networking24Icon } from '@oxide/design-system/icons/react' import { HL } from '~/components/HL' @@ -27,28 +22,27 @@ import { DateTime } from '~/ui/lib/DateTime' import { PageHeader, PageTitle } from '~/ui/lib/PageHeader' import { PropertiesTable } from '~/ui/lib/PropertiesTable' import { pb } from '~/util/path-builder' +import type * as PP from '~/util/path-params' import { VpcDocsPopover } from '../VpcsPage' +const vpcView = ({ project, vpc }: PP.Vpc) => + apiq('vpcView', { path: { vpc }, query: { project } }) + VpcPage.loader = async ({ params }: LoaderFunctionArgs) => { - const { project, vpc } = getVpcSelector(params) - await apiQueryClient.prefetchQuery('vpcView', { path: { vpc }, query: { project } }) + await queryClient.prefetchQuery(vpcView(getVpcSelector(params))) return null } export function VpcPage() { - const queryClient = useApiQueryClient() const navigate = useNavigate() const vpcSelector = useVpcSelector() const { project, vpc: vpcName } = vpcSelector - const { data: vpc } = usePrefetchedApiQuery('vpcView', { - path: { vpc: vpcName }, - query: { project }, - }) + const { data: vpc } = usePrefetchedQuery(vpcView(vpcSelector)) const { mutateAsync: deleteVpc } = useApiMutation('vpcDelete', { onSuccess(_data, variables) { - queryClient.invalidateQueries('vpcList') + queryClient.invalidateEndpoint('vpcList') navigate(pb.vpcs({ project })) addToast(<>VPC {variables.path.vpc} deleted) // prettier-ignore }, diff --git a/app/pages/project/vpcs/VpcsPage.tsx b/app/pages/project/vpcs/VpcsPage.tsx index 1b8282a4a4..6f23956f65 100644 --- a/app/pages/project/vpcs/VpcsPage.tsx +++ b/app/pages/project/vpcs/VpcsPage.tsx @@ -5,19 +5,12 @@ * * Copyright Oxide Computer Company */ +import { useQuery } from '@tanstack/react-query' import { createColumnHelper } from '@tanstack/react-table' import { useCallback, useMemo } from 'react' import { Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router-dom' -import { - apiQueryClient, - getListQFn, - queryClient, - useApiMutation, - useApiQuery, - useApiQueryClient, - type Vpc, -} from '@oxide/api' +import { apiq, getListQFn, queryClient, useApiMutation, type Vpc } from '@oxide/api' import { Networking16Icon, Networking24Icon } from '@oxide/design-system/icons/react' import { DocsPopover } from '~/components/DocsPopover' @@ -61,7 +54,7 @@ export const VpcDocsPopover = () => ( ) const FirewallRuleCount = ({ project, vpc }: PP.Vpc) => { - const { data } = useApiQuery('vpcFirewallRulesView', { query: { project, vpc } }) + const { data } = useQuery(apiq('vpcFirewallRulesView', { query: { project, vpc } })) if (!data) return // loading @@ -79,13 +72,12 @@ VpcsPage.loader = async ({ params }: LoaderFunctionArgs) => { } export function VpcsPage() { - const queryClient = useApiQueryClient() const { project } = useProjectSelector() const navigate = useNavigate() const { mutateAsync: deleteVpc } = useApiMutation('vpcDelete', { onSuccess(_data, variables) { - queryClient.invalidateQueries('vpcList') + queryClient.invalidateEndpoint('vpcList') addToast(<>VPC {variables.path.vpc} deleted) // prettier-ignore }, }) @@ -95,9 +87,8 @@ export function VpcsPage() { { label: 'Edit', onActivate() { - apiQueryClient.setQueryData( - 'vpcView', - { path: { vpc: vpc.name }, query: { project } }, + queryClient.setQueryData( + apiq('vpcView', { path: { vpc: vpc.name }, query: { project } }).queryKey, vpc ) navigate(pb.vpcEdit({ project, vpc: vpc.name }), { state: vpc })