From 85bca90366fd008b06643f777925f28a2595279e Mon Sep 17 00:00:00 2001 From: limyeonsang Date: Tue, 12 Jul 2022 22:26:53 +0900 Subject: [PATCH] #12 Add editInterests api --- apis/myPage.ts | 11 +++++-- constants/interestCategory.ts | 9 ++++++ constants/queryKey.ts | 1 - constants/uri.ts | 3 +- pages/editInterests.tsx | 9 ++++-- pages/myPage/setUp.tsx | 11 +++---- views/editInterests/CompleteButton.tsx | 42 ++++++++++++++++++++++---- views/editInterests/ContentsLayout.tsx | 14 ++++++--- 8 files changed, 76 insertions(+), 24 deletions(-) diff --git a/apis/myPage.ts b/apis/myPage.ts index f5e18cf..27dd4f7 100644 --- a/apis/myPage.ts +++ b/apis/myPage.ts @@ -41,7 +41,6 @@ interface GetFollowListResponse { name: string; } - export const getUserInfo = async (userId: number) => { const res = await request.get( `${uri.userInfo}/${userId}`, @@ -129,8 +128,16 @@ export const getFollowingList = async () => { return res.data; }; -export const WithdrawalMember = async () => { +export const withdrawalMember = async () => { const res = await request.delete(`${uri.withdrawal}`); return res; }; + +export const updateInterests = async (interestCategories: number[]) => { + const res = await request.post(`${uri.editInterest}`, { + interest_categories: interestCategories, + }); + + return res; +}; diff --git a/constants/interestCategory.ts b/constants/interestCategory.ts index 8e4981c..bea915d 100644 --- a/constants/interestCategory.ts +++ b/constants/interestCategory.ts @@ -12,38 +12,47 @@ import { const INTERESTS_CATEGORIES = [ { + id: 1, name: "패션", img: Fashion, }, { + id: 2, name: "헬스", img: Health, }, { + id: 3, name: "동물", img: Animal, }, { + id: 4, name: "뷰티", img: Beauty, }, { + id: 5, name: "요리", img: Cook, }, { + id: 6, name: "상담", img: Consulting, }, { + id: 7, name: "게임", img: Game, }, { + id: 8, name: "스포츠", img: Sports, }, { + id: 9, name: "음악", img: Music, }, diff --git a/constants/queryKey.ts b/constants/queryKey.ts index 85f5999..192cdf3 100644 --- a/constants/queryKey.ts +++ b/constants/queryKey.ts @@ -5,7 +5,6 @@ const enum queryKey { myAnswer = "my-answer", followerList = "follower-list", followingList = "following-list", - withdrawal = "withdrawal-member", } export default queryKey; diff --git a/constants/uri.ts b/constants/uri.ts index 7e6f496..137f305 100644 --- a/constants/uri.ts +++ b/constants/uri.ts @@ -6,7 +6,8 @@ const enum uri { answerVideos = "/user/answer/video", follwerList = "/follower", followingList = "/following", - withdrawal = "/user" + withdrawal = "/user", + editInterest = "/interests", } export default uri; diff --git a/pages/editInterests.tsx b/pages/editInterests.tsx index 7aead69..cd44d2f 100644 --- a/pages/editInterests.tsx +++ b/pages/editInterests.tsx @@ -4,13 +4,18 @@ import { useState } from "react"; const EditInterestsContainer = () => { const [buttonActive, setButtonActive] = useState(false); + const [names, setNames] = useState([]); return ( 관심있는 컨텐츠를 선택해보세요 최대 3개까지 선택할 수 있어요 - - + + ); }; diff --git a/pages/myPage/setUp.tsx b/pages/myPage/setUp.tsx index 485f662..0af7870 100644 --- a/pages/myPage/setUp.tsx +++ b/pages/myPage/setUp.tsx @@ -5,10 +5,11 @@ import { useTheme } from "@emotion/react"; import { useRouter } from "next/router"; import Link from "next/link"; import { useMutation } from "react-query"; -import queryKey from "@constants/queryKey"; -import { WithdrawalMember } from "@apis/myPage"; +import { withdrawalMember } from "@apis/myPage"; const SetUpContainer: FC = () => { + const useWithdrawalMember = useMutation(() => withdrawalMember()); + const theme = useTheme(); const router = useRouter(); @@ -19,11 +20,7 @@ const SetUpContainer: FC = () => { const onContact = () => { }; const onLogout = () => { }; // 토큰 지우고 메인으로.; const onWithdrawal = () => { - const { isLoading, isError } = useMutation( - [queryKey.withdrawal], - WithdrawalMember, - ); - // 모달이 떠야할거같은디? + useWithdrawalMember.mutate(); }; return ( diff --git a/views/editInterests/CompleteButton.tsx b/views/editInterests/CompleteButton.tsx index 71c5f99..151e0a5 100644 --- a/views/editInterests/CompleteButton.tsx +++ b/views/editInterests/CompleteButton.tsx @@ -1,18 +1,48 @@ +import { updateInterests } from "@apis/myPage"; import styled from "@emotion/styled"; -import { FC } from "react"; +import { FC, useEffect, useState } from "react"; +import { useMutation } from "react-query"; +import INTERESTS_CATEGORIES from "@constants/interestCategory"; interface PropsType { buttonActive: boolean; + names: string[]; } -const CompleteButton: FC = ({ buttonActive }) => { - const - +const CompleteButton: FC = ({ buttonActive, names }) => { + const useEditInterests = useMutation((interestsId: number[]) => + updateInterests(interestsId)); + + const [interestsId, setInterestsId] = useState([]); + + useEffect(() => { + const a = INTERESTS_CATEGORIES.map((v) => { + if (names.includes(v.name)) { + return v.id; + } + return ""; + }); + + setInterestsId(a.filter((v) => v !== "")); + }, [names]); + + const onClick = () => { + useEditInterests.mutate(interestsId); + }; + + if (useEditInterests.isSuccess) { + alert("변경완료."); + } + return ( - + 버튼 - ) + ); }; export default CompleteButton; diff --git a/views/editInterests/ContentsLayout.tsx b/views/editInterests/ContentsLayout.tsx index d984af1..0f44851 100644 --- a/views/editInterests/ContentsLayout.tsx +++ b/views/editInterests/ContentsLayout.tsx @@ -1,19 +1,23 @@ import styled from "@emotion/styled"; -import React, { FC, useEffect, useState } from "react"; +import React, { FC, useEffect } from "react"; import { ContentsItem } from "@views/editInterests"; import INTERESTS_CATEGORIES from "@constants/interestCategory"; interface PropsType { setButtonActive: React.Dispatch>; + names: string[]; + setNames: React.Dispatch>; } -const ContentsLayout: FC = ({ setButtonActive }) => { - const [names, setNames] = useState([]); - +const ContentsLayout: FC = ({ + setButtonActive, + names, + setNames, +}) => { useEffect(() => { if (names.length >= 1) { setButtonActive(true); } else { setButtonActive(false); } - }, [names]) + }, [names, setButtonActive]); const onClick = (index: number) => { const { name } = INTERESTS_CATEGORIES[index];