signup

src/App.tsx

@@ -8,6 +8,7 @@ import SignupPage from './pages/SignupPage.tsx'
 function App() {
   const postService = new PostsService()
   const mediaService = new MediaService()
+
   return (
     <BrowserRouter>
       <Routes>
@@ -16,7 +17,7 @@ function App() {
           element={<HomePage postsService={postService} mediaService={mediaService} />}
         />
         <Route path="/u/:username" element={<AuthorPage postsService={postService} />} />
-        <Route path="/signup" element={<SignupPage />} />
+        <Route path="/signup/:code?" element={<SignupPage />} />
       </Routes>
     </BrowserRouter>
   )

src/pages/SignupPage.tsx

@@ -1,11 +1,15 @@
-import { useSearchParams } from 'react-router'
+import { useParams } from 'react-router'
 import { useState } from 'react'
 
 export default function SignupPage() {
-  const [searchParams] = useSearchParams()
+  const { code: signupCode } = useParams()
-  const signupCode = searchParams.get('c')
   const [isSubmitting, setIsSubmitting] = useState(false)
 
+  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setIsSubmitting(true)
+  }
+
   if (!signupCode) {
     return <RejectionMessage />
   }
@@ -13,7 +17,7 @@ export default function SignupPage() {
   return (
     <main className="w-full max-w-3xl mx-auto p-4">
       <div className="mt-12">
-        <form className="flex flex-col gap-4 max-w-md" onSubmit={(e) => e.preventDefault()}>
+        <form className="flex flex-col gap-4 max-w-md" onSubmit={onSubmit}>
           <div className="flex flex-col gap-2">
             <label htmlFor="username" className="text-sm text-gray-600">
               Username