use Router instead of tanstack router

Author: monicasmith463

frontend/src/components/auth/SignUpForm.tsx

@@ -3,11 +3,14 @@ import Input from "@/components/form/input/InputField";
 import Label from "@/components/form/Label";
 import { ChevronLeftIcon, EyeCloseIcon, EyeIcon } from "@/icons";
 import Link from "next/link";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { namePattern, emailPattern, passwordRules } from "@/utils";
-import { useForm } from "react-hook-form";
-import { useSignup } from "@/hooks/useSignup";
+import { type SubmitHandler, useForm } from "react-hook-form"
+import useAuth, { isLoggedIn } from "@/hooks/useAuth";
+import type { UserRegister } from "@/client";
 import SpinnerButton from "../ui/button/SpinnerButton";
+import { useRouter } from "next/navigation";
+
 
 
 type FormData = {
@@ -19,34 +22,33 @@ type FormData = {
 
 export default function SignUpForm() {
   const [showPassword, setShowPassword] = useState(false);
-  const signupMutation = useSignup();
+
+  const { signUpMutation } = useAuth();
+  const router = useRouter();
+
+
+    useEffect(() => {
+      if (isLoggedIn()) {
+        router.push("/");
+      }
+    }, [router])
+
 
   const {
     register,
     handleSubmit,
-    formState: { errors },
+    formState: { errors, isSubmitting },
   } = useForm<FormData>({
     mode: "onChange"
   });
-  const onSubmit = (data: FormData) => {
-    console.log("Form data:", data);
-    signupMutation.mutate(
-      {
-        requestBody: {
-          full_name: data.firstName + " " + data.lastName,
-          password: data.password,
-          email: data.email,
-        },
-      },
-      {
-        onSuccess: (res) => {
-          console.log("Signup success:", res);
-        },
-        onError: (err) => {
-          console.error("Signup failed:", err);
-        },
-      }
-    );
+  const onSubmit: SubmitHandler<FormData> = (data) => {
+    const payload: UserRegister = {
+      full_name: `${data.firstName} ${data.lastName}`,
+      email: data.email,
+      password: data.password,
+    };
+
+    signUpMutation.mutate(payload);
   };
 
   return (
@@ -149,8 +151,8 @@ export default function SignUpForm() {
             <div className="sm:col-span-2">
               <SpinnerButton
                 className="flex items-center justify-center w-full px-4 py-3 text-sm font-medium text-white transition rounded-lg bg-brand-500 shadow-theme-xs hover:bg-brand-600"
-                disabled={signupMutation.isPending}
-                loading={signupMutation.isPending}
+                disabled={!!errors.firstName || !!errors.lastName || !!errors.email || !!errors.password}
+                loading={isSubmitting}
               >
                 Sign Up
               </SpinnerButton>

frontend/src/hooks/useAuth.ts

@@ -1,6 +1,8 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
-import { useNavigate } from "@tanstack/react-router"
-import { useState } from "react"
+"use client";
+
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 
 import {
   type Body_login_login_access_token as AccessToken,
@@ -9,59 +11,63 @@ import {
   type UserPublic,
   type UserRegister,
   UsersService,
-} from "@/client"
-import { handleError } from "@/utils"
+} from "@/client";
+import { handleError } from "@/utils";
 
 const isLoggedIn = () => {
-  return localStorage.getItem("access_token") !== null
-}
+  return localStorage.getItem("access_token") !== null;
+};
 
 const useAuth = () => {
-  const [error, setError] = useState<string | null>(null)
-  const navigate = useNavigate()
-  const queryClient = useQueryClient()
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
   const { data: user } = useQuery<UserPublic | null, Error>({
     queryKey: ["currentUser"],
     queryFn: UsersService.readUserMe,
     enabled: isLoggedIn(),
-  })
+  });
 
   const signUpMutation = useMutation({
     mutationFn: (data: UserRegister) =>
       UsersService.registerUser({ requestBody: data }),
-
     onSuccess: () => {
-      navigate({ to: "/login" })
+      router.push("/signin");
     },
     onError: (err: ApiError) => {
-      handleError(err)
+      handleError(err);
+      setError(err.message || "Signup failed");
     },
     onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: ["users"] })
+      queryClient.invalidateQueries({ queryKey: ["users"] });
     },
-  })
+  });
 
   const login = async (data: AccessToken) => {
     const response = await LoginService.loginAccessToken({
       formData: data,
-    })
-    localStorage.setItem("access_token", response.access_token)
-  }
+    });
+    localStorage.setItem("access_token", response.access_token);
+    queryClient.invalidateQueries({ queryKey: ["currentUser"] });
+  };
 
   const loginMutation = useMutation({
     mutationFn: login,
     onSuccess: () => {
-      navigate({ to: "/" })
+      router.push("/");
     },
     onError: (err: ApiError) => {
-      handleError(err)
+      handleError(err);
+      setError(err.message || "Login failed");
     },
-  })
+  });
 
   const logout = () => {
-    localStorage.removeItem("access_token")
-    navigate({ to: "/login" })
-  }
+    localStorage.removeItem("access_token");
+    queryClient.invalidateQueries({ queryKey: ["currentUser"] });
+    router.push("/signin");
+  };
 
   return {
     signUpMutation,
@@ -70,8 +76,8 @@ const useAuth = () => {
     user,
     error,
     resetError: () => setError(null),
-  }
-}
+  };
+};
 
-export { isLoggedIn }
-export default useAuth
+export { isLoggedIn };
+export default useAuth;

frontend/src/hooks/useSignup.ts

@@ -33,7 +33,7 @@ const StaticHeader: React.FC = () => {
         {/* Right Side Actions */}
         <div className="flex items-center gap-3">
           <Link
-            href="/login"
+            href="/signin"
             className="rounded-md border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
           >
             Log in