From d94bb70d95f3d2087e4cb4f2dc2a8ab0845d25dc Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa
 <72977554+Cristhianzl@users.noreply.github.com>
Date: Thu, 1 Aug 2024 17:52:11 -0300
Subject: [PATCH] refactor: add useQuery on whoami endpoint request (#3125)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 📝 (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     | 33 +++++++++++--------
 .../API/queries/auth/use-get-user.ts          | 20 ++++++-----
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx
index 52beddf9b..3e2af2854 100644
--- a/src/frontend/src/contexts/authContext.tsx
+++ b/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) {
diff --git a/src/frontend/src/controllers/API/queries/auth/use-get-user.ts b/src/frontend/src/controllers/API/queries/auth/use-get-user.ts
index a5d368106..1f5c73ab9 100644
--- a/src/frontend/src/controllers/API/queries/auth/use-get-user.ts
+++ b/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;
 };