Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[FE] 리뷰완료 한번에 클릭 시 일어나는 문제 해결(#781) #782

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

[FE] 리뷰완료 한번에 클릭 시 일어나는 문제 해결(#781) #782

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1bd2901
fix: 코드리뷰 완료 버튼을 한번에 클릭했을때 발생하는 문제 해결
pp449 Nov 21, 2024
d18b157
fix: 참여하기 버튼 클릭 시 private 방에서만 PR 작성에 대한 추가 문구가 보이도록 수정
pp449 Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 8 additions & 10 deletions frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,16 +33,14 @@ const MyReviewee = ({ roomInfo }: MyRevieweeProps) => {
if (loadingButtonId.includes(reviewee.userId)) return;
setLoadingButtonId((prev) => [...prev, reviewee.userId]);

postReviewCompleteMutation.mutate(
{ roomId: roomInfo.id, revieweeId: reviewee.userId },
{
onSuccess: () => {
handleNavigateFeedbackPage(reviewee);
setLoadingButtonId((prev) => prev.filter((id) => id !== reviewee.userId));
},
onError: () => setLoadingButtonId((prev) => prev.filter((id) => id !== reviewee.userId)),
},
);
postReviewCompleteMutation
.mutateAsync({ roomId: roomInfo.id, revieweeId: reviewee.userId })
.then(() => {
handleNavigateFeedbackPage(reviewee);
})
.finally(() => {
setLoadingButtonId((prev) => prev.filter((id) => id !== reviewee.userId));
Comment on lines +36 to +42
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

해당 mutation을 mutateAsync로 실행할 수 있군요..!! 새로운 것 알아갑니다👍👍
같은 mutation 호출로 오버라이딩이 되는 상황에서 mutateAsync를 활용하면 될 것 같네요!

mutateAsync는 promise를 반환해서 코드가 바꼈군여 finally에 로딩 배열에서 해당 id 제거하는 작업을 넣어서 가독성이 더 좋아진 것 같습니다!!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

async/await 보다는 then 체이닝 메서드를 좋아하는 분은 mutateAsync를 많이 사용한다고 하더라구요

mutate 와 mutateAsync의 차이가 단순히 취향차이인줄 알았는데 이렇게 사용에 대한 차이가 있다는 것을 해당 작업하면서 알게됐어요!

});
};

// 리뷰 및 피드백 여부 버튼 렌더링 함수
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/components/shared/roomCardModal/RoomCardModalButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,11 @@ const RoomCardModalButton = ({ roomInfo }: RoomCardModalButtonProps) => {
</S.FormWrapper>
</S.FormContainer>

<Button variant="primary" size="small" onClick={handleNoticeModal}>
<Button
variant="primary"
size="small"
onClick={roomInfo.isPublic ? handleParticipateRoomClick : handleNoticeModal}
>
참여하기
</Button>
</S.ButtonContainer>
Expand Down
Loading