fix login issue

src/app/(unauth)/login/page.tsx

@@ -6,6 +6,9 @@ import { useFormState, useFormStatus } from "react-dom";
 import { login, LoginUserData } from "@/app/actions";
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
+import { validateAuth } from "@/lib/api";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { LoaderCircleIcon } from "lucide-react";
 
 const initialState: {
   email?: string;
@@ -17,15 +20,34 @@ const initialState: {
 export default function Login() {
   const [state, formAction] = useFormState(login, initialState);
   const { pending } = useFormStatus();
+  const { data: isLoggedIn, isLoading, refetch } = useSuspenseQuery(validateAuth);
   const router = useRouter();
 
+  // const checkAuth = async () => {};
+
+  useEffect(() => {
+    console.log("[auth]", { isLoggedIn, isLoading });
+    if (!isLoading && isLoggedIn) {
+      // redirect to auth page
+      router.push("/");
+    }
+  }, [isLoggedIn, isLoading, router]);
 
   useEffect(() => {
     if (state.user) {
-      router.push('/');
+      // router.push('/');
+      window.location.reload();
     }
   }, [router, state.user])
 
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center w-full h-full">
+        <LoaderCircleIcon className="w-10 h-10" />
+      </div>
+    );
+  }
+
   return (
     <div className="container mx-auto max-w-md">
       <div className="flex flex-col items-center justify-center h-screen">

src/components/custom/LayoutPanel.tsx

@@ -25,7 +25,7 @@ export default function LayoutPanel({ children }: PropsWithChildren<unknown>) {
     if (!isLoading && !isLoggedIn) {
       console.log("[auth]", { isLoggedIn });
       // redirect to auth page
-      router.push('/login')
+      // router.push('/login')
     }
   }, [isLoggedIn, isLoading, router]);