update to use typed routes everywhere

kscalelabs · Nov 9, 2024 · 4ee080a · 4ee080a
1 parent 8a4ac29
commit 4ee080a
Show file tree

Hide file tree

Showing 24 changed files with 131 additions and 136 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -32,15 +32,14 @@ import PrivacyPolicy from "@/components/pages/PrivacyPolicy";
 import Profile from "@/components/pages/Profile";
 import ResearchPage from "@/components/pages/ResearchPage";
 import SellerDashboard from "@/components/pages/SellerDashboard";
+import SellerOnboarding from "@/components/pages/SellerOnboarding";
 import Signup from "@/components/pages/Signup";
 import Terminal from "@/components/pages/Terminal";
 import TermsOfService from "@/components/pages/TermsOfService";
 import { AlertQueue, AlertQueueProvider } from "@/hooks/useAlertQueue";
 import { AuthenticationProvider } from "@/hooks/useAuth";
 import ROUTES from "@/lib/types/routes";
 
-import SellerOnboarding from "./components/pages/SellerOnboarding";
-
 const App = () => {
   return (
     <Router>
@@ -97,44 +96,53 @@ const App = () => {
                           element={<EmailSignup />}
                         />
                         <Route path={ROUTES.KEYS.path} element={<APIKeys />} />
+                        <Route
+                          path={ROUTES.PROFILE.path}
+                          element={<Profile />}
+                        />
 
                         {/* Listings */}
-                        <Route path={ROUTES.CREATE.path} element={<Create />} />
-                        <Route path={ROUTES.BROWSE.path} element={<Browse />} />
+                        <Route path={ROUTES.LISTINGS.path}>
+                          <Route
+                            path={ROUTES.LISTINGS.$.BROWSE.relativePath}
+                            element={<Browse />}
+                          />
+                          <Route
+                            path={ROUTES.LISTINGS.$.CREATE.relativePath}
+                            element={<Create />}
+                          />
+                        </Route>
                         <Route
                           path={ROUTES.LISTING.path}
                           element={<Listing />}
                         />
-                        <Route
-                          path={ROUTES.PROFILE.path}
-                          element={<Profile />}
-                        />
                         <Route
                           path={ROUTES.FILE.path}
                           element={<FileBrowser />}
                         />
 
                         {/* Seller */}
-                        <Route path={ROUTES.SELL.path}>
+                        <Route
+                          path={ROUTES.SELL.path}
+                          element={<SellerDashboard />}
+                        >
                           <Route
-                            path={ROUTES.SELL.ONBOARDING.path}
+                            path={ROUTES.SELL.$.ONBOARDING.relativePath}
                             element={<SellerOnboarding />}
                           />
                           <Route
-                            path={ROUTES.SELL.DASHBOARD.path}
-                            element={<SellerDashboard />}
-                          />
-                          <Route
-                            path={ROUTES.SELL.DELETE.path}
+                            path={ROUTES.SELL.$.DELETE.relativePath}
                             element={<DeleteConnect />}
                           />
                         </Route>
 
                         {/* Orders */}
-                        <Route
-                          path={ROUTES.ORDER.SUCCESS.path}
-                          element={<OrderSuccess />}
-                        />
+                        <Route path={ROUTES.ORDER.path}>
+                          <Route
+                            path={ROUTES.ORDER.$.SUCCESS.relativePath}
+                            element={<OrderSuccess />}
+                          />
+                        </Route>
                         <Route
                           path={ROUTES.ORDERS.path}
                           element={<OrdersPage />}

diff --git a/frontend/src/components/auth/SignupForm.tsx b/frontend/src/components/auth/SignupForm.tsx
@@ -57,7 +57,7 @@ const SignupForm: React.FC<SignupFormProps> = ({ signupTokenId }) => {
         addErrorAlert(error);
       } else {
         addAlert("Registration successful! You can now log in.", "success");
-        navigate("/login");
+        navigate(ROUTES.LOGIN.path);
         // Sign user in automatically?
       }
     } catch (err) {

diff --git a/frontend/src/components/listing/ListingDeleteButton.tsx b/frontend/src/components/listing/ListingDeleteButton.tsx
@@ -6,6 +6,7 @@ import Modal from "@/components/ui/Modal";
 import { Button } from "@/components/ui/button";
 import { useAlertQueue } from "@/hooks/useAlertQueue";
 import { useAuthentication } from "@/hooks/useAuth";
+import ROUTES from "@/lib/types/routes";
 
 interface Props {
   listingId: string;
@@ -37,7 +38,7 @@ const ListingDeleteButton = (props: Props) => {
       setDeleting(false);
     } else {
       addAlert("Listing was deleted successfully", "success");
-      navigate("/browse");
+      navigate(ROUTES.LISTINGS.BROWSE.path);
     }
   };
 

diff --git a/frontend/src/components/listing/ListingMetadata.tsx b/frontend/src/components/listing/ListingMetadata.tsx
@@ -10,6 +10,7 @@ import { useNavigate } from "react-router-dom";
 
 import { useAlertQueue } from "@/hooks/useAlertQueue";
 import { useAuthentication } from "@/hooks/useAuth";
+import ROUTES from "@/lib/types/routes";
 
 interface Props {
   listingId: string;
@@ -110,7 +111,7 @@ const ListingMetadata = ({
         <div className="flex items-center gap-2">
           <button
             onClick={() => {
-              navigate(`/profile/${creatorId}`);
+              navigate(ROUTES.PROFILE.buildPath({ id: creatorId }));
             }}
             className="text-blue-500 hover:bg-gray-100 rounded px-1 flex items-center gap-1"
           >

diff --git a/frontend/src/components/listing/artifacts/TgzArtifact.tsx b/frontend/src/components/listing/artifacts/TgzArtifact.tsx
@@ -60,7 +60,7 @@ const UrdfViewerButton = ({ artifact }: Props) => {
     <Button
       className="p-3 w-full mt-2"
       onClick={() => {
-        navigate(`/file/${artifact.artifact_id}`);
+        navigate(ROUTES.FILE.buildPath({ artifactId: artifact.artifact_id }));
       }}
       variant="secondary"
     >

diff --git a/frontend/src/components/modals/RegisterRobotModal.tsx b/frontend/src/components/modals/RegisterRobotModal.tsx
@@ -14,6 +14,7 @@ import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { useAlertQueue } from "@/hooks/useAlertQueue";
 import { useAuthentication } from "@/hooks/useAuth";
+import ROUTES from "@/lib/types/routes";
 
 import Spinner from "../ui/Spinner";
 
@@ -52,7 +53,7 @@ export function RegisterRobotModal({
         addErrorAlert(error);
       } else {
         addAlert("Robot registered successfully", "success");
-        navigate(`/terminal/${data.id}`);
+        navigate(ROUTES.TERMINAL.WITH_ID.buildPath({ id: data.id }));
       }
     } catch (error) {
       addErrorAlert(error);

diff --git a/frontend/src/components/nav/Navbar.tsx b/frontend/src/components/nav/Navbar.tsx
@@ -47,7 +47,7 @@ const Navbar = () => {
   const technicalItems = [
     {
       name: "Builds",
-      path: ROUTES.BROWSE.path,
+      path: ROUTES.LISTINGS.BROWSE.path,
       icon: <MagnifyingGlassIcon className="h-5 w-5" />,
       isExternal: false,
     },

diff --git a/frontend/src/components/pages/Browse.tsx b/frontend/src/components/pages/Browse.tsx
@@ -16,6 +16,7 @@ import {
 import { components, paths } from "@/gen/api";
 import { useAlertQueue } from "@/hooks/useAlertQueue";
 import { useAuthentication } from "@/hooks/useAuth";
+import ROUTES from "@/lib/types/routes";
 import { useDebounce } from "@uidotdev/usehooks";
 
 type SortOption = components["schemas"]["SortOption"];
@@ -164,7 +165,7 @@ const Browse = () => {
               </DropdownMenuContent>
             </DropdownMenu>
             <Button
-              onClick={() => navigate(`/create`)}
+              onClick={() => navigate(ROUTES.LISTINGS.CREATE.path)}
               variant="primary"
               size="lg"
               className="w-full md:w-auto"

diff --git a/frontend/src/components/pages/Create.tsx b/frontend/src/components/pages/Create.tsx
@@ -14,6 +14,7 @@ import { Button } from "@/components/ui/button";
 import { useAlertQueue } from "@/hooks/useAlertQueue";
 import { useAuthentication } from "@/hooks/useAuth";
 import { NewListingSchema, NewListingType } from "@/lib/types";
+import ROUTES from "@/lib/types/routes";
 import { slugify } from "@/lib/utils/formatString";
 import { convertToCents, convertToDecimal } from "@/lib/utils/priceFormat";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -136,7 +137,12 @@ const Create = () => {
 
       if (responseData && responseData.username && responseData.slug) {
         addAlert("New listing was created successfully", "success");
-        navigate(`/item/${responseData.username}/${responseData.slug}`);
+        navigate(
+          ROUTES.LISTING.buildPath({
+            username: responseData.username,
+            slug: responseData.slug,
+          }),
+        );
       } else {
         throw new Error("Invalid response data");
       }

diff --git a/frontend/src/components/pages/DeleteConnect.tsx b/frontend/src/components/pages/DeleteConnect.tsx
@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
 
 import { useAlertQueue } from "@/hooks/useAlertQueue";
 import { useAuthentication } from "@/hooks/useAuth";
+import ROUTES from "@/lib/types/routes";
 
 export default function DeleteConnect() {
   const navigate = useNavigate();
@@ -13,12 +14,12 @@ export default function DeleteConnect() {
     if (auth.isLoading) return;
 
     if (!auth.isAuthenticated) {
-      navigate("/login");
+      navigate(ROUTES.LOGIN.path);
       return;
     }
 
     if (!auth.currentUser?.permissions?.includes("is_admin")) {
-      navigate("/");
+      navigate(ROUTES.HOME.path);
       return;
     }
   }, [auth.isLoading, auth.isAuthenticated]);
@@ -37,7 +38,7 @@ export default function DeleteConnect() {
 
       addAlert(`Successfully deleted ${data.count} test accounts`, "success");
       setTimeout(() => {
-        navigate("/sell/onboarding");
+        navigate(ROUTES.SELL.ONBOARDING.path);
       }, 2000);
     } catch (error) {
       addErrorAlert(`Failed to delete test accounts: ${error}`);

diff --git a/frontend/src/components/pages/EmailSignup.tsx b/frontend/src/components/pages/EmailSignup.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+import { useTypedParams } from "react-router-typesafe-routes/dom";
 
 import SignupForm from "@/components/auth/SignupForm";
 import { Card, CardContent, CardHeader } from "@/components/ui/Card";
@@ -8,6 +9,7 @@ import { Button } from "@/components/ui/button";
 import { paths } from "@/gen/api";
 import { useAlertQueue } from "@/hooks/useAlertQueue";
 import { useAuthentication } from "@/hooks/useAuth";
+import ROUTES from "@/lib/types/routes";
 
 type GetEmailSignUpTokenResponse =
   paths["/auth/email/signup/get/{id}"]["get"]["responses"][200]["content"]["application/json"];
@@ -16,7 +18,7 @@ const EmailSignup = () => {
   const navigate = useNavigate();
   const auth = useAuthentication();
   const { addErrorAlert } = useAlertQueue();
-  const { id } = useParams();
+  const { id } = useTypedParams(ROUTES.SIGNUP.EMAIL);
   const [signupToken, setSignupToken] =
     useState<GetEmailSignUpTokenResponse | null>(null);
 
@@ -64,7 +66,7 @@ const EmailSignup = () => {
               <Button
                 variant="primary"
                 onClick={() => {
-                  navigate("/login");
+                  navigate(ROUTES.LOGIN.path);
                 }}
               >
                 Login / Signup

diff --git a/frontend/src/components/pages/FileBrowser.tsx b/frontend/src/components/pages/FileBrowser.tsx
@@ -6,7 +6,8 @@ import {
   FaPen,
   FaTimes,
 } from "react-icons/fa";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+import { useTypedParams } from "react-router-typesafe-routes/dom";
 
 import FileRenderer from "@/components/files/FileRenderer";
 import FileTreeViewer from "@/components/files/FileTreeViewer";
@@ -18,6 +19,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { components } from "@/gen/api";
 import { humanReadableError, useAlertQueue } from "@/hooks/useAlertQueue";
 import { useAuthentication } from "@/hooks/useAuth";
+import ROUTES from "@/lib/types/routes";
 import pako from "pako";
 
 type SingleArtifactResponse = components["schemas"]["SingleArtifactResponse"];
@@ -28,7 +30,7 @@ interface UntarredFile {
 }
 
 const FileBrowser = () => {
-  const { artifactId } = useParams<{ artifactId: string }>();
+  const { artifactId } = useTypedParams(ROUTES.FILE);
   const [artifact, setArtifact] = useState<SingleArtifactResponse | null>(null);
   const [loading, setLoading] = useState(true);
   const [untarring, setUntarring] = useState(false);
@@ -42,7 +44,7 @@ const FileBrowser = () => {
   const [isSaving, setIsSaving] = useState(false);
 
   if (!artifactId) {
-    navigate("/");
+    navigate(ROUTES.HOME.path);
     return null;
   }
 
@@ -215,7 +217,12 @@ const FileBrowser = () => {
               <Tooltip content="View Listing" position="bottom">
                 <Button
                   onClick={() =>
-                    navigate(`/item/${artifact.username}/${artifact.slug}`)
+                    navigate(
+                      ROUTES.LISTING.buildPath({
+                        username: artifact.username,
+                        slug: artifact.slug,
+                      }),
+                    )
                   }
                   variant="ghost"
                   size="icon"