refactor: add useQuery on whoami endpoint request (#3125)

* 📝 (authContext.tsx): Add useGetUserData hook to fetch user data and update user state in AuthProvider component
📝 (use-get-user.ts): Refactor useGetUserData hook to use mutation function for fetching user data and handling success and error cases in a more structured way

* 📝 (API/index.ts): Remove getProfilePictures function as it is no longer used
🔧 (use-get-profile-pictures.ts): Remove unused code related to fetching profile pictures
🔧 (use-preload-images.tsx): Refactor usePreloadImages hook to accept profilePictures as an argument
🔧 (profilePictureChooserComponent/index.tsx): Update usage of usePreloadImages hook to match new signature
🔧 (ProfilePictureForm/index.tsx): Refactor to use useGetProfilePicturesQuery hook instead of handleGetProfilePictures function

src/frontend/src/contexts/authContext.tsx

@@ -3,6 +3,7 @@ import {
   LANGFLOW_API_TOKEN,
   LANGFLOW_AUTO_LOGIN_OPTION,
 } from "@/constants/constants";
+import { useGetUserData } from "@/controllers/API/queries/auth";
 import useAuthStore from "@/stores/authStore";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { createContext, useEffect, useState } from "react";
@@ -52,6 +53,8 @@ export function AuthProvider({ children }): React.ReactElement {
   const setIsLoading = useFlowsManagerStore((state) => state.setIsLoading);
   const autoLogin = useAuthStore((state) => state.autoLogin);
 
+  const { mutate: mutateLoggedUser } = useGetUserData();
+
   useEffect(() => {
     const storedAccessToken = cookies.get(LANGFLOW_ACCESS_TOKEN);
     if (storedAccessToken) {
@@ -67,19 +70,23 @@ export function AuthProvider({ children }): React.ReactElement {
   }, []);
 
   function getUser() {
-    getLoggedUser()
-      .then(async (user) => {
-        setUserData(user);
-        const isSuperUser = user!.is_superuser;
-        useAuthStore.getState().setIsAdmin(isSuperUser);
-        getFoldersApi(true, true);
-
-        checkHasStore();
-        fetchApiData();
-      })
-      .catch((error) => {
-        setLoading(false);
-      });
+    mutateLoggedUser(
+      {},
+      {
+        onSuccess: async (user) => {
+          setUserData(user);
+          const isSuperUser = user!.is_superuser;
+          useAuthStore.getState().setIsAdmin(isSuperUser);
+          getFoldersApi(true, true);
+          checkHasStore();
+          fetchApiData();
+        },
+        onError: () => {
+          setUserData(null);
+          setLoading(false);
+        },
+      },
+    );
   }
 
   function login(newAccessToken: string, autoLogin: string) {

src/frontend/src/controllers/API/queries/auth/use-get-user.ts

@@ -1,20 +1,24 @@
-import { keepPreviousData } from "@tanstack/react-query";
-import { Users, useQueryFunctionType } from "../../../../types/api";
+import { UseMutationResult } from "@tanstack/react-query";
+import { useMutationFunctionType, Users } from "../../../../types/api";
 import { api } from "../../api";
 import { getURL } from "../../helpers/constants";
 import { UseRequestProcessor } from "../../services/request-processor";
 
-export const useGetUserData: useQueryFunctionType<undefined, Users> = () => {
-  const { query } = UseRequestProcessor();
+export const useGetUserData: useMutationFunctionType<undefined, any> = (
+  options?,
+) => {
+  const { mutate } = UseRequestProcessor();
 
   const getUserData = async () => {
     const response = await api.get<Users>(`${getURL("USERS")}/whoami`);
     return response["data"];
   };
 
-  const queryResult = query(["useGetUserData"], getUserData, {
-    placeholderData: keepPreviousData,
-  });
+  const mutation: UseMutationResult = mutate(
+    ["useGetUserData"],
+    getUserData,
+    options,
+  );
 
-  return queryResult;
+  return mutation;
 };