From f9493ee22ed1541864bfbb6681b9ca0e671a6883 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=97=B0=EC=A7=84?= Date: Thu, 20 Feb 2025 21:01:04 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EC=8B=9C=20=EC=BA=90=EC=8B=9C=20=EC=A7=80=EC=9A=B0?= =?UTF-8?q?=EA=B8=B0=20=EB=B0=8F=20=ED=9A=A8=EC=9C=A8=EC=84=B1=20=EC=A6=9D?= =?UTF-8?q?=EA=B0=80=20=EC=8B=9C=ED=82=A4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/sidebar/logtoutModal/logoutModal.tsx | 7 ++----- .../deleteProjectModal/deleteProjectModal.tsx | 15 +++++++++++---- src/pages/login/login.tsx | 4 ++-- src/pages/signup/signup.tsx | 4 ++-- 4 files changed, 17 insertions(+), 13 deletions(-) diff --git a/src/components/common/sidebar/logtoutModal/logoutModal.tsx b/src/components/common/sidebar/logtoutModal/logoutModal.tsx index 9cb27197..213283d2 100644 --- a/src/components/common/sidebar/logtoutModal/logoutModal.tsx +++ b/src/components/common/sidebar/logtoutModal/logoutModal.tsx @@ -1,5 +1,3 @@ -import { useNavigate } from 'react-router-dom'; - import useUserAuth from '@/hooks/auth/useUserAuth'; import Button from '@/components/common/button/button'; @@ -11,7 +9,6 @@ type TLogoutModalProps = { }; export default function LogoutModal({ onClose }: TLogoutModalProps) { - const navigate = useNavigate(); const { useLogout } = useUserAuth(); const { mutate: logoutMutate } = useLogout; const handleLogout = () => { @@ -19,11 +16,11 @@ export default function LogoutModal({ onClose }: TLogoutModalProps) { {}, { onSuccess: () => { - navigate('/', { replace: true }); + window.location.replace('/'); onClose(); }, onError: () => { - navigate('/', { replace: true }); + window.location.replace('/'); onClose(); }, }, diff --git a/src/components/projectInfo/deleteProjectModal/deleteProjectModal.tsx b/src/components/projectInfo/deleteProjectModal/deleteProjectModal.tsx index b013b8cc..54c2a5c6 100644 --- a/src/components/projectInfo/deleteProjectModal/deleteProjectModal.tsx +++ b/src/components/projectInfo/deleteProjectModal/deleteProjectModal.tsx @@ -1,5 +1,9 @@ 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'; @@ -14,15 +18,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.'); @@ -38,7 +45,7 @@ export default function DeleteProjectModal({ onClose }: TAuthModalProps) { - 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'); } From 97bd2072c6303dd727b3c9721f889a83c8685ed9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=97=B0=EC=A7=84?= Date: Thu, 20 Feb 2025 21:12:34 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=ED=95=84=EC=9A=94=EC=97=86?= =?UTF-8?q?=EB=8A=94=20reload=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20=EC=88=98?= =?UTF-8?q?=EC=A0=95,=20=EB=AA=A8=EB=93=A0=20=EB=AA=A8=EB=8B=AC=EC=97=90?= =?UTF-8?q?=20=EB=A1=9C=EB=94=A9=20=EC=B6=94=EA=B0=80,=20=EB=AA=A8?= =?UTF-8?q?=EB=93=A0=20=EB=AA=A8=EB=8B=AC=EC=97=90=20=EC=9A=94=EC=B2=AD?= =?UTF-8?q?=EC=9D=B4=20=EC=A4=91=EB=B3=B5=EC=9C=BC=EB=A1=9C=20=EA=B0=80?= =?UTF-8?q?=EC=A7=80=20=EB=AA=BB=ED=95=98=EB=8F=84=EB=A1=9D=20disabled=20?= =?UTF-8?q?=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/sidebar/logtoutModal/logoutModal.tsx | 10 +++++++--- .../projectInfo/ChangeOwnerModal/changeOwnerModal.tsx | 8 +++++--- .../deleteProjectModal/deleteProjectModal.tsx | 2 ++ .../deleteTeamMember/deleteTeamMemberModal.tsx | 6 ++++-- 4 files changed, 18 insertions(+), 8 deletions(-) diff --git a/src/components/common/sidebar/logtoutModal/logoutModal.tsx b/src/components/common/sidebar/logtoutModal/logoutModal.tsx index 213283d2..21431a22 100644 --- a/src/components/common/sidebar/logtoutModal/logoutModal.tsx +++ b/src/components/common/sidebar/logtoutModal/logoutModal.tsx @@ -4,13 +4,15 @@ 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 { useLogout } = useUserAuth(); - const { mutate: logoutMutate } = useLogout; + const { mutate: logoutMutate, isPending } = useLogout; const handleLogout = () => { logoutMutate( {}, @@ -26,14 +28,16 @@ export default function LogoutModal({ onClose }: TLogoutModalProps) { }, ); }; + 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 54c2a5c6..eed95a21 100644 --- a/src/components/projectInfo/deleteProjectModal/deleteProjectModal.tsx +++ b/src/components/projectInfo/deleteProjectModal/deleteProjectModal.tsx @@ -8,6 +8,7 @@ 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'; @@ -39,6 +40,7 @@ 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 = '' }: -