refactor: use search param instead of path param when linking a device (#414)

Closes FRONT-545

Author: jog1t

apps/hub/src/routeTree.gen.ts

@@ -17,10 +17,11 @@ import { Route as AuthenticatedBillingImport } from './routes/_authenticated/bil
 import { Route as AuthenticatedLayoutImport } from './routes/_authenticated/_layout'
 import { Route as AuthenticatedLayoutIndexImport } from './routes/_authenticated/_layout/index'
 import { Route as AuthenticatedInviteInviteCodeImport } from './routes/_authenticated/invite.$inviteCode'
+import { Route as AuthenticatedDevicesLinkImport } from './routes/_authenticated/devices.link'
 import { Route as AuthenticatedAccessTokenTokenImport } from './routes/_authenticated/access-token.$token'
 import { Route as AuthenticatedLayoutMyProfileImport } from './routes/_authenticated/_layout/my-profile'
 import { Route as AuthenticatedLayoutMyProfileIndexImport } from './routes/_authenticated/_layout/my-profile/index'
-import { Route as AuthenticatedDevicesLinkTokenImport } from './routes/_authenticated/devices.link.$token'
+import { Route as AuthenticatedDevicesLinkTokenImport } from './routes/_authenticated/devices.link_.$token'
 import { Route as AuthenticatedLayoutTeamsGroupIdImport } from './routes/_authenticated/_layout/teams/$groupId'
 import { Route as AuthenticatedLayoutProjectsProjectIdImport } from './routes/_authenticated/_layout/projects/$projectId'
 import { Route as AuthenticatedLayoutMyProfileFeaturesImport } from './routes/_authenticated/_layout/my-profile/features'
@@ -89,6 +90,11 @@ const AuthenticatedInviteInviteCodeRoute =
     getParentRoute: () => AuthenticatedRoute,
   } as any)
 
+const AuthenticatedDevicesLinkRoute = AuthenticatedDevicesLinkImport.update({
+  path: '/devices/link',
+  getParentRoute: () => AuthenticatedRoute,
+} as any)
+
 const AuthenticatedAccessTokenTokenRoute =
   AuthenticatedAccessTokenTokenImport.update({
     path: '/access-token/$token',
@@ -414,6 +420,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthenticatedAccessTokenTokenImport
       parentRoute: typeof AuthenticatedImport
     }
+    '/_authenticated/devices/link': {
+      id: '/_authenticated/devices/link'
+      path: '/devices/link'
+      fullPath: '/devices/link'
+      preLoaderRoute: typeof AuthenticatedDevicesLinkImport
+      parentRoute: typeof AuthenticatedImport
+    }
     '/_authenticated/invite/$inviteCode': {
       id: '/_authenticated/invite/$inviteCode'
       path: '/invite/$inviteCode'
@@ -915,6 +928,7 @@ interface AuthenticatedRouteChildren {
   AuthenticatedLayoutRoute: typeof AuthenticatedLayoutRouteWithChildren
   AuthenticatedBillingRoute: typeof AuthenticatedBillingRoute
   AuthenticatedAccessTokenTokenRoute: typeof AuthenticatedAccessTokenTokenRoute
+  AuthenticatedDevicesLinkRoute: typeof AuthenticatedDevicesLinkRoute
   AuthenticatedInviteInviteCodeRoute: typeof AuthenticatedInviteInviteCodeRoute
   AuthenticatedDevicesLinkTokenRoute: typeof AuthenticatedDevicesLinkTokenRoute
 }
@@ -923,6 +937,7 @@ const AuthenticatedRouteChildren: AuthenticatedRouteChildren = {
   AuthenticatedLayoutRoute: AuthenticatedLayoutRouteWithChildren,
   AuthenticatedBillingRoute: AuthenticatedBillingRoute,
   AuthenticatedAccessTokenTokenRoute: AuthenticatedAccessTokenTokenRoute,
+  AuthenticatedDevicesLinkRoute: AuthenticatedDevicesLinkRoute,
   AuthenticatedInviteInviteCodeRoute: AuthenticatedInviteInviteCodeRoute,
   AuthenticatedDevicesLinkTokenRoute: AuthenticatedDevicesLinkTokenRoute,
 }
@@ -937,6 +952,7 @@ export interface FileRoutesByFullPath {
   '/billing': typeof AuthenticatedBillingRoute
   '/my-profile': typeof AuthenticatedLayoutMyProfileRouteWithChildren
   '/access-token/$token': typeof AuthenticatedAccessTokenTokenRoute
+  '/devices/link': typeof AuthenticatedDevicesLinkRoute
   '/invite/$inviteCode': typeof AuthenticatedInviteInviteCodeRoute
   '/': typeof AuthenticatedLayoutIndexRoute
   '/games/$': typeof AuthenticatedLayoutGamesSplatRoute
@@ -982,6 +998,7 @@ export interface FileRoutesByTo {
   '/login': typeof LoginRoute
   '/billing': typeof AuthenticatedBillingRoute
   '/access-token/$token': typeof AuthenticatedAccessTokenTokenRoute
+  '/devices/link': typeof AuthenticatedDevicesLinkRoute
   '/invite/$inviteCode': typeof AuthenticatedInviteInviteCodeRoute
   '/': typeof AuthenticatedLayoutIndexRoute
   '/games/$': typeof AuthenticatedLayoutGamesSplatRoute
@@ -1023,6 +1040,7 @@ export interface FileRoutesById {
   '/_authenticated/billing': typeof AuthenticatedBillingRoute
   '/_authenticated/_layout/my-profile': typeof AuthenticatedLayoutMyProfileRouteWithChildren
   '/_authenticated/access-token/$token': typeof AuthenticatedAccessTokenTokenRoute
+  '/_authenticated/devices/link': typeof AuthenticatedDevicesLinkRoute
   '/_authenticated/invite/$inviteCode': typeof AuthenticatedInviteInviteCodeRoute
   '/_authenticated/_layout/': typeof AuthenticatedLayoutIndexRoute
   '/_authenticated/_layout/games/$': typeof AuthenticatedLayoutGamesSplatRoute
@@ -1071,6 +1089,7 @@ export interface FileRouteTypes {
     | '/billing'
     | '/my-profile'
     | '/access-token/$token'
+    | '/devices/link'
     | '/invite/$inviteCode'
     | '/'
     | '/games/$'
@@ -1115,6 +1134,7 @@ export interface FileRouteTypes {
     | '/login'
     | '/billing'
     | '/access-token/$token'
+    | '/devices/link'
     | '/invite/$inviteCode'
     | '/'
     | '/games/$'
@@ -1154,6 +1174,7 @@ export interface FileRouteTypes {
     | '/_authenticated/billing'
     | '/_authenticated/_layout/my-profile'
     | '/_authenticated/access-token/$token'
+    | '/_authenticated/devices/link'
     | '/_authenticated/invite/$inviteCode'
     | '/_authenticated/_layout/'
     | '/_authenticated/_layout/games/$'
@@ -1227,6 +1248,7 @@ export const routeTree = rootRoute
         "/_authenticated/_layout",
         "/_authenticated/billing",
         "/_authenticated/access-token/$token",
+        "/_authenticated/devices/link",
         "/_authenticated/invite/$inviteCode",
         "/_authenticated/devices/link/$token"
       ]
@@ -1261,6 +1283,10 @@ export const routeTree = rootRoute
       "filePath": "_authenticated/access-token.$token.tsx",
       "parent": "/_authenticated"
     },
+    "/_authenticated/devices/link": {
+      "filePath": "_authenticated/devices.link.tsx",
+      "parent": "/_authenticated"
+    },
     "/_authenticated/invite/$inviteCode": {
       "filePath": "_authenticated/invite.$inviteCode.tsx",
       "parent": "/_authenticated"
@@ -1300,7 +1326,7 @@ export const routeTree = rootRoute
       ]
     },
     "/_authenticated/devices/link/$token": {
-      "filePath": "_authenticated/devices.link.$token.tsx",
+      "filePath": "_authenticated/devices.link_.$token.tsx",
       "parent": "/_authenticated"
     },
     "/_authenticated/_layout/my-profile/": {

…s/_authenticated/devices.link.$token.tsx …c/routes/_authenticated/devices.link.tsxapps/hub/src/routes/_authenticated/devices.link.$token.tsx renamed to apps/hub/src/routes/_authenticated/devices.link.tsx apps/hub/src/routes/_authenticated/devices.link.$token.tsx renamed to apps/hub/src/routes/_authenticated/devices.link.tsx

@@ -17,8 +17,11 @@ import {
   Text,
 } from "@rivet-gg/components";
 import { Link, createFileRoute, notFound } from "@tanstack/react-router";
+import { zodSearchValidator } from "@tanstack/router-zod-adapter";
+import { z } from "zod";
+
 function DeviceLinkTokenRoute() {
-  const { token } = Route.useParams();
+  const { token } = Route.useSearch();
 
   const { mutateAsync, isSuccess } = useCompleteDeviceLinkMutation();
 
@@ -80,9 +83,14 @@ function DeviceLinkTokenRoute() {
   );
 }
 
-export const Route = createFileRoute("/_authenticated/devices/link/$token")({
+export const searchSchema = z.object({
+  token: z.string(),
+});
+
+export const Route = createFileRoute("/_authenticated/devices/link")({
+  validateSearch: zodSearchValidator(searchSchema),
   component: DeviceLinkTokenRoute,
-  loader: async ({ params: { token } }) => {
+  beforeLoad: async ({ search: { token } }) => {
     try {
       const response = await queryClient.fetchQuery(
         deviceLinkTokenQueryOptions(token),

apps/hub/src/routes/_authenticated/devices.link_.$token.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/_authenticated/devices/link/$token")({
+  beforeLoad: async ({ params: { token } }) => {
+    throw redirect({
+      to: "/devices/link",
+      search: { token },
+    });
+  },
+});