fix: fix onboarding routing

Author: zziglet

src/hooks/auth/useFetchUser.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useAuthStore, User } from "../../store/auth/index";
 
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
@@ -10,9 +10,14 @@ export const useFetchUser = (
 ) => {
   const { login, logout } = useAuthStore();
   const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    if (!accessToken || !refreshToken) return;
+    if (!accessToken || !refreshToken) {
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
 
     fetch(`${API_BASE_URL}/user/self`, {
       headers: {
@@ -22,17 +27,22 @@ export const useFetchUser = (
       .then((res) => {
         if (!res.ok) {
           logout();
+          setLoading(false);
           return null;
         }
         return res.json();
       })
       .then((user) => {
-        if (!user) return;
+        if (!user) {
+          setLoading(false);
+          return;
+        }
         login(user as User, accessToken, refreshToken);
         setUser(user);
         if (onSuccess) onSuccess(user as User);
+        setLoading(false);
       });
   }, [accessToken, refreshToken, login, logout, onSuccess]);
 
-  return { user };
+  return { user, loading };
 };

src/hooks/redirect/useRootRedirect.tsx

@@ -1,47 +1,41 @@
 import { useEffect } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { useFetchUser } from "../../hooks/auth/useFetchUser";
-import { User } from "../../store/auth";
 
 const useRootRedirect = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const accessToken = localStorage.getItem("access_token");
   const refreshToken = localStorage.getItem("refresh_token");
 
-  const result = useFetchUser(accessToken, refreshToken, undefined);
-  const user = result.user as User | null;
+  const { user, loading } = useFetchUser(accessToken, refreshToken, undefined);
 
   useEffect(() => {
-    if (!user) return;
+    if (loading || !user) return;
 
     const hasPrivacy = !!user.privacy;
 
+    const hasConcerns = !!user.addition?.concerns;
+    const hasEmotions = !!user.addition?.emotions;
+
     if ((!accessToken && !refreshToken) || !user.email || user.id == null) {
       navigate("/login", { replace: true });
       return;
     }
 
-    if (location.pathname.includes("/onboarding")) {
-      if (!hasPrivacy) {
-        navigate("/onboarding/basic", { replace: true });
-      } else {
-        navigate("/home", { replace: true });
-      }
-      return;
-    }
-
     if (
       location.pathname === "" ||
       location.pathname === "/" ||
       location.pathname === "/home"
     ) {
       if (!hasPrivacy) {
         navigate("/onboarding/basic", { replace: true });
+      } else if (!hasConcerns || !hasEmotions) {
+        navigate("/onboarding/additional/concern", { replace: true });
       }
       return;
     }
-  }, [navigate, location, accessToken, refreshToken, user]);
+  }, [navigate, location, accessToken, refreshToken, user, loading]);
 
   return null;
 };