[FE]fix:safari post like issue

jundm · Feb 22, 2022 · c9171af · c9171af
1 parent e138d95
commit c9171af
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 45 deletions.
diff --git a/frontend/components/Articles/ArticleAnswerCreate.tsx b/frontend/components/Articles/ArticleAnswerCreate.tsx
@@ -31,8 +31,16 @@ interface AnswerProps {
   created_at: string;
   updated_at: string;
 }
+interface NewAnswerProps {
+  author: {
+    username: string;
+    name: string;
+  };
+  title: string;
+  content: string;
+}
 interface ArticleAnswerCreateProps {
-  answerMutate: (value: AnswerProps, check?: boolean) => void;
+  answerMutate: (value: NewAnswerProps, check?: boolean) => void;
   // SWRResponse<any, any>.mutate: KeyedMutator<any>
   id: number;
   setAnswer: (arg: (answer: boolean) => boolean) => void;
@@ -68,14 +76,12 @@ function ArticleAnswerCreate({
                 },
                 ...values,
               };
-              // answerMutate(NewAnswer, false);
-              answerMutate({ ...answered }, false);
+              answerMutate(NewAnswer, false);
               await axios.post(
                 `${process.env.NEXT_PUBLIC_ENV_BASE_URL}posts/api/${id}/postComment/`,
                 NewAnswer
               );
-              // answerMutate();
-              answerMutate({ ...answered });
+              answerMutate(NewAnswer);
               setAnswer((answer) => !answer);
             }
           } catch (e) {

diff --git a/frontend/components/Articles/ArticleView.tsx b/frontend/components/Articles/ArticleView.tsx
@@ -28,20 +28,20 @@ interface AnswerProps {
   updated_at: string;
 }
 function ArticleView({ id }: ArticleViewProps) {
-  const { data, error, mutate } = useFetch(`posts/api/${id}`);
+  const { data, error, mutate } = useFetch(`posts/api/${id}/`);
   const {
     data: answered,
     error: answeredError,
     mutate: answerMutate,
-  } = useFetch(`posts/api/${id}/postComment`);
+  } = useFetch(`posts/api/${id}/postComment/`);
   const [answer, setAnswer] = useState(false);
   useEffect(() => {
     if (error) {
       //! 중복이여도 없앨수가 없음 오류안나고 access토큰만 삭제되면 실행이 안됨
       setVerifyToken();
       console.error(error.message);
     }
-  }, [error]);
+  }, [error, data]);
 
   const actions = [
     <>
@@ -53,7 +53,6 @@ function ArticleView({ id }: ArticleViewProps) {
       </div>
     </>,
   ];
-
   return (
     <div className="">
       <Head>
@@ -83,22 +82,20 @@ function ArticleView({ id }: ArticleViewProps) {
         {data?.isLikes ? (
           <LikeFilled
             onClick={async () => {
-              mutate({ ...data }, false);
+              mutate({ ...data, isLikes: false, likes: data.likes - 1 }, false);
               await axios.delete(
                 `${process.env.NEXT_PUBLIC_ENV_BASE_URL}posts/api/${data?.id}/like/`
               );
-              mutate({ ...data });
             }}
           />
         ) : (
           <LikeOutlined
             onClick={async () => {
-              mutate({ ...data }, false);
+              mutate({ ...data, isLikes: true, likes: data.likes + 1 }, false);
               await axios.post(
                 `${process.env.NEXT_PUBLIC_ENV_BASE_URL}posts/api/${data?.id}/like/`,
                 { ...data }
               );
-              mutate({ ...data });
             }}
           />
         )}
@@ -124,7 +121,14 @@ function ArticleView({ id }: ArticleViewProps) {
       )}
 
       {answered?.results?.map((answer: AnswerProps, index: number) => {
-        return <ArticleViewAnswer key={index} id={id} answer={answer} />;
+        return (
+          <ArticleViewAnswer
+            key={index}
+            id={id}
+            answer={answer}
+            answerMutate={answerMutate}
+          />
+        );
       })}
 
       <Divider className="border-[1px]" />

diff --git a/frontend/components/Articles/ArticleViewAnswer.tsx b/frontend/components/Articles/ArticleViewAnswer.tsx
@@ -22,17 +22,14 @@ interface ArticleViewAnswerProps {
     created_at: string;
     updated_at: string;
   };
+  answerMutate: any;
 }
 //* 답변 게시물
-function ArticleViewAnswer({ id, answer }: ArticleViewAnswerProps) {
-  const [isLike, setIsLike] = useState(false);
-  const [likes, setLikes] = useState(0);
-  useEffect(() => {
-    if (answer) {
-      setIsLike(answer.isLikes);
-      setLikes(answer.likes);
-    }
-  }, [answer]);
+function ArticleViewAnswer({
+  id,
+  answer,
+  answerMutate,
+}: ArticleViewAnswerProps) {
   return (
     <>
       <Divider className="mt-2 mb-7 border-2" />
@@ -51,41 +48,57 @@ function ArticleViewAnswer({ id, answer }: ArticleViewAnswerProps) {
         <div className=" mr-1">
           {dayjs(answer?.created_at).format("MM-DD hh:mm")}
         </div>
-        <div>추천 {likes}</div>
+        <div>추천 {answer.likes}</div>
       </div>
       <div className=" min-h-[35vh]">
         <p>{nl2br(answer?.content)}</p>
       </div>
       <div className="flex items-center justify-center text-[24px]">
-        {isLike ? (
+        {answer.isLikes ? (
           <LikeFilled
-            onClick={() => {
-              setIsLike(false);
-              axios
-                .delete(
-                  `${process.env.NEXT_PUBLIC_ENV_BASE_URL}posts/api/${id}/postComment/${answer?.id}/like/`
-                )
-                .then((response) => {
-                  setLikes(likes - 1);
-                });
+            onClick={async () => {
+              answerMutate((likes: any) => {
+                console.log(likes.results);
+              });
+              // answerMutate(
+              //   {
+              //     ...answer,
+              //     isLikes: false,
+              //     likes: answer.likes - 1,
+              //   },
+              //   false
+              // );
+              await axios.delete(
+                `${process.env.NEXT_PUBLIC_ENV_BASE_URL}posts/api/${id}/postComment/${answer?.id}/like/`
+              );
             }}
           />
         ) : (
           <LikeOutlined
-            onClick={() => {
-              setIsLike(true);
-              axios
-                .post(
-                  `${process.env.NEXT_PUBLIC_ENV_BASE_URL}posts/api/${id}/postComment/${answer?.id}/like/`,
-                  { ...answer }
-                )
-                .then((response) => {
-                  setLikes(likes + 1);
-                });
+            onClick={async () => {
+              answerMutate(async (likes: any) => {
+                console.log(likes.results);
+                return {
+                  ...likes.results,
+
+                }
+              });
+              // answerMutate(
+              //   {
+              //     ...answer,
+              //     isLikes: true,
+              //     likes: answer.likes + 1,
+              //   },
+              //   false
+              // );
+              await axios.post(
+                `${process.env.NEXT_PUBLIC_ENV_BASE_URL}posts/api/${id}/postComment/${answer?.id}/like/`,
+                { ...answer }
+              );
             }}
           />
         )}
-        {likes}
+        {answer.likes}
       </div>
     </>
   );

diff --git a/frontend/utils/Cookies/TokenManager.tsx b/frontend/utils/Cookies/TokenManager.tsx
@@ -35,6 +35,7 @@ function setVerifyToken() {
       .then((res) => {
         if (res) {
           setAccessToken(res.data.access);
+          console.log("토큰삭제-재발급");
         }
       });
   } else if (cookies.get("accessToken")) {
@@ -51,6 +52,7 @@ function setVerifyToken() {
             .then((res) => {
               if (res) {
                 setAccessToken(res.data.access);
+                console.log("토큰미삭제-재발급");
               }
             });
         }