fix: refactor mutation type (#2767)

* Fixed Mutation Types to include options as undefined

* Updated mutation function type to not include params if it is undefined

* updated useAddUser type to match the new useMutationFunctionType

* updated useDeleteUser type to match the new useMutationFunctionType

* feat: Update useLoginUser mutation function type

The useLoginUser mutation function type has been updated to match the new useMutationFunctionType signature. This change ensures consistency and compatibility with other mutation functions in the codebase.

* chore: Update useLogout mutation function type

The useLogout mutation function type has been updated to match the new useMutationFunctionType signature. This change ensures consistency and compatibility with other mutation functions in the codebase.

* feat: Update useRefreshAccessToken mutation function type

The useRefreshAccessToken mutation function type has been updated to match the new useMutationFunctionType signature. This change ensures consistency and compatibility with other mutation functions in the codebase.

* feat: Update useResetPassword mutation function type

The useResetPassword mutation function type has been updated to match the new useMutationFunctionType signature. This change ensures consistency and compatibility with other mutation functions in the codebase.

* feat: Update useUpdateUser mutation function type

The useUpdateUser mutation function type has been updated to match the new useMutationFunctionType signature. This change ensures consistency and compatibility with other mutation functions in the codebase.

* chore: Update useDeleteMessages mutation function type

The useDeleteMessages mutation function type has been updated to match the new useMutationFunctionType signature. This change ensures consistency and compatibility with other mutation functions in the codebase.

* refactor: Update useUpdateMessage mutation function type

The useUpdateMessage mutation function type has been updated to match the new useMutationFunctionType signature. This change ensures consistency and compatibility with other mutation functions in the codebase.

* feat: Update usePostLikeComponent mutation function type

The usePostLikeComponent mutation function type has been updated to match the new useMutationFunctionType signature. This change ensures consistency and compatibility with other mutation functions in the codebase.

* chore: Update usePostRetrieveVertexOrder mutation function type

The usePostRetrieveVertexOrder mutation function type has been updated to match the new useMutationFunctionType signature. This change ensures consistency and compatibility with other mutation functions in the codebase.

* refactor: Update useGetProfilePicturesQuery function type

The useGetProfilePicturesQuery function type has been updated to match the new useQueryFunctionType signature. This change ensures consistency and compatibility with other query functions in the codebase.

* feat: Update profile picture chooser component to use ProfilePicturesQueryResponse

The profile picture chooser component has been updated to use the `ProfilePicturesQueryResponse` type from the `@/controllers/API/queries/files` module. This change ensures consistency and compatibility with other parts of the codebase.

* refactor: Update ProfilePictureForm to use ProfilePicturesQueryResponse

Refactor the ProfilePictureForm component to use the ProfilePicturesQueryResponse type from the "@/controllers/API/queries/files" module. This change ensures consistency and compatibility with other parts of the codebase.

* refactor: Update handleGetProfilePictures to use useGetProfilePicturesQuery

Refactor the handleGetProfilePictures function in the GeneralPage component to use the useGetProfilePicturesQuery hook instead of manually calling the useGetProfilePicturesQuery function. This change ensures consistency and compatibility with other parts of the codebase.

* Refactored logout to use the onSuccess and onError inside the API hook instead of in a new hook.

src/frontend/src/controllers/API/queries/api-keys/use-post-add-api-key.ts

@@ -8,9 +8,10 @@ interface IPostAddApiKey {
 }
 
 // add types for error handling and success
-export const usePostAddApiKey: useMutationFunctionType<IPostAddApiKey> = (
-  options,
-) => {
+export const usePostAddApiKey: useMutationFunctionType<
+  undefined,
+  IPostAddApiKey
+> = (options) => {
   const { mutate } = UseRequestProcessor();
 
   const postAddApiKeyFn = async (payload: IPostAddApiKey): Promise<any> => {

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

@@ -5,7 +5,7 @@ import { api } from "../../api";
 import { getURL } from "../../helpers/constants";
 import { UseRequestProcessor } from "../../services/request-processor";
 
-export const useAddUser: useMutationFunctionType<UserInputType> = (
+export const useAddUser: useMutationFunctionType<undefined, UserInputType> = (
   options?,
 ) => {
   const { mutate } = UseRequestProcessor();

src/frontend/src/controllers/API/queries/auth/use-delete-users.ts

@@ -8,9 +8,10 @@ interface DeleteUserParams {
   user_id: string;
 }
 
-export const useDeleteMessages: useMutationFunctionType<DeleteUserParams> = (
-  options?,
-) => {
+export const useDeleteMessages: useMutationFunctionType<
+  undefined,
+  DeleteUserParams
+> = (options?) => {
   const { mutate } = UseRequestProcessor();
 
   const deleteMessage = async ({ user_id }: DeleteUserParams): Promise<any> => {

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

@@ -4,7 +4,9 @@ import { api } from "../../api";
 import { getURL } from "../../helpers/constants";
 import { UseRequestProcessor } from "../../services/request-processor";
 
-export const useLoginUser: useMutationFunctionType<LoginType> = (options?) => {
+export const useLoginUser: useMutationFunctionType<undefined, LoginType> = (
+  options?,
+) => {
   const { mutate } = UseRequestProcessor();
 
   async function updateUser({ password, username }: LoginType): Promise<any> {

src/frontend/src/controllers/API/queries/auth/use-logout.ts

@@ -5,12 +5,17 @@ import {
   useMutationFunctionType,
 } from "@/types/api";
 import { UseMutationResult } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
 import { api } from "../../api";
 import { getURL } from "../../helpers/constants";
 import { UseRequestProcessor } from "../../services/request-processor";
 
-export const useLogout: useMutationFunctionType = (options?) => {
+export const useLogout: useMutationFunctionType<undefined, void> = (
+  options?,
+) => {
   const { mutate } = UseRequestProcessor();
+  const navigate = useNavigate();
+  const logout = useAuthStore((state) => state.logout);
 
   async function logoutUser(): Promise<any> {
     const autoLogin = useAuthStore.getState().autoLogin;
@@ -21,7 +26,16 @@ export const useLogout: useMutationFunctionType = (options?) => {
     return res.data;
   }
 
-  const mutation = mutate(["useLogout"], logoutUser, options);
+  const mutation = mutate(["useLogout"], logoutUser, {
+    onSuccess: () => {
+      logout();
+      navigate("/login");
+    },
+    onError: (error) => {
+      console.error(error);
+    },
+    ...options,
+  });
 
   return mutation;
 };

src/frontend/src/controllers/API/queries/auth/use-refresh-access.ts

@@ -4,7 +4,9 @@ import { api } from "../../api";
 import { getURL } from "../../helpers/constants";
 import { UseRequestProcessor } from "../../services/request-processor";
 
-export const useRefrshAccessToken: useMutationFunctionType = (options?) => {
+export const useRefreshAccessToken: useMutationFunctionType<undefined, any> = (
+  options?,
+) => {
   const { mutate } = UseRequestProcessor();
 
   async function refreshAccess(): Promise<any> {

src/frontend/src/controllers/API/queries/auth/use-reset-password.ts

@@ -13,9 +13,10 @@ interface resetPasswordParams {
   password: resetPasswordType;
 }
 
-export const useResetPassword: useMutationFunctionType<resetPasswordParams> = (
-  options?,
-) => {
+export const useResetPassword: useMutationFunctionType<
+  undefined,
+  resetPasswordParams
+> = (options?) => {
   const { mutate } = UseRequestProcessor();
 
   async function resetPassword({

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

@@ -9,9 +9,10 @@ interface UpdateUserParams {
   user: changeUser;
 }
 
-export const useUpdateUser: useMutationFunctionType<UpdateUserParams> = (
-  options?,
-) => {
+export const useUpdateUser: useMutationFunctionType<
+  undefined,
+  UpdateUserParams
+> = (options?) => {
   const { mutate } = UseRequestProcessor();
 
   async function updateUser({ user_id, user }: UpdateUserParams): Promise<any> {

src/frontend/src/controllers/API/queries/files/use-get-profile-pictures.ts

@@ -4,15 +4,13 @@ import { api } from "../../api";
 import { getURL } from "../../helpers/constants";
 import { UseRequestProcessor } from "../../services/request-processor";
 
-interface ProfilePicturesQueryParams {}
-
-export interface ProfilePicturesQueryResponse {
+export interface ProfilePicturesQueryResponse extends Record<string, string[]> {
   files: string[];
 }
 
 export const useGetProfilePicturesQuery: useQueryFunctionType<
-  ProfilePicturesQueryParams,
-  { [key: string]: string[] }
+  undefined,
+  ProfilePicturesQueryResponse
 > = () => {
   const { query } = UseRequestProcessor();
 

src/frontend/src/controllers/API/queries/files/use-post-upload-file.ts

@@ -9,9 +9,10 @@ interface IPostUploadFile {
   id: string;
 }
 
-export const usePostUploadFile: useMutationFunctionType<IPostUploadFile> = (
-  options?,
-) => {
+export const usePostUploadFile: useMutationFunctionType<
+  undefined,
+  IPostUploadFile
+> = (options?) => {
   const { mutate } = UseRequestProcessor();
 
   const postUploadFileFn = async (payload: IPostUploadFile): Promise<any> => {

src/frontend/src/controllers/API/queries/messages/use-delete-messages.ts

@@ -9,6 +9,7 @@ interface DeleteMessagesParams {
 }
 
 export const useDeleteMessages: useMutationFunctionType<
+  undefined,
   DeleteMessagesParams
 > = (options?) => {
   const { mutate } = UseRequestProcessor();

src/frontend/src/controllers/API/queries/messages/use-update-messages.ts

@@ -9,9 +9,10 @@ interface UpdateMessageParams {
   message: Message;
 }
 
-export const useUpdateMessage: useMutationFunctionType<UpdateMessageParams> = (
-  options?,
-) => {
+export const useUpdateMessage: useMutationFunctionType<
+  undefined,
+  UpdateMessageParams
+> = (options?) => {
   const { mutate } = UseRequestProcessor();
 
   const updateMessageApi = async (data: Message) => {

src/frontend/src/controllers/API/queries/store/use-post-like-component.ts

@@ -8,6 +8,7 @@ interface IPostLikeComponent {
 }
 
 export const usePostLikeComponent: useMutationFunctionType<
+  undefined,
   IPostLikeComponent
 > = (options) => {
   const { mutate } = UseRequestProcessor();

src/frontend/src/controllers/API/queries/vertex/use-post-retrieve-vertex-order.tsx

@@ -20,6 +20,7 @@ interface retrieveGetVerticesOrderResponse {
 
 // add types for error handling and success
 export const usePostRetrieveVertexOrder: useMutationFunctionType<
+  undefined,
   retrieveGetVerticesOrder,
   retrieveGetVerticesOrderResponse
 > = (options) => {

src/frontend/src/hooks/logout.tsx

@@ -1,19 +0,0 @@
-import { useLogout } from "@/controllers/API/queries/auth/use-logout";
-import useAuthStore from "@/stores/authStore";
-import { useNavigate } from "react-router-dom";
-
-export function useLogoutHook() {
-  const navigate = useNavigate();
-  const logout = useAuthStore((state) => state.logout);
-  const { mutate } = useLogout({
-    onSuccess: () => {
-      logout();
-      navigate("/login");
-    },
-    onError: (error) => {
-      console.error(error);
-    },
-  });
-
-  return { logout: () => mutate({}) };
-}

src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx

@@ -1,3 +1,4 @@
+import { ProfilePicturesQueryResponse } from "@/controllers/API/queries/files";
 import { useEffect, useRef, useState } from "react";
 import { Button } from "../../../../../../../../components/ui/button";
 import Loading from "../../../../../../../../components/ui/loading";
@@ -7,7 +8,7 @@ import { cn } from "../../../../../../../../utils/utils";
 import usePreloadImages from "./hooks/use-preload-images";
 
 type ProfilePictureChooserComponentProps = {
-  profilePictures: { [key: string]: string[] } | undefined;
+  profilePictures: ProfilePicturesQueryResponse | undefined;
   loading: boolean;
   value: string;
   onChange: (value: string) => void;

src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx

@@ -1,6 +1,6 @@
-import { useGetProfilePicturesQuery } from "@/controllers/API/queries/files";
+import { ProfilePicturesQueryResponse } from "@/controllers/API/queries/files";
 import * as Form from "@radix-ui/react-form";
-import { useEffect, useState } from "react";
+import { UseQueryResult } from "@tanstack/react-query";
 import { Button } from "../../../../../../components/ui/button";
 import {
   Card,
@@ -17,7 +17,7 @@ type ProfilePictureFormComponentProps = {
   profilePicture: string;
   handleInput: (event: any) => void;
   handlePatchProfilePicture: (gradient: string) => void;
-  handleGetProfilePictures: () => undefined;
+  handleGetProfilePictures: UseQueryResult<ProfilePicturesQueryResponse>;
   userData: any;
 };
 const ProfilePictureFormComponent = ({
@@ -27,7 +27,7 @@ const ProfilePictureFormComponent = ({
   handleGetProfilePictures,
   userData,
 }: ProfilePictureFormComponentProps) => {
-  const { data: response, isFetching } = useGetProfilePicturesQuery({});
+  const { data: response, isFetching } = handleGetProfilePictures;
 
   return (
     <Form.Root

src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx

@@ -53,10 +53,7 @@ export const GeneralPage = () => {
     setErrorData,
   );
 
-  const handleGetProfilePictures = () => {
-    const { data } = useGetProfilePicturesQuery({});
-    return data;
-  };
+  const handleGetProfilePictures = useGetProfilePicturesQuery();
 
   const { handlePatchProfilePicture } = usePatchProfilePicture(
     setSuccessData,

src/frontend/src/types/api/index.ts

@@ -260,9 +260,21 @@ export type MutationFunctionType = (
 ) => UseMutationResult<any, any, any, any>;
 
 export type useMutationFunctionType<
+  Params,
   Variables = any,
   Data = any,
   Error = any,
-> = (
-  options?: Omit<UseMutationOptions<Data, Error>, "mutationFn" | "mutationKey">,
-) => UseMutationResult<Data, Error, Variables>;
+> = Params extends undefined
+  ? (
+      options?: Omit<
+        UseMutationOptions<Data, Error>,
+        "mutationFn" | "mutationKey"
+      >,
+    ) => UseMutationResult<Data, Error, Variables>
+  : (
+      params: Params,
+      options?: Omit<
+        UseMutationOptions<Data, Error>,
+        "mutationFn" | "mutationKey"
+      >,
+    ) => UseMutationResult<Data, Error, Variables>;