From 13d0778e647c94b9e73e87a44d0ca448b09719e4 Mon Sep 17 00:00:00 2001 From: nno3onn Date: Wed, 15 Mar 2023 20:28:26 +0900 Subject: [PATCH 1/4] =?UTF-8?q?fix:=20useCreateCommunity=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../organisms/Modal/CreateCommunityModal.tsx | 28 +------------- src/hooks/query/useCreateCommunity.ts | 37 +++++++++++++++++-- src/hooks/query/useGetCommunityList.ts | 2 +- 3 files changed, 36 insertions(+), 31 deletions(-) diff --git a/src/components/organisms/Modal/CreateCommunityModal.tsx b/src/components/organisms/Modal/CreateCommunityModal.tsx index 36183f6..61e9205 100644 --- a/src/components/organisms/Modal/CreateCommunityModal.tsx +++ b/src/components/organisms/Modal/CreateCommunityModal.tsx @@ -15,7 +15,6 @@ import Text from "@components/atoms/Text/Text"; import useCreateCommunity from "@hooks/query/useCreateCommunity"; const CreateCommunityModal = () => { - const queryClient = useQueryClient(); const navigate = useNavigate(); let formData = new FormData(); @@ -25,32 +24,7 @@ const CreateCommunityModal = () => { const [img, setImg] = useState(); const [name, changeName] = useInput(); - const { mutate: createCommunity } = useCreateCommunity({ - onMutate: async (newCommunityList: any) => { - await queryClient.cancelQueries({ - queryKey: ["communityList", { userId: userInfo.id }], - }); - const previousCommunityList = queryClient.getQueriesData([ - "communityList", - newCommunityList, - ]); - return { newCommunityList, previousCommunityList }; - }, - onError: (_err: Error, _newCommunityList: any, context: any) => { - queryClient.setQueriesData( - ["communityList"], - context?.previousCommunityList - ); - }, - onSuccess: () => { - navigate(-1); - }, - onSettled: () => { - queryClient.invalidateQueries({ - queryKey: ["communityList", { userId: userInfo.id }], - }); - }, - }); + const { mutate: createCommunity } = useCreateCommunity(userInfo.id); const MakeCommunity = () => { formData.append("communityName", name); diff --git a/src/hooks/query/useCreateCommunity.ts b/src/hooks/query/useCreateCommunity.ts index d19d75b..1e92e6b 100644 --- a/src/hooks/query/useCreateCommunity.ts +++ b/src/hooks/query/useCreateCommunity.ts @@ -1,8 +1,39 @@ +import { useNavigate } from "react-router-dom"; import communityApi from "@api/community"; -import { useMutation } from "@tanstack/react-query"; +import { useMutation, useQueryClient } from "@tanstack/react-query"; -const useCreateCommunity = (options: any) => { - return useMutation(communityApi.create, options); +const useCreateCommunity = (userId: number) => { + const navigate = useNavigate(); + const queryClient = useQueryClient(); + + return useMutation(communityApi.create, { + onMutate: async (newCommunityList: any) => { + await queryClient.cancelQueries({ + queryKey: ["communityList", userId], + }); + const previousCommunityList = queryClient.getQueriesData([ + "communityList", + userId, + ]); + queryClient.setQueryData(["communityList", userId], newCommunityList); + + return { newCommunityList, previousCommunityList }; + }, + onError: (_err: Error, _newCommunityList: any, context: any) => { + queryClient.setQueriesData( + ["communityList", userId], + context?.previousCommunityList + ); + }, + onSuccess: () => { + navigate(-1); + }, + onSettled: () => { + queryClient.invalidateQueries({ + queryKey: ["communityList", userId], + }); + }, + }); }; export default useCreateCommunity; diff --git a/src/hooks/query/useGetCommunityList.ts b/src/hooks/query/useGetCommunityList.ts index 6816638..3a5f0e3 100644 --- a/src/hooks/query/useGetCommunityList.ts +++ b/src/hooks/query/useGetCommunityList.ts @@ -5,7 +5,7 @@ import { useState, useEffect } from "react"; const useGetCommunityList = ({ userId }: any) => { const [list, setList] = useState([]); const { data: res } = useQuery( - ["communityList", { userId }], + ["communityList", userId], communityApi.getList ); From 79c572224c3a2d7674a2182293b52d13659fb1c9 Mon Sep 17 00:00:00 2001 From: nno3onn Date: Thu, 16 Mar 2023 09:21:14 +0900 Subject: [PATCH 2/4] =?UTF-8?q?refac:=20useCreateCommunity=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20useDeleteCommunity=20=EB=A6=AC=ED=8C=A9?= =?UTF-8?q?=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../organisms/CommunitySettingDefault.tsx | 6 ++- .../organisms/Modal/CreateCommunityModal.tsx | 1 - src/hooks/query/useCreateCommunity.ts | 12 +++-- src/hooks/query/useDeleteCommnunity.ts | 47 +++++++++++++++++-- 4 files changed, 57 insertions(+), 9 deletions(-) diff --git a/src/components/organisms/CommunitySettingDefault.tsx b/src/components/organisms/CommunitySettingDefault.tsx index 99ca20f..cf2db2e 100644 --- a/src/components/organisms/CommunitySettingDefault.tsx +++ b/src/components/organisms/CommunitySettingDefault.tsx @@ -23,7 +23,10 @@ const CommunitySettingDefault = () => { const { mutate: modifyImage } = useModifyCommunityImage(); const { mutate: updateCommunityName } = useMutation(communityApi.update); - const { mutate: deleteCommunity } = useDeleteCommunity(); + const { mutate: deleteCommunity } = useDeleteCommunity({ + communityId, + userId: userInfo.id, + }); const changeCommunityName = () => { updateCommunityName({ @@ -37,7 +40,6 @@ const CommunitySettingDefault = () => { if (!communityId) return; deleteCommunity({ communityId, userId: userInfo.id }); - window.location.replace("/@me"); }; const changeImage = () => { diff --git a/src/components/organisms/Modal/CreateCommunityModal.tsx b/src/components/organisms/Modal/CreateCommunityModal.tsx index 61e9205..54ac711 100644 --- a/src/components/organisms/Modal/CreateCommunityModal.tsx +++ b/src/components/organisms/Modal/CreateCommunityModal.tsx @@ -1,7 +1,6 @@ import styled from "styled-components"; import useInput from "@hooks/common/useInput"; import DefaultInput from "@components/atoms/Input/DefaultInput"; -import { useQueryClient } from "@tanstack/react-query"; import { useNavigate } from "react-router-dom"; import { useUserStore } from "@store/useUserStore"; import { useState } from "react"; diff --git a/src/hooks/query/useCreateCommunity.ts b/src/hooks/query/useCreateCommunity.ts index 1e92e6b..c1d853d 100644 --- a/src/hooks/query/useCreateCommunity.ts +++ b/src/hooks/query/useCreateCommunity.ts @@ -15,19 +15,25 @@ const useCreateCommunity = (userId: number) => { "communityList", userId, ]); - queryClient.setQueryData(["communityList", userId], newCommunityList); + queryClient.setQueryData( + ["communityList", userId], + [previousCommunityList, newCommunityList] + ); - return { newCommunityList, previousCommunityList }; + return { previousCommunityList }; }, + onError: (_err: Error, _newCommunityList: any, context: any) => { queryClient.setQueriesData( ["communityList", userId], - context?.previousCommunityList + context.previousCommunityList ); }, + onSuccess: () => { navigate(-1); }, + onSettled: () => { queryClient.invalidateQueries({ queryKey: ["communityList", userId], diff --git a/src/hooks/query/useDeleteCommnunity.ts b/src/hooks/query/useDeleteCommnunity.ts index b076313..4dd7ce7 100644 --- a/src/hooks/query/useDeleteCommnunity.ts +++ b/src/hooks/query/useDeleteCommnunity.ts @@ -1,8 +1,49 @@ +import { useNavigate } from "react-router-dom"; import communityApi from "@api/community"; -import { useMutation } from "@tanstack/react-query"; +import { useMutation, useQueryClient } from "@tanstack/react-query"; -const useDeleteCommunity = () => { - return useMutation(communityApi.delete); +interface useDeleteCommunityProps { + communityId: string | undefined; + userId: number; +} + +const useDeleteCommunity = ({ + communityId, + userId, +}: useDeleteCommunityProps) => { + const navigate = useNavigate(); + const queryClient = useQueryClient(); + const QUERY_KEY = ["communityList", userId]; + + return useMutation(communityApi.delete, { + onMutate: async () => { + await queryClient.cancelQueries({ + queryKey: QUERY_KEY, + }); + const previousCommunityList = queryClient.getQueriesData(QUERY_KEY); + + const newCommunityList = [...previousCommunityList].filter( + (community: any) => community.id !== communityId + ); + queryClient.setQueryData(QUERY_KEY, newCommunityList); + + return { newCommunityList, previousCommunityList }; + }, + + onError: (_err: Error, _newCommunityList: any, context: any) => { + queryClient.setQueriesData(QUERY_KEY, context?.previousCommunityList); + }, + + onSuccess: () => { + navigate("/@me"); + }, + + onSettled: () => { + queryClient.invalidateQueries({ + queryKey: QUERY_KEY, + }); + }, + }); }; export default useDeleteCommunity; From bb1c66674c689d7d1770ad5b898efd8608866ef1 Mon Sep 17 00:00:00 2001 From: nno3onn Date: Thu, 16 Mar 2023 09:27:45 +0900 Subject: [PATCH 3/4] =?UTF-8?q?refac:=20QUERY=5FKEY=20=EC=83=9D=EC=84=B1?= =?UTF-8?q?=20=EB=B0=8F=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/query/useCreateCommunity.ts | 21 ++++++++------------- 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/src/hooks/query/useCreateCommunity.ts b/src/hooks/query/useCreateCommunity.ts index c1d853d..967d1e4 100644 --- a/src/hooks/query/useCreateCommunity.ts +++ b/src/hooks/query/useCreateCommunity.ts @@ -5,29 +5,24 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"; const useCreateCommunity = (userId: number) => { const navigate = useNavigate(); const queryClient = useQueryClient(); + const QUERY_KEY = ["communityList", userId]; return useMutation(communityApi.create, { onMutate: async (newCommunityList: any) => { await queryClient.cancelQueries({ - queryKey: ["communityList", userId], + queryKey: QUERY_KEY, }); - const previousCommunityList = queryClient.getQueriesData([ - "communityList", - userId, + const previousCommunityList = queryClient.getQueriesData(QUERY_KEY); + queryClient.setQueryData(QUERY_KEY, [ + ...previousCommunityList, + newCommunityList, ]); - queryClient.setQueryData( - ["communityList", userId], - [previousCommunityList, newCommunityList] - ); return { previousCommunityList }; }, onError: (_err: Error, _newCommunityList: any, context: any) => { - queryClient.setQueriesData( - ["communityList", userId], - context.previousCommunityList - ); + queryClient.setQueriesData(QUERY_KEY, context.previousCommunityList); }, onSuccess: () => { @@ -36,7 +31,7 @@ const useCreateCommunity = (userId: number) => { onSettled: () => { queryClient.invalidateQueries({ - queryKey: ["communityList", userId], + queryKey: QUERY_KEY, }); }, }); From 5a21bb05a1c6e5d0efadf514fa956589e67f7727 Mon Sep 17 00:00:00 2001 From: nno3onn Date: Fri, 17 Mar 2023 11:34:09 +0900 Subject: [PATCH 4/4] =?UTF-8?q?refac:=20optimistic=20updates=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 54 +++++++++---------- src/api/chat.ts | 7 ++- src/api/userSetting.ts | 4 +- src/components/atoms/Div/Status.tsx | 3 -- .../molecules/Div/InviteFriendBox.tsx | 5 +- src/components/molecules/Div/MessageLog.tsx | 1 - .../molecules/Div/UserSettingGeneralTab.tsx | 5 +- .../molecules/Div/WelcomeMessage.tsx | 5 +- .../molecules/Modal/UserSettingIntroModal.tsx | 3 +- .../molecules/Modal/UserSettingNameModal.tsx | 3 +- .../organisms/CommunitySettingDefault.tsx | 13 ++--- src/components/organisms/MainDirectBody.tsx | 1 - src/components/organisms/MyAccount.tsx | 51 +++++++----------- src/components/organisms/RegisterStep1.tsx | 10 +--- src/components/organisms/RegisterStep2.tsx | 2 +- src/hooks/query/useAcceptFriend.ts | 20 ++++++- src/hooks/query/useChangeUserImage.ts | 8 --- src/hooks/query/useCommunityUpdate.ts | 8 --- src/hooks/query/useCreateCommunity.ts | 10 ++-- src/hooks/query/useEnterInvitation.ts | 2 +- src/hooks/query/useModifyUserImage.ts | 2 +- src/hooks/query/useRejectFriend.ts | 18 ++++++- src/hooks/query/useSendEmail.ts | 4 +- ...ameUpdate.ts => useUpdateCommunityName.ts} | 4 +- .../query/useUpdateUserNameInCommunity.ts | 8 +++ 25 files changed, 124 insertions(+), 127 deletions(-) delete mode 100644 src/hooks/query/useChangeUserImage.ts delete mode 100644 src/hooks/query/useCommunityUpdate.ts rename src/hooks/query/{useCommunityNameUpdate.ts => useUpdateCommunityName.ts} (64%) create mode 100644 src/hooks/query/useUpdateUserNameInCommunity.ts diff --git a/package.json b/package.json index 2b46b3c..99e087a 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,33 @@ "name": "frontend", "version": "0.1.0", "private": true, + "scripts": { + "start": "craco start", + "build": "craco build", + "test": "craco test", + "eject": "react-scripts eject", + "chromatic": "chromatic", + "storybook": "start-storybook -p 6006 -s public", + "build-storybook": "build-storybook -s public" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + }, "dependencies": { "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", @@ -35,33 +62,6 @@ "web-vitals": "^2.1.0", "zustand": "^4.3.5" }, - "scripts": { - "start": "craco start", - "build": "craco build", - "test": "craco test", - "eject": "react-scripts eject", - "chromatic": "chromatic", - "storybook": "start-storybook -p 6006 -s public", - "build-storybook": "build-storybook -s public" - }, - "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - }, "devDependencies": { "@craco/craco": "^7.0.0", "@storybook/addon-actions": "^6.5.16", diff --git a/src/api/chat.ts b/src/api/chat.ts index a43e77a..c949278 100644 --- a/src/api/chat.ts +++ b/src/api/chat.ts @@ -5,14 +5,13 @@ const chatApi = { const { userId } = queryKey[1]; return await clientApi.get("/state/getchannel", { - params: { - userId, - }, + params: { userId }, }); }, - enter: async () => { + enterInvitation: async () => { return await clientApi.post("/chat/community_enter", { + //!TODO 기능 추가되면 하드코딩 수정할 것 name: "종인", channelId: "220", }); diff --git a/src/api/userSetting.ts b/src/api/userSetting.ts index 575ecfb..a091956 100644 --- a/src/api/userSetting.ts +++ b/src/api/userSetting.ts @@ -35,8 +35,8 @@ const userSettingApi = { }); }, - // 서버 프로필명 이름 변경 - communityUpdate: async ({ + // 커뮤니티 프로필명 이름 변경 + updateCommunityName: async ({ communityId, userId, userName, diff --git a/src/components/atoms/Div/Status.tsx b/src/components/atoms/Div/Status.tsx index 636bd9d..0f0713f 100644 --- a/src/components/atoms/Div/Status.tsx +++ b/src/components/atoms/Div/Status.tsx @@ -1,7 +1,4 @@ import styled from "styled-components"; -import StateDisturbIcon from "../Icons/StateDisturbIcon"; -import StateEmptyIcon from "../Icons/StateEmptyIcon"; -import StateMobileIcon from "../Icons/StateMobileIcon"; import StateOffIcon from "../Icons/StateOffIcon"; import StateOnIcon from "../Icons/StateOnIcon"; diff --git a/src/components/molecules/Div/InviteFriendBox.tsx b/src/components/molecules/Div/InviteFriendBox.tsx index c5da010..4b601aa 100644 --- a/src/components/molecules/Div/InviteFriendBox.tsx +++ b/src/components/molecules/Div/InviteFriendBox.tsx @@ -21,18 +21,17 @@ const InviteFriendBox = ({ name, userId, channelId }: friend) => { let backUrl = process.env.REACT_APP_BASE_URL; let uuid = crypto.randomUUID(); - let shortUrl = uuid; const onSendInvite = () => { sendInvite({ communityId, userId, - shortUrl, + shortUrl: uuid, }); sendInviteToChat({ sender: userInfo.name, channelId: channelId, - linkMessage: `${backUrl}/invite/${shortUrl}/${userId}`, + linkMessage: `${backUrl}/invite/${uuid}/${userId}`, }); }; diff --git a/src/components/molecules/Div/MessageLog.tsx b/src/components/molecules/Div/MessageLog.tsx index e052693..02dc143 100644 --- a/src/components/molecules/Div/MessageLog.tsx +++ b/src/components/molecules/Div/MessageLog.tsx @@ -2,7 +2,6 @@ import UserLogo from "@components/atoms/Div/UserLogo"; import MessageText from "@components/atoms/Div/MessageText"; import { createRef, useEffect, useState } from "react"; import styled from "styled-components"; -import MessageHoverButtons from "../Button/MessageHoverButtons"; import MessageUserDate from "./MessageUserDate"; interface MessageLogProps { diff --git a/src/components/molecules/Div/UserSettingGeneralTab.tsx b/src/components/molecules/Div/UserSettingGeneralTab.tsx index 9594ca6..73a1ad4 100644 --- a/src/components/molecules/Div/UserSettingGeneralTab.tsx +++ b/src/components/molecules/Div/UserSettingGeneralTab.tsx @@ -13,7 +13,6 @@ import { useEffect } from "react"; const UserSettingGeneralTab = () => { const { userInfo } = useUserStore(); - const { showSettingModal, settingModalType, @@ -60,13 +59,13 @@ const UserSettingGeneralTab = () => { - + {/* null} /> - + */} diff --git a/src/components/molecules/Div/WelcomeMessage.tsx b/src/components/molecules/Div/WelcomeMessage.tsx index c0bbc28..f7b7714 100644 --- a/src/components/molecules/Div/WelcomeMessage.tsx +++ b/src/components/molecules/Div/WelcomeMessage.tsx @@ -1,12 +1,11 @@ import MessageText from "@components/atoms/Div/MessageText"; import WelcomeIcon from "@components/atoms/Icons/WelcomeIcon"; -import React from "react"; import styled from "styled-components"; -interface WelcomeMessage { +interface WelcomeMessageProps { name: string; } -const WelcomeMessage = ({ name }: WelcomeMessage) => { +const WelcomeMessage = ({ name }: WelcomeMessageProps) => { return ( diff --git a/src/components/molecules/Modal/UserSettingIntroModal.tsx b/src/components/molecules/Modal/UserSettingIntroModal.tsx index 1ee85c2..b71da41 100644 --- a/src/components/molecules/Modal/UserSettingIntroModal.tsx +++ b/src/components/molecules/Modal/UserSettingIntroModal.tsx @@ -12,10 +12,11 @@ const UserSettingIntroModal = () => { const { setShowSettingModal } = useSettingModalStore(); const { userInfo, setUserInfo } = useUserStore(); - const [introduction, changeIntroduction] = useInput(); + const [introduction, changeIntroduction] = useInput(userInfo.introduction); const { mutate: modifyIntro } = useModifyIntro(); const updataIntro = () => { + setShowSettingModal(false); modifyIntro({ introduction }); setUserInfo({ ...userInfo, introduction }); }; diff --git a/src/components/molecules/Modal/UserSettingNameModal.tsx b/src/components/molecules/Modal/UserSettingNameModal.tsx index 8726dcb..9916084 100644 --- a/src/components/molecules/Modal/UserSettingNameModal.tsx +++ b/src/components/molecules/Modal/UserSettingNameModal.tsx @@ -6,14 +6,13 @@ import useInput from "@hooks/common/useInput"; import useModifyName from "@hooks/query/useModifyName"; import useSettingModalStore from "@store/useSettingModalStore"; import { useUserStore } from "@store/useUserStore"; -import styled from "styled-components"; import { Bottom, InputWrapper, TextWrapper } from "./UserSettingModal"; const UserSettingNameModal = () => { const { userInfo, setUserInfo } = useUserStore(); const { setShowSettingModal } = useSettingModalStore(); - const [name, changeName] = useInput(); + const [name, changeName] = useInput(userInfo.name); const [password, changePassword] = useInput(); const { mutate: modifyName } = useModifyName(); const updateUserName = () => { diff --git a/src/components/organisms/CommunitySettingDefault.tsx b/src/components/organisms/CommunitySettingDefault.tsx index cf2db2e..bc37571 100644 --- a/src/components/organisms/CommunitySettingDefault.tsx +++ b/src/components/organisms/CommunitySettingDefault.tsx @@ -4,14 +4,13 @@ import FieldButton from "../atoms/Button/fieldButton"; import styled from "styled-components"; import ImageUploadButton from "../molecules/Button/ImageUploadButton"; import { useState } from "react"; -import { useMutation } from "@tanstack/react-query"; import { useUserStore } from "@store/useUserStore"; import { useParams } from "react-router-dom"; import useInput from "@hooks/common/useInput"; import useDeleteCommunity from "@hooks/query/useDeleteCommnunity"; -import communityApi from "@api/community"; import useModifyCommunityImage from "@hooks/query/useModifyCommunityImage"; import DefaultInput from "@components/atoms/Input/DefaultInput"; +import useUpdateCommunityName from "@hooks/query/useUpdateCommunityName"; const CommunitySettingDefault = () => { let formData = new FormData(); @@ -21,8 +20,8 @@ const CommunitySettingDefault = () => { const [img, setImg] = useState(); const [name, changeName] = useInput(); + const { mutate: updateCommunityName } = useUpdateCommunityName(); const { mutate: modifyImage } = useModifyCommunityImage(); - const { mutate: updateCommunityName } = useMutation(communityApi.update); const { mutate: deleteCommunity } = useDeleteCommunity({ communityId, userId: userInfo.id, @@ -81,7 +80,7 @@ const CommunitySettingDefault = () => { - + {/* */} { ); }; -export default CommunitySettingDefault; - const ButtonWrapper = styled.div` width: 140px; height: 40px; margin-top: 0.5rem; `; + const Summary = styled.div` width: 100%; height: auto; @@ -131,8 +129,11 @@ const Mini = styled.div` flex-direction: row; width: auto; `; + const RightSide = styled.div` display: flex; flex-direction: row; height: 30%; `; + +export default CommunitySettingDefault; diff --git a/src/components/organisms/MainDirectBody.tsx b/src/components/organisms/MainDirectBody.tsx index 7a28d76..117f513 100644 --- a/src/components/organisms/MainDirectBody.tsx +++ b/src/components/organisms/MainDirectBody.tsx @@ -1,7 +1,6 @@ import clientApi from "@api/axios"; import WelcomeMessage from "@components/molecules/Div/WelcomeMessage"; import { Client, Stomp } from "@stomp/stompjs"; -import * as StompJS from "@stomp/stompjs"; import { useUserStore } from "@store/useUserStore"; import getFormatDate from "@utils/getFormatDate"; import { useEffect, useRef, useState } from "react"; diff --git a/src/components/organisms/MyAccount.tsx b/src/components/organisms/MyAccount.tsx index ff48cd2..fa3f69a 100644 --- a/src/components/organisms/MyAccount.tsx +++ b/src/components/organisms/MyAccount.tsx @@ -8,47 +8,36 @@ import useDeleteUser from "@hooks/query/useDeleteUser"; const MyAccount = () => { const { mutate: deleteUser } = useDeleteUser(); + return ( - <> - + + + + + deleteUser()} + backgroundColor="voice-hangup" fontWeight="bold" - fontSize="xl" - mb={20} - /> - - - - - deleteUser()} - backgroundColor="voice-hangup" - fontWeight="bold" - /> - - + ); }; export default MyAccount; -const ButtonWrappper = styled.div` - width: 10em; - height: 2rem; -`; - -const ButtonWrappper2 = styled.div` +const ButtonWrapper = styled.div` width: 7.5rem; height: 2rem; `; diff --git a/src/components/organisms/RegisterStep1.tsx b/src/components/organisms/RegisterStep1.tsx index 8aacfd9..d763bdf 100644 --- a/src/components/organisms/RegisterStep1.tsx +++ b/src/components/organisms/RegisterStep1.tsx @@ -18,14 +18,7 @@ const RegisterStep1 = () => { const [password, changePassword] = useInput(); const [errorMessage, setErrorMessage] = useState(""); - const { mutate: sendEmail } = useSendEmail({ - onError: () => { - setErrorMessage("문제가 발생했습니다. 다시 시도해주세요."); - }, - onSuccess: () => { - setStep(2); - }, - }); + const { mutate: sendEmail } = useSendEmail(); const goLoginPage = () => navigate("/login"); @@ -41,6 +34,7 @@ const RegisterStep1 = () => { setName(name); setPassword(password); sendEmail({ email, name, password }); + setStep(2); }; return ( diff --git a/src/components/organisms/RegisterStep2.tsx b/src/components/organisms/RegisterStep2.tsx index 461d631..891dae5 100644 --- a/src/components/organisms/RegisterStep2.tsx +++ b/src/components/organisms/RegisterStep2.tsx @@ -3,7 +3,7 @@ import useInput from "@hooks/common/useInput"; import useRegister from "@hooks/query/useRegister"; import useSendUserCode from "@hooks/query/useSendUserCode"; import { useRegisterStore } from "@store/useRegisterStore"; -import { useEffect, useState } from "react"; +import { useState } from "react"; import styled from "styled-components"; import DefaultButton from "../atoms/Button/DefaultButton"; import LinkText from "../atoms/Text/LinkText"; diff --git a/src/hooks/query/useAcceptFriend.ts b/src/hooks/query/useAcceptFriend.ts index ba0cf0f..bb17075 100644 --- a/src/hooks/query/useAcceptFriend.ts +++ b/src/hooks/query/useAcceptFriend.ts @@ -1,12 +1,28 @@ -import { useMutation, useQueryClient } from "@tanstack/react-query"; import friendApi from "@api/friend"; +import { useMutation, useQueryClient } from "@tanstack/react-query"; const useAcceptFriend = () => { const queryClient = useQueryClient(); + const QUERY_KEY = ["friendList"]; return useMutation(friendApi.accept, { + onMutate: async (newFriend: any) => { + await queryClient.cancelQueries({ queryKey: QUERY_KEY }); + const previousFriendList = queryClient.getQueryData(QUERY_KEY); + queryClient.setQueryData(QUERY_KEY, [ + ...(previousFriendList as any), + newFriend, + ]); + + return { previousFriendList }; + }, + + onError: (_err: Error, _newFriend: any, context: any) => { + queryClient.setQueryData(QUERY_KEY, context.previousFriendList); + }, + onSettled: () => { - queryClient.invalidateQueries({ queryKey: ["friendList"] }); + queryClient.invalidateQueries({ queryKey: QUERY_KEY }); }, }); }; diff --git a/src/hooks/query/useChangeUserImage.ts b/src/hooks/query/useChangeUserImage.ts deleted file mode 100644 index 4764d34..0000000 --- a/src/hooks/query/useChangeUserImage.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { useMutation } from "@tanstack/react-query"; -import userSettingApi from "@api/userSetting"; - -const useChangeUserImage = () => { - return useMutation(userSettingApi.modifyImage); -}; - -export default useChangeUserImage; diff --git a/src/hooks/query/useCommunityUpdate.ts b/src/hooks/query/useCommunityUpdate.ts deleted file mode 100644 index 046e89f..0000000 --- a/src/hooks/query/useCommunityUpdate.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { useMutation } from "@tanstack/react-query"; -import userSettingApi from "@api/userSetting"; - -const useCommunityUpdate = () => { - return useMutation(userSettingApi.communityUpdate); -}; - -export default useCommunityUpdate; diff --git a/src/hooks/query/useCreateCommunity.ts b/src/hooks/query/useCreateCommunity.ts index 967d1e4..e16c29e 100644 --- a/src/hooks/query/useCreateCommunity.ts +++ b/src/hooks/query/useCreateCommunity.ts @@ -8,20 +8,18 @@ const useCreateCommunity = (userId: number) => { const QUERY_KEY = ["communityList", userId]; return useMutation(communityApi.create, { - onMutate: async (newCommunityList: any) => { - await queryClient.cancelQueries({ - queryKey: QUERY_KEY, - }); + onMutate: async (newCommunity: any) => { + await queryClient.cancelQueries({ queryKey: QUERY_KEY }); const previousCommunityList = queryClient.getQueriesData(QUERY_KEY); queryClient.setQueryData(QUERY_KEY, [ ...previousCommunityList, - newCommunityList, + newCommunity, ]); return { previousCommunityList }; }, - onError: (_err: Error, _newCommunityList: any, context: any) => { + onError: (_err: Error, _newCommunity: any, context: any) => { queryClient.setQueriesData(QUERY_KEY, context.previousCommunityList); }, diff --git a/src/hooks/query/useEnterInvitation.ts b/src/hooks/query/useEnterInvitation.ts index abb1efb..8647366 100644 --- a/src/hooks/query/useEnterInvitation.ts +++ b/src/hooks/query/useEnterInvitation.ts @@ -2,7 +2,7 @@ import chatApi from "@api/chat"; import { useMutation } from "@tanstack/react-query"; const useEnterInvitation = () => { - return useMutation(chatApi.enter); + return useMutation(chatApi.enterInvitation); }; export default useEnterInvitation; diff --git a/src/hooks/query/useModifyUserImage.ts b/src/hooks/query/useModifyUserImage.ts index 9c7bfef..c1ddb7d 100644 --- a/src/hooks/query/useModifyUserImage.ts +++ b/src/hooks/query/useModifyUserImage.ts @@ -1,4 +1,4 @@ -import { useMutation, useQuery } from "@tanstack/react-query"; +import { useMutation } from "@tanstack/react-query"; import userSettingApi from "@api/userSetting"; const useModifyUserImage = (options: any) => { diff --git a/src/hooks/query/useRejectFriend.ts b/src/hooks/query/useRejectFriend.ts index 5ffacd9..0572130 100644 --- a/src/hooks/query/useRejectFriend.ts +++ b/src/hooks/query/useRejectFriend.ts @@ -3,10 +3,26 @@ import friendApi from "@api/friend"; const useRejectFriend = () => { const queryClient = useQueryClient(); + const QUERY_KEY = ["friendList"]; return useMutation(friendApi.reject, { + onMutate: async (newFriend: any) => { + await queryClient.cancelQueries({ queryKey: QUERY_KEY }); + const previousFriendList: any = queryClient.getQueryData(QUERY_KEY); + const newFriendList = previousFriendList.filter( + (friend: any) => friend.id !== newFriend.id + ); + queryClient.setQueryData(QUERY_KEY, newFriendList); + + return { previousFriendList }; + }, + + onError: (_err: Error, _newFriend: any, context: any) => { + queryClient.setQueryData(QUERY_KEY, context.previousFriendList); + }, + onSettled: () => { - queryClient.invalidateQueries({ queryKey: ["friendList"] }); + queryClient.invalidateQueries({ queryKey: QUERY_KEY }); }, }); }; diff --git a/src/hooks/query/useSendEmail.ts b/src/hooks/query/useSendEmail.ts index 5beeedd..540e6c2 100644 --- a/src/hooks/query/useSendEmail.ts +++ b/src/hooks/query/useSendEmail.ts @@ -1,8 +1,8 @@ import { useMutation } from "@tanstack/react-query"; import authApi from "@api/auth"; -const useSendEmail = (options: any) => { - return useMutation(authApi.register, options); +const useSendEmail = () => { + return useMutation(authApi.register); }; export default useSendEmail; diff --git a/src/hooks/query/useCommunityNameUpdate.ts b/src/hooks/query/useUpdateCommunityName.ts similarity index 64% rename from src/hooks/query/useCommunityNameUpdate.ts rename to src/hooks/query/useUpdateCommunityName.ts index 39d66d0..9cfba3e 100644 --- a/src/hooks/query/useCommunityNameUpdate.ts +++ b/src/hooks/query/useUpdateCommunityName.ts @@ -1,8 +1,8 @@ import communityApi from "@api/community"; import { useMutation } from "@tanstack/react-query"; -const useModifyPassword = () => { +const useUpdateCommunityName = () => { return useMutation(communityApi.update); }; -export default useModifyPassword; +export default useUpdateCommunityName; diff --git a/src/hooks/query/useUpdateUserNameInCommunity.ts b/src/hooks/query/useUpdateUserNameInCommunity.ts new file mode 100644 index 0000000..6129830 --- /dev/null +++ b/src/hooks/query/useUpdateUserNameInCommunity.ts @@ -0,0 +1,8 @@ +import { useMutation } from "@tanstack/react-query"; +import userSettingApi from "@api/userSetting"; + +const useUpdateUserNameInCommunity = () => { + return useMutation(userSettingApi.updateCommunityName); +}; + +export default useUpdateUserNameInCommunity;