diff --git a/src/components/common/sidebar/logtoutModal/logoutModal.tsx b/src/components/common/sidebar/logtoutModal/logoutModal.tsx index 9cb27197..21431a22 100644 --- a/src/components/common/sidebar/logtoutModal/logoutModal.tsx +++ b/src/components/common/sidebar/logtoutModal/logoutModal.tsx @@ -1,42 +1,43 @@ -import { useNavigate } from 'react-router-dom'; - import useUserAuth from '@/hooks/auth/useUserAuth'; import Button from '@/components/common/button/button'; import Modal from '@/components/common/modal/modal'; import * as S from '@/components/common/sidebar/logtoutModal/logoutModal.style'; +import ModalLoading from '../../loading/modalLoading'; + type TLogoutModalProps = { onClose: () => void; }; export default function LogoutModal({ onClose }: TLogoutModalProps) { - const navigate = useNavigate(); const { useLogout } = useUserAuth(); - const { mutate: logoutMutate } = useLogout; + const { mutate: logoutMutate, isPending } = useLogout; const handleLogout = () => { logoutMutate( {}, { onSuccess: () => { - navigate('/', { replace: true }); + window.location.replace('/'); onClose(); }, onError: () => { - navigate('/', { replace: true }); + window.location.replace('/'); onClose(); }, }, ); }; + return ( + {isPending && } - - diff --git a/src/components/projectInfo/ChangeOwnerModal/changeOwnerModal.tsx b/src/components/projectInfo/ChangeOwnerModal/changeOwnerModal.tsx index f2c7ba8d..1a103bfb 100644 --- a/src/components/projectInfo/ChangeOwnerModal/changeOwnerModal.tsx +++ b/src/components/projectInfo/ChangeOwnerModal/changeOwnerModal.tsx @@ -5,6 +5,7 @@ import { useChangeOwner } from '@/hooks/projectInfo/useChangeOwner'; import Button from '@/components/common/button/button'; import ValidationMessage from '@/components/common/input/validationMessage'; +import ModalLoading from '@/components/common/loading/modalLoading'; import Modal from '@/components/common/modal/modal'; import * as S from '@/components/projectInfo/ChangeOwnerModal/changeOwnerModal.style'; @@ -16,7 +17,7 @@ type TModalProps = { export default function ChangeOwnerModal({ onClose, projectId = 0, userId = 0 }: TModalProps) { const { useChangeOwn } = useChangeOwner(); const queryClient = useQueryClient(); - const { mutate: changeOwner } = useChangeOwn; + const { mutate: changeOwner, isPending } = useChangeOwn; const [errorMessage, setErrorMessage] = useState(''); const handleChange = () => { changeOwner( @@ -28,8 +29,8 @@ export default function ChangeOwnerModal({ onClose, projectId = 0, userId = 0 }: onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['getProjectMember', projectId] }); queryClient.invalidateQueries({ queryKey: ['getMemberEmail', projectId] }); + queryClient.invalidateQueries({ queryKey: ['getProjectInfo', projectId] }); onClose(); - window.location.reload(); }, onError: (err) => { setErrorMessage(err.response?.data.message || 'An error occurred.'); @@ -39,6 +40,7 @@ export default function ChangeOwnerModal({ onClose, projectId = 0, userId = 0 }: }; return ( + {isPending && } As soon as you lose the room manager authority, you lose the right to modify or remove the project. @@ -47,7 +49,7 @@ export default function ChangeOwnerModal({ onClose, projectId = 0, userId = 0 }: - diff --git a/src/components/projectInfo/deleteProjectModal/deleteProjectModal.tsx b/src/components/projectInfo/deleteProjectModal/deleteProjectModal.tsx index b013b8cc..eed95a21 100644 --- a/src/components/projectInfo/deleteProjectModal/deleteProjectModal.tsx +++ b/src/components/projectInfo/deleteProjectModal/deleteProjectModal.tsx @@ -1,9 +1,14 @@ import { useState } from 'react'; -import { useParams } from 'react-router-dom'; +import { useNavigate, useParams } from 'react-router-dom'; + +import { QUERY_KEYS } from '@/constants/querykeys/queryKeys'; + +import { queryClient } from '@/apis/queryClient'; import { useProjectInfo } from '@/hooks/projectInfo/useProjectInfo'; import Button from '@/components/common/button/button'; +import ModalLoading from '@/components/common/loading/modalLoading'; import Modal from '@/components/common/modal/modal'; import * as S from './deleteProjectModal.style'; @@ -14,15 +19,18 @@ type TAuthModalProps = { }; export default function DeleteProjectModal({ onClose }: TAuthModalProps) { const { projectId } = useParams(); + const navigate = useNavigate(); const { useDeleteProject } = useProjectInfo({ projectId: Number(projectId) }); - const { mutate: deleteProjectMutate } = useDeleteProject; + const { mutate: deleteProjectMutate, isPending } = useDeleteProject; const [errorMessage, setErrorMessage] = useState(''); const handleDelete = () => { deleteProjectMutate( { projectId: Number(projectId) }, { onSuccess: () => { - window.location.href = '/project'; + queryClient.invalidateQueries({ queryKey: QUERY_KEYS.PROJECT_LIST }); + navigate('/project'); + onClose(); }, onError: (error) => { setErrorMessage(error.response?.data.message || 'An error occurred.'); @@ -32,13 +40,14 @@ export default function DeleteProjectModal({ onClose }: TAuthModalProps) { }; return ( + {isPending && } If you press the Remove button, it will never recover again and all data will be deleted. {errorMessage && } - diff --git a/src/components/projectInfo/deleteTeamMember/deleteTeamMemberModal.tsx b/src/components/projectInfo/deleteTeamMember/deleteTeamMemberModal.tsx index d7946cca..d73498a0 100644 --- a/src/components/projectInfo/deleteTeamMember/deleteTeamMemberModal.tsx +++ b/src/components/projectInfo/deleteTeamMember/deleteTeamMemberModal.tsx @@ -5,6 +5,7 @@ import { useChangeOwner } from '@/hooks/projectInfo/useChangeOwner'; import Button from '@/components/common/button/button'; import ValidationMessage from '@/components/common/input/validationMessage'; +import ModalLoading from '@/components/common/loading/modalLoading'; import Modal from '@/components/common/modal/modal'; import * as S from '@/components/projectInfo/deleteTeamMember/deleteTeamMemberModal.style'; @@ -16,7 +17,7 @@ type TModalProps = { export default function DeleteTeamMember({ onClose, projectId = 0, email = '' }: TModalProps) { const { useDeleteMember } = useChangeOwner(); const queryClient = useQueryClient(); - const { mutate: deleteMember } = useDeleteMember; + const { mutate: deleteMember, isPending } = useDeleteMember; const [errorMessage, setErrorMessage] = useState(''); const handleChange = () => { deleteMember( @@ -37,6 +38,7 @@ export default function DeleteTeamMember({ onClose, projectId = 0, email = '' }: }; return ( + {isPending && } If you press the Remove button, it will never recover again and all data will be deleted. @@ -45,7 +47,7 @@ export default function DeleteTeamMember({ onClose, projectId = 0, email = '' }: - diff --git a/src/pages/login/login.tsx b/src/pages/login/login.tsx index be0c1e26..f6297483 100644 --- a/src/pages/login/login.tsx +++ b/src/pages/login/login.tsx @@ -29,9 +29,9 @@ export default function LoginPage() { const navigate = useNavigate(); const { useGetUserEmail } = useInvite(); - const { data: emailData } = useGetUserEmail; + const { isSuccess } = useGetUserEmail; - if (emailData) { + if (isSuccess) { navigate('/project'); } diff --git a/src/pages/signup/signup.tsx b/src/pages/signup/signup.tsx index a305d781..cee14211 100644 --- a/src/pages/signup/signup.tsx +++ b/src/pages/signup/signup.tsx @@ -37,9 +37,9 @@ type TAPIFormValues = { function SignupPage() { const navigate = useNavigate(); const { useGetUserEmail } = useInvite(); - const { data: emailData } = useGetUserEmail; + const { isSuccess } = useGetUserEmail; - if (emailData) { + if (isSuccess) { navigate('/project'); }