From 108decfeaa0a66681c97a669f88fe6c62a611940 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com> Date: Wed, 17 Jul 2024 18:54:45 -0300 Subject: [PATCH] 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. --- .../queries/api-keys/use-post-add-api-key.ts | 7 ++++--- .../API/queries/auth/use-add-user.ts | 2 +- .../API/queries/auth/use-delete-users.ts | 7 ++++--- .../API/queries/auth/use-login-user.ts | 4 +++- .../API/queries/auth/use-logout.ts | 18 ++++++++++++++++-- .../API/queries/auth/use-refresh-access.ts | 4 +++- .../API/queries/auth/use-reset-password.ts | 7 ++++--- .../API/queries/auth/use-update-user.ts | 7 ++++--- .../queries/files/use-get-profile-pictures.ts | 8 +++----- .../API/queries/files/use-post-upload-file.ts | 7 ++++--- .../queries/messages/use-delete-messages.ts | 1 + .../queries/messages/use-update-messages.ts | 7 ++++--- .../queries/store/use-post-like-component.ts | 1 + .../vertex/use-post-retrieve-vertex-order.tsx | 1 + src/frontend/src/hooks/logout.tsx | 19 ------------------- .../profilePictureChooserComponent/index.tsx | 3 ++- .../components/ProfilePictureForm/index.tsx | 8 ++++---- .../SettingsPage/pages/GeneralPage/index.tsx | 5 +---- src/frontend/src/types/api/index.ts | 18 +++++++++++++++--- 19 files changed, 75 insertions(+), 59 deletions(-) delete mode 100644 src/frontend/src/hooks/logout.tsx diff --git a/src/frontend/src/controllers/API/queries/api-keys/use-post-add-api-key.ts b/src/frontend/src/controllers/API/queries/api-keys/use-post-add-api-key.ts index 4394c04e0..adc6c5fc1 100644 --- a/src/frontend/src/controllers/API/queries/api-keys/use-post-add-api-key.ts +++ b/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 = ( - options, -) => { +export const usePostAddApiKey: useMutationFunctionType< + undefined, + IPostAddApiKey +> = (options) => { const { mutate } = UseRequestProcessor(); const postAddApiKeyFn = async (payload: IPostAddApiKey): Promise => { diff --git a/src/frontend/src/controllers/API/queries/auth/use-add-user.ts b/src/frontend/src/controllers/API/queries/auth/use-add-user.ts index 11af8fd61..3bc8cc069 100644 --- a/src/frontend/src/controllers/API/queries/auth/use-add-user.ts +++ b/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 = ( +export const useAddUser: useMutationFunctionType = ( options?, ) => { const { mutate } = UseRequestProcessor(); diff --git a/src/frontend/src/controllers/API/queries/auth/use-delete-users.ts b/src/frontend/src/controllers/API/queries/auth/use-delete-users.ts index 9eedf558f..68aa10a8c 100644 --- a/src/frontend/src/controllers/API/queries/auth/use-delete-users.ts +++ b/src/frontend/src/controllers/API/queries/auth/use-delete-users.ts @@ -8,9 +8,10 @@ interface DeleteUserParams { user_id: string; } -export const useDeleteMessages: useMutationFunctionType = ( - options?, -) => { +export const useDeleteMessages: useMutationFunctionType< + undefined, + DeleteUserParams +> = (options?) => { const { mutate } = UseRequestProcessor(); const deleteMessage = async ({ user_id }: DeleteUserParams): Promise => { diff --git a/src/frontend/src/controllers/API/queries/auth/use-login-user.ts b/src/frontend/src/controllers/API/queries/auth/use-login-user.ts index d97395b03..27c1ca5e2 100644 --- a/src/frontend/src/controllers/API/queries/auth/use-login-user.ts +++ b/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 = (options?) => { +export const useLoginUser: useMutationFunctionType = ( + options?, +) => { const { mutate } = UseRequestProcessor(); async function updateUser({ password, username }: LoginType): Promise { diff --git a/src/frontend/src/controllers/API/queries/auth/use-logout.ts b/src/frontend/src/controllers/API/queries/auth/use-logout.ts index 30db3c32f..893d752d1 100644 --- a/src/frontend/src/controllers/API/queries/auth/use-logout.ts +++ b/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 = ( + options?, +) => { const { mutate } = UseRequestProcessor(); + const navigate = useNavigate(); + const logout = useAuthStore((state) => state.logout); async function logoutUser(): Promise { 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; }; diff --git a/src/frontend/src/controllers/API/queries/auth/use-refresh-access.ts b/src/frontend/src/controllers/API/queries/auth/use-refresh-access.ts index c330a0ca9..5a6c34496 100644 --- a/src/frontend/src/controllers/API/queries/auth/use-refresh-access.ts +++ b/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 = ( + options?, +) => { const { mutate } = UseRequestProcessor(); async function refreshAccess(): Promise { diff --git a/src/frontend/src/controllers/API/queries/auth/use-reset-password.ts b/src/frontend/src/controllers/API/queries/auth/use-reset-password.ts index 899fe44b0..b6a557539 100644 --- a/src/frontend/src/controllers/API/queries/auth/use-reset-password.ts +++ b/src/frontend/src/controllers/API/queries/auth/use-reset-password.ts @@ -13,9 +13,10 @@ interface resetPasswordParams { password: resetPasswordType; } -export const useResetPassword: useMutationFunctionType = ( - options?, -) => { +export const useResetPassword: useMutationFunctionType< + undefined, + resetPasswordParams +> = (options?) => { const { mutate } = UseRequestProcessor(); async function resetPassword({ diff --git a/src/frontend/src/controllers/API/queries/auth/use-update-user.ts b/src/frontend/src/controllers/API/queries/auth/use-update-user.ts index 5cf671e50..8193018eb 100644 --- a/src/frontend/src/controllers/API/queries/auth/use-update-user.ts +++ b/src/frontend/src/controllers/API/queries/auth/use-update-user.ts @@ -9,9 +9,10 @@ interface UpdateUserParams { user: changeUser; } -export const useUpdateUser: useMutationFunctionType = ( - options?, -) => { +export const useUpdateUser: useMutationFunctionType< + undefined, + UpdateUserParams +> = (options?) => { const { mutate } = UseRequestProcessor(); async function updateUser({ user_id, user }: UpdateUserParams): Promise { diff --git a/src/frontend/src/controllers/API/queries/files/use-get-profile-pictures.ts b/src/frontend/src/controllers/API/queries/files/use-get-profile-pictures.ts index b2f1da135..e2488c0f1 100644 --- a/src/frontend/src/controllers/API/queries/files/use-get-profile-pictures.ts +++ b/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 { files: string[]; } export const useGetProfilePicturesQuery: useQueryFunctionType< - ProfilePicturesQueryParams, - { [key: string]: string[] } + undefined, + ProfilePicturesQueryResponse > = () => { const { query } = UseRequestProcessor(); diff --git a/src/frontend/src/controllers/API/queries/files/use-post-upload-file.ts b/src/frontend/src/controllers/API/queries/files/use-post-upload-file.ts index 532476c12..21bca9bac 100644 --- a/src/frontend/src/controllers/API/queries/files/use-post-upload-file.ts +++ b/src/frontend/src/controllers/API/queries/files/use-post-upload-file.ts @@ -9,9 +9,10 @@ interface IPostUploadFile { id: string; } -export const usePostUploadFile: useMutationFunctionType = ( - options?, -) => { +export const usePostUploadFile: useMutationFunctionType< + undefined, + IPostUploadFile +> = (options?) => { const { mutate } = UseRequestProcessor(); const postUploadFileFn = async (payload: IPostUploadFile): Promise => { diff --git a/src/frontend/src/controllers/API/queries/messages/use-delete-messages.ts b/src/frontend/src/controllers/API/queries/messages/use-delete-messages.ts index bdff094cf..1f577f072 100644 --- a/src/frontend/src/controllers/API/queries/messages/use-delete-messages.ts +++ b/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(); diff --git a/src/frontend/src/controllers/API/queries/messages/use-update-messages.ts b/src/frontend/src/controllers/API/queries/messages/use-update-messages.ts index 0ad5edb84..9f931e35a 100644 --- a/src/frontend/src/controllers/API/queries/messages/use-update-messages.ts +++ b/src/frontend/src/controllers/API/queries/messages/use-update-messages.ts @@ -9,9 +9,10 @@ interface UpdateMessageParams { message: Message; } -export const useUpdateMessage: useMutationFunctionType = ( - options?, -) => { +export const useUpdateMessage: useMutationFunctionType< + undefined, + UpdateMessageParams +> = (options?) => { const { mutate } = UseRequestProcessor(); const updateMessageApi = async (data: Message) => { diff --git a/src/frontend/src/controllers/API/queries/store/use-post-like-component.ts b/src/frontend/src/controllers/API/queries/store/use-post-like-component.ts index a6bac7152..1fca6b4bd 100644 --- a/src/frontend/src/controllers/API/queries/store/use-post-like-component.ts +++ b/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(); diff --git a/src/frontend/src/controllers/API/queries/vertex/use-post-retrieve-vertex-order.tsx b/src/frontend/src/controllers/API/queries/vertex/use-post-retrieve-vertex-order.tsx index 2b90daea2..a757ed6cf 100644 --- a/src/frontend/src/controllers/API/queries/vertex/use-post-retrieve-vertex-order.tsx +++ b/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) => { diff --git a/src/frontend/src/hooks/logout.tsx b/src/frontend/src/hooks/logout.tsx deleted file mode 100644 index 688b521ee..000000000 --- a/src/frontend/src/hooks/logout.tsx +++ /dev/null @@ -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({}) }; -} diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx index 923222bbf..0788e3053 100644 --- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx +++ b/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; diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx index d0522ebe9..cd800e2b3 100644 --- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx +++ b/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; userData: any; }; const ProfilePictureFormComponent = ({ @@ -27,7 +27,7 @@ const ProfilePictureFormComponent = ({ handleGetProfilePictures, userData, }: ProfilePictureFormComponentProps) => { - const { data: response, isFetching } = useGetProfilePicturesQuery({}); + const { data: response, isFetching } = handleGetProfilePictures; return ( { setErrorData, ); - const handleGetProfilePictures = () => { - const { data } = useGetProfilePicturesQuery({}); - return data; - }; + const handleGetProfilePictures = useGetProfilePicturesQuery(); const { handlePatchProfilePicture } = usePatchProfilePicture( setSuccessData, diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts index c805325fa..a14277ce7 100644 --- a/src/frontend/src/types/api/index.ts +++ b/src/frontend/src/types/api/index.ts @@ -260,9 +260,21 @@ export type MutationFunctionType = ( ) => UseMutationResult; export type useMutationFunctionType< + Params, Variables = any, Data = any, Error = any, -> = ( - options?: Omit, "mutationFn" | "mutationKey">, -) => UseMutationResult; +> = Params extends undefined + ? ( + options?: Omit< + UseMutationOptions, + "mutationFn" | "mutationKey" + >, + ) => UseMutationResult + : ( + params: Params, + options?: Omit< + UseMutationOptions, + "mutationFn" | "mutationKey" + >, + ) => UseMutationResult;