refactor: use useQuery

src/components/ProfilePicture.tsx

@@ -9,8 +9,8 @@ export default function ProfilePicture({
 
   return (
     <article className="size-14 rounded-xl overflow-hidden">
-      {userData?.profile_image_url ? (
-        <img className="object-fill" src={userData.profile_image_url} />
+      {userData.data?.profile_image_url ? (
+        <img className="object-fill" src={userData.data.profile_image_url} />
       ) : (
         <div className="bg-slate-600 size-full"></div>
       )}

src/hooks/useGetProfile.ts

@@ -1,35 +1,16 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext } from "react";
 import { AuthStateContext } from "../contexts/auth-state/AuthStateContext";
-import { getUser, type UserData } from "../utils/api/getUser";
-
-const usersData = new Map<string, UserData>();
+import { getUser } from "../utils/api/getUser";
+import { useQuery } from "@tanstack/react-query";
 
 export function useGetProfile(login: string) {
   const authStateContext = useContext(AuthStateContext);
   const authState = authStateContext?.authState;
 
-  const [userProfile, setUserProfile] = useState<UserData | undefined>(() =>
-    usersData.get(login)
-  );
-
-  useEffect(() => {
-    if (usersData.has(login)) {
-      return;
-    }
-
-    if (!authState) {
-      return;
-    }
-
-    getUser(authState.token.value, authState.client.id, login)
-      .then((data) => {
-        usersData.set(login, data);
-        setUserProfile(() => data);
-      })
-      .catch((error: unknown) => {
-        console.error("UserProfile:", error);
-      });
-  }, [authState, login]);
-
-  return userProfile;
+  return useQuery({
+    enabled: !!authState,
+    queryKey: ["userProfilePicture", login],
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    queryFn: () => getUser(authState!.token.value, authState!.client.id, login),
+  });
 }