Skip to content

Commit 4e335ba

Browse files
dawsontothdawsontoth
committed
fix: Use params loosely
https://harperdb.atlassian.net/browse/STUDIO-403
1 parent c01be24 commit 4e335ba

File tree

16 files changed

+38
-82
lines changed

16 files changed

+38
-82
lines changed

‎src/components/Navbar.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { useLogoutMutation } from '@/features/auth/hooks/useLogout';
88
import { useOverallAuth } from '@/hooks/useAuth';
99
import { useOrganizationPermissions, useOrganizationRolePermissions } from '@/hooks/usePermissions';
1010
import { getDefaultSignedInCloudRouteForUser } from '@/lib/urls/getDefaultSignedInCloudRouteForUser';
11-
import { getRouteApi, Link, useNavigate, useRouter } from '@tanstack/react-router';
11+
import { Link, useNavigate, useParams, useRouter } from '@tanstack/react-router';
1212
import {
1313
BookOpenTextIcon,
1414
BuildingIcon,
@@ -24,14 +24,12 @@ import {
2424
import { useCallback, useState } from 'react';
2525
import { toast } from 'sonner';
2626

27-
const route = getRouteApi('');
28-
2927
const activeLinkProps = { className: 'text-white' };
3028

3129
function MobileNav({ signOut }: { signOut: () => void }) {
3230
const { user } = useOverallAuth();
3331
const defaultCloudRoute = getDefaultSignedInCloudRouteForUser(user);
34-
const { organizationId }: { organizationId: string; } = route.useParams();
32+
const { organizationId }: { organizationId: string; } = useParams({ strict: false });
3533
const { update: canUpdateOrganization } = useOrganizationPermissions(organizationId);
3634
const { view: showOrgUsersAndRoles } = useOrganizationRolePermissions(organizationId);
3735
const showBilling = canUpdateOrganization;
@@ -128,7 +126,7 @@ function MobileNav({ signOut }: { signOut: () => void }) {
128126
function DesktopNav({ signOut }: { signOut: () => void }) {
129127
const { user } = useOverallAuth();
130128
const defaultCloudRoute = getDefaultSignedInCloudRouteForUser(user);
131-
const { organizationId }: { organizationId: string; } = route.useParams();
129+
const { organizationId }: { organizationId: string; } = useParams({ strict: false });
132130
const { update: canUpdateOrganization } = useOrganizationPermissions(organizationId);
133131
const { view: showOrgUsersAndRoles } = useOrganizationRolePermissions(organizationId);
134132
const showBilling = canUpdateOrganization;

‎src/features/cluster/ClusterSetPassword.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,14 @@ import { authStore } from '@/lib/authStore';
1919
import { getOperationsUrlForCluster } from '@/lib/urls/getOperationsUrlForCluster';
2020
import { zodResolver } from '@hookform/resolvers/zod';
2121
import { useQuery } from '@tanstack/react-query';
22-
import { getRouteApi, Navigate, useNavigate, useRouter, useSearch } from '@tanstack/react-router';
22+
import { Navigate, useNavigate, useParams, useRouter, useSearch } from '@tanstack/react-router';
2323
import { useCallback, useMemo } from 'react';
2424
import { useForm } from 'react-hook-form';
2525
import { toast } from 'sonner';
2626
import { z } from 'zod';
2727

28-
const route = getRouteApi('');
29-
3028
export function ClusterSetPassword() {
31-
const { clusterId }: { clusterId: string; } = route.useParams();
29+
const { clusterId }: { clusterId: string; } = useParams({ strict: false });
3230
const { data: cluster } = useQuery(
3331
getClusterInfoQueryOptions(clusterId, true),
3432
);

‎src/features/cluster/index.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,12 @@ import { Instance } from '@/lib/api.patch';
1111
import { humanFileSize } from '@/lib/humanFileSize';
1212
import { InstanceTypes, renderInstanceTypeOption } from '@/lib/InstanceType';
1313
import { useQuery } from '@tanstack/react-query';
14-
import { getRouteApi } from '@tanstack/react-router';
14+
import { useParams } from '@tanstack/react-router';
1515
import { ColumnDef } from '@tanstack/react-table';
1616
import { useMemo } from 'react';
1717

18-
const route = getRouteApi('');
19-
2018
export function ClusterIndex() {
21-
const { clusterId }: { clusterId: string; } = route.useParams();
19+
const { clusterId }: { clusterId: string; } = useParams({ strict: false });
2220
const { data: cluster, isLoading: clusterIsLoading } = useQuery(
2321
getClusterInfoQueryOptions(clusterId, true),
2422
);

‎src/features/clusters/ClustersList.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { ConfirmDeletionModal } from '@/components/ConfirmDeletionModal';
2+
import { SubNavMenu } from '@/components/SubNavMenu';
23
import { Badge } from '@/components/ui/badge';
34
import { Button } from '@/components/ui/button';
45
import { Input } from '@/components/ui/input';
56
import { renderBadgeStatusText, renderBadgeStatusVariant } from '@/components/ui/utils/badgeStatus';
67
import { ClusterCard } from '@/features/clusters/components/ClusterCard';
8+
import { useTerminateClusterMutation } from '@/features/clusters/mutations/terminateCluster';
79
import { getOrganizationQueryOptions } from '@/features/organization/queries/getOrganizationQuery';
810
import { useOrganizationClusterPermissions } from '@/hooks/usePermissions';
911
import { Cluster } from '@/lib/api.patch';
@@ -12,18 +14,14 @@ import { groupBy } from '@/lib/groupBy';
1214
import { curryFilterByFuzzySearch } from '@/lib/string/filterByFuzzySearch';
1315
import { queryKeys } from '@/react-query/constants';
1416
import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
15-
import { getRouteApi, Link } from '@tanstack/react-router';
17+
import { Link, useParams } from '@tanstack/react-router';
1618
import { Plus } from 'lucide-react';
1719
import { FormEvent, useCallback, useMemo, useState } from 'react';
1820
import { toast } from 'sonner';
19-
import { useTerminateClusterMutation } from '@/features/clusters/mutations/terminateCluster';
20-
import { SubNavMenu } from '@/components/SubNavMenu';
21-
22-
const route = getRouteApi('');
2321

2422
export function ClustersList() {
2523
const queryClient = useQueryClient();
26-
const { organizationId }: { organizationId: string } = route.useParams();
24+
const { organizationId }: { organizationId: string } = useParams({ strict: false });
2725
const { create } = useOrganizationClusterPermissions(organizationId);
2826
const { data: orgInfo, isSuccess } = useSuspenseQuery(getOrganizationQueryOptions(organizationId));
2927
const { mutate: terminateCluster, isPending: isTerminateClusterPending } = useTerminateClusterMutation();

‎src/features/instance/InstanceLayout.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import { getInstanceInfoQueryOptions } from '@/features/cluster/queries/getInstanceInfoQuery';
22
import { InstanceNavBar } from '@/features/instance/InstanceNavBar';
33
import { useSuspenseQuery } from '@tanstack/react-query';
4-
import { getRouteApi, Outlet } from '@tanstack/react-router';
5-
6-
const route = getRouteApi('');
4+
import { Outlet, useParams } from '@tanstack/react-router';
75

86
export function InstanceLayout() {
9-
const params: { instanceId?: string; clusterId?: string; } = route.useParams();
7+
const params: { instanceId?: string; clusterId?: string; } = useParams({ strict: false });
108
const { isSuccess } = useSuspenseQuery(getInstanceInfoQueryOptions(params));
119

1210
if (!isSuccess) {

‎src/features/instance/config/roles/index.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,19 @@ import { getListRolesQueryOptions } from '@/features/instance/operations/queries
88
import { useRefreshClick } from '@/hooks/useRefreshClick';
99
import { LocalRole } from '@/lib/api.patch';
1010
import { useSuspenseQuery } from '@tanstack/react-query';
11-
import { getRouteApi, useNavigate } from '@tanstack/react-router';
11+
import { useNavigate, useParams } from '@tanstack/react-router';
1212
import { Row } from '@tanstack/react-table';
1313
import { PlusIcon, RefreshCwIcon } from 'lucide-react';
1414
import { Suspense, useCallback, useMemo, useState } from 'react';
1515
import { EditRoleModal } from './modals/EditRoleModal';
1616

17-
const route = getRouteApi('');
18-
1917
export function ConfigRolesIndex() {
2018
const navigate = useNavigate();
2119
const { clusterId, instanceId, roleId }: {
2220
instanceId?: string;
2321
clusterId?: string;
2422
roleId?: string;
25-
} = route.useParams();
23+
} = useParams({ strict: false });
2624
const instanceParams = useInstanceClientIdParams();
2725
const {
2826
data: localRoles,

‎src/features/instance/config/users/index.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,18 @@ import { getListUsersQueryOptions } from '@/features/instance/operations/queries
99
import { useRefreshClick } from '@/hooks/useRefreshClick';
1010
import { LocalUser } from '@/lib/api.patch';
1111
import { useSuspenseQuery } from '@tanstack/react-query';
12-
import { getRouteApi, useNavigate } from '@tanstack/react-router';
12+
import { useNavigate, useParams } from '@tanstack/react-router';
1313
import { Row } from '@tanstack/react-table';
1414
import { PlusIcon, RefreshCwIcon } from 'lucide-react';
1515
import { Suspense, useCallback, useMemo, useState } from 'react';
1616

17-
const route = getRouteApi('');
18-
1917
export function ConfigUsersIndex() {
2018
const navigate = useNavigate();
2119
const { instanceId, clusterId, username }: {
2220
instanceId?: string;
2321
clusterId?: string;
2422
username?: string;
25-
} = route.useParams();
23+
} = useParams({ strict: false });
2624
const instanceParams = useInstanceClientIdParams();
2725
const {
2826
data: localUsers,

‎src/features/instance/databases/components/BrowseDataTableView.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,21 +17,19 @@ import { useInstanceBrowseManagePermission, useInstanceSchemaTablePermission } f
1717
import { useRefreshClick } from '@/hooks/useRefreshClick';
1818
import { queryClient } from '@/react-query/queryClient';
1919
import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
20-
import { getRouteApi, useNavigate } from '@tanstack/react-router';
20+
import { useNavigate, useParams } from '@tanstack/react-router';
2121
import { PaginationState, Row } from '@tanstack/react-table';
2222
import { PlusIcon, RefreshCwIcon, Trash } from 'lucide-react';
2323
import { useCallback, useEffect, useMemo, useState } from 'react';
2424
import { toast } from 'sonner';
2525

26-
const route = getRouteApi('');
27-
2826
export function BrowseDataTableView() {
2927
const allParams: {
3028
clusterId?: string;
3129
instanceId?: string;
3230
databaseName: string;
3331
tableName: string;
34-
} = route.useParams();
32+
} = useParams({ strict: false });
3533

3634
const navigate = useNavigate();
3735
const instanceParams = useInstanceClientIdParams();

‎src/features/instance/databases/components/DatabasesSidebar.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,15 @@ import { CreateNewTableModal } from '@/features/instance/databases/modals/Create
77
import { DeleteDatabaseModal } from '@/features/instance/databases/modals/DeleteDatabaseModal';
88
import { useInstanceBrowseManagePermission } from '@/hooks/usePermissions';
99
import { InstanceDatabaseMap } from '@/lib/api.patch';
10-
import { getRouteApi, useNavigate, useRouter } from '@tanstack/react-router';
10+
import { useLoaderData, useNavigate, useParams, useRouter } from '@tanstack/react-router';
1111
import { ArrowRight } from 'lucide-react';
1212
import { useCallback, useMemo } from 'react';
1313

14-
const route = getRouteApi('');
15-
1614
export function DatabasesSidebar() {
1715
const router = useRouter();
1816

19-
const params: { databaseName?: string; tableName?: string; } = route.useParams();
20-
const instanceDatabaseMap = route.useLoaderData() as InstanceDatabaseMap;
17+
const params: { databaseName?: string; tableName?: string; } = useParams({ strict: false });
18+
const instanceDatabaseMap = useLoaderData({ strict: false }) as InstanceDatabaseMap;
2119
const navigate = useNavigate();
2220
const canManageBrowseInstance = useInstanceBrowseManagePermission();
2321

‎src/features/organization/billing/paymentMethod/PaymentMethodsDisplay.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,17 @@ import {
1010
} from '@/integrations/stripe/translateStripePaymentMethodStatus';
1111
import { formatMonthAndYear } from '@/lib/formatMonthAndYear';
1212
import { useQuery } from '@tanstack/react-query';
13-
import { getRouteApi } from '@tanstack/react-router';
13+
import { useParams } from '@tanstack/react-router';
1414
import { useCallback, useState } from 'react';
1515

16-
const route = getRouteApi('');
17-
1816
interface PaymentMethodsDisplayProps {
1917
onSaveStateForBillingRedirect?: (redirecting: boolean) => void;
2018
onReplacingPaymentMethod?: (value: boolean) => void;
2119
}
2220

2321
export function PaymentMethodsDisplay(props?: PaymentMethodsDisplayProps) {
2422
const { onSaveStateForBillingRedirect, onReplacingPaymentMethod } = props ?? {};
25-
const { organizationId } = route.useParams();
23+
const { organizationId } = useParams({ strict: false });
2624
const { update } = useOrganizationPermissions(organizationId);
2725
const { data: organization, refetch } = useQuery(getOrganizationQueryOptions(organizationId));
2826
const billing = organization?.billing;

0 commit comments

Comments
 (0)