Refactor passport loading to username based

cgen-7ca6932b667e475cb89b119dcf576114

client/pages/ProfilePassport.tsx

@@ -62,66 +62,104 @@ const ProfilePassport = () => {
   const [loading, setLoading] = useState(true);
   const [notFound, setNotFound] = useState(false);
 
-  const targetUserId = useMemo(() => {
-    if (params.id === "me" || !params.id) {
-      return user?.id ?? null;
-    }
-    return params.id;
-  }, [params.id, user?.id]);
-
-  const isSelf = user?.id && profile?.id ? user.id === profile.id : false;
-
   useEffect(() => {
-    if (!targetUserId) {
+    if (isSelfRoute && !user) {
-      if (!user) {
-        navigate("/login");
-      }
       setLoading(false);
+      setNotFound(false);
+      navigate("/login");
       return;
     }
 
-    const loadProfile = async () => {
+    let cancelled = false;
+
+    const loadPassport = async () => {
       setLoading(true);
       try {
-        const isViewingSelf = params.id === "me" || !params.id;
+        let resolvedProfile: (AethexUserProfile & { email?: string | null }) | null =
+          null;
+        let resolvedId: string | null = null;
 
-        const profilePromise = isViewingSelf
+        if (isSelfRoute) {
-          ? aethexUserService.getCurrentUser()
+          const currentUser = await aethexUserService.getCurrentUser();
-          : aethexUserService.getProfileById(targetUserId);
+          if (currentUser) {
+            resolvedProfile = {
+              ...currentUser,
+              email:
+                (currentUser as any)?.email ??
+                user?.email ??
+                authProfile?.email ??
+                null,
+            } as AethexUserProfile & { email?: string | null };
+            resolvedId = currentUser.id ?? user?.id ?? null;
+          }
+        } else if (requestedUsername) {
+          let fetchedProfile =
+            (await aethexUserService.getProfileByUsername(requestedUsername)) ??
+            (isUuid(requestedUsername)
+              ? await aethexUserService.getProfileById(requestedUsername)
+              : null);
 
-        const [profileData, achievementList, interestList, projectList] =
+          if (
-          await Promise.all([
+            fetchedProfile?.username &&
-            profilePromise,
+            fetchedProfile.username.toLowerCase() ===
-            aethexAchievementService
+              requestedUsername.toLowerCase() &&
-              .getUserAchievements(targetUserId)
+            fetchedProfile.username !== requestedUsername
-              .catch((error) => {
+          ) {
-                console.error("Failed to load achievements", error);
+            navigate(`/passport/${fetchedProfile.username}`, { replace: true });
-                return [] as AethexAchievement[];
+            return;
-              }),
+          }
-            aethexUserService.getUserInterests(targetUserId).catch((error) => {
-              console.error("Failed to load interests", error);
-              return [] as string[];
-            }),
-            aethexProjectService
-              .getUserProjects(targetUserId)
-              .catch((error) => {
-                console.error("Failed to load projects", error);
-                return [] as ProjectPreview[];
-              }),
-          ]);
 
-        if (!profileData) {
+          if (fetchedProfile) {
-          setNotFound(true);
+            resolvedProfile = {
+              ...fetchedProfile,
+              email: (fetchedProfile as any)?.email ?? null,
+            } as AethexUserProfile & { email?: string | null };
+            resolvedId = fetchedProfile.id ?? null;
+          }
+        }
+
+        if (!resolvedProfile || !resolvedId) {
+          if (!cancelled) {
+            setNotFound(true);
+          }
           return;
         }
 
-        const resolvedProfile = {
+        const viewingSelf =
-          ...profileData,
+          isSelfRoute ||
-          email:
+          (!!user?.id && resolvedId === user.id) ||
-            (profileData as any)?.email ?? (isViewingSelf ? user?.email ?? null : null),
+          (!!authProfile?.username &&
-        } as AethexUserProfile & { email?: string | null };
+            !!resolvedProfile.username &&
+            authProfile.username.toLowerCase() ===
+              resolvedProfile.username.toLowerCase());
 
-        setProfile(resolvedProfile);
+        const [achievementList, interestList, projectList] = await Promise.all([
+          aethexAchievementService
+            .getUserAchievements(resolvedId)
+            .catch((error) => {
+              console.error("Failed to load achievements", error);
+              return [] as AethexAchievement[];
+            }),
+          aethexUserService.getUserInterests(resolvedId).catch((error) => {
+            console.error("Failed to load interests", error);
+            return [] as string[];
+          }),
+          aethexProjectService.getUserProjects(resolvedId).catch((error) => {
+            console.error("Failed to load projects", error);
+            return [] as ProjectPreview[];
+          }),
+        ]);
+
+        if (cancelled) {
+          return;
+        }
+
+        setProfile({
+          ...resolvedProfile,
+          email:
+            resolvedProfile.email ??
+            (viewingSelf ? user?.email ?? authProfile?.email ?? null : null),
+        });
         setAchievements(achievementList ?? []);
         setInterests(interestList ?? []);
         setProjects(
@@ -136,15 +174,38 @@ const ProfilePassport = () => {
         setNotFound(false);
       } catch (error) {
         console.error("Failed to load passport", error);
-        setNotFound(true);
+        if (!cancelled) {
+          setNotFound(true);
+        }
       } finally {
-        setLoading(false);
+        if (!cancelled) {
+          setLoading(false);
+        }
       }
     };
 
-    loadProfile();
+    loadPassport();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+
-  }, [targetUserId, params.id, user?.email]);
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    authProfile?.email,
+    authProfile?.username,
+    isSelfRoute,
+    navigate,
+    requestedUsername,
+    user?.email,
+    user?.id,
+  ]);
+
+  const isSelf = Boolean(
+    profile &&
+      ((user?.id && profile.id && user.id === profile.id) ||
+        (authProfile?.username &&
+          profile.username &&
+          authProfile.username.toLowerCase() === profile.username.toLowerCase())),
+  );
 
   if (loading) {
     return <LoadingScreen message="Loading AeThex passport..." />;