diff --git a/src/api/reviews/usePostReview.ts b/src/api/reviews/usePostReview.ts index 1b16bb4a..7be47bfb 100644 --- a/src/api/reviews/usePostReview.ts +++ b/src/api/reviews/usePostReview.ts @@ -1,41 +1,24 @@ -import { useEffect, useState } from "react"; -import { useApi } from "../../hook/useApi"; +import { useState } from "react"; + import { useNewDialog } from "../../hook/useNewDialog"; +import axiosPromise from "../../util/axios"; type Props = { bookInfoId: number; - changeTab: (tab: number) => void; + resetTab: () => void; }; -export const usePostReview = ({ bookInfoId, changeTab }: Props) => { - const checkLogin = JSON.parse(window.localStorage.getItem("user") || "{}"); +export const usePostReview = ({ bookInfoId, resetTab }: Props) => { const [content, setContent] = useState(""); - const { request } = useApi("post", "/reviews", { - bookInfoId, - content, - }); - - const refineResponse = () => { - changeTab(0); - }; - const { addDialogWithTitleAndMessage } = useNewDialog(); - - const displayError = () => { - const title = - checkLogin === null - ? "로그인 후 입력해주세요." - : "10자 이상 420자 이하로 입력해주세요."; - addDialogWithTitleAndMessage(title, title, ""); - }; - useEffect(() => { - const req = () => { - if (content !== "") { - request(refineResponse, displayError); - } - }; - req(); - }, [content]); + const { addErrorDialog } = useNewDialog(); - return { setContent }; + const request = () => + axiosPromise("post", "/reviews", { + bookInfoId, + content, + }) + .then(resetTab) + .catch(addErrorDialog); + return { content, setContent, request }; }; diff --git a/src/component/book/review/PostReview.tsx b/src/component/book/review/PostReview.tsx index a664ae39..64822d7a 100644 --- a/src/component/book/review/PostReview.tsx +++ b/src/component/book/review/PostReview.tsx @@ -1,68 +1,59 @@ -import { - ChangeEventHandler, - FormEventHandler, - ReactNode, - useState, -} from "react"; +import { FormEventHandler } from "react"; import "../../../asset/css/Review.css"; import Button from "../../utils/Button"; import { useNewDialog } from "../../../hook/useNewDialog"; import { useRecoilValue } from "recoil"; import userState from "../../../atom/userState"; +import { usePostReview } from "../../../api/reviews/usePostReview"; type Props = { - onClickPost: (post: string) => void; + bookInfoId: number; + resetTab: () => void; }; -const PostReview = ({ onClickPost }: Props) => { - const [content, setContent] = useState(""); - const checkLogin = useRecoilValue(userState); - const checkValidUser = () => { - const user = checkLogin; - if (user) { - if (user.userName === user.email) { - return false; - } - } - return true; - }; - - const onChange: ChangeEventHandler = e => { - setContent(e.target.value); - }; +const PostReview = ({ bookInfoId, resetTab }: Props) => { + const { content, setContent, request } = usePostReview({ + bookInfoId: +bookInfoId, + resetTab, + }); + const user = useRecoilValue(userState); + const hasPermissionToPostReview = user && user.userName !== user.email; // 인증된 유저는 이메일과 다른 닉네임을 가짐 + const isValidLength = content.length >= 10 && content.length <= 420; const { addDialogWithTitleAndMessage, addConfirmDialog } = useNewDialog(); - const submitReview = () => { - const validUser = checkValidUser(); - if (validUser === false) { - const title = "42 인증 후 리뷰 등록이 가능합니다."; - addDialogWithTitleAndMessage(title, title, ""); + + const postReviewOrDisplayError: FormEventHandler = e => { + e.preventDefault(); + if (hasPermissionToPostReview && isValidLength) { + addConfirmDialog( + `${content} 리뷰등록 확인`, + "리뷰를 등록하시겠습니까?", + "", + request, + ); return; } - onClickPost(content); - }; + const title = !hasPermissionToPostReview + ? "42 인증 후 리뷰 등록이 가능합니다." + : "10자 이상 420자 이하로 입력해주세요."; - const onSubmitHandler: FormEventHandler = e => { - e.preventDefault(); - addConfirmDialog( - `${content} 리뷰등록 확인`, - "리뷰를 등록하시겠습니까?", - "", - submitReview, - ); + addDialogWithTitleAndMessage(title, title, ""); }; return (
-
+