From 2eb59621d352e5ce04a854fd0d11156254ed5de1 Mon Sep 17 00:00:00 2001
From: jundm <bnmva23@gmail.com>
Date: Wed, 23 Feb 2022 19:44:46 +0900
Subject: [PATCH] [FE]fix:add post answer like mutate

---
 backend/backend/settings/common.py            |  2 +-
 frontend/README.md                            |  3 +
 frontend/components/Articles/ArticleList.tsx  |  5 +-
 frontend/components/Articles/ArticleView.tsx  | 27 ++++----
 .../components/Articles/ArticleViewAnswer.tsx | 63 +++++++++----------
 5 files changed, 51 insertions(+), 49 deletions(-)

diff --git a/backend/backend/settings/common.py b/backend/backend/settings/common.py
index c0272cc..30c15ce 100644
--- a/backend/backend/settings/common.py
+++ b/backend/backend/settings/common.py
@@ -210,7 +210,7 @@ def get_secret(common, secrets=secrets):
 # JWT
 SIMPLE_JWT = {
     "AUTH_HEADER_TYPES": ("JWT",),
-    "ACCESS_TOKEN_LIFETIME": timedelta(minutes=15),
+    "ACCESS_TOKEN_LIFETIME": timedelta(minutes=30),
     "REFRESH_TOKEN_LIFETIME": timedelta(days=1),
     "ALGORITHM": "HS256",
     "SIGNING_KEY": SECRET_KEY,
diff --git a/frontend/README.md b/frontend/README.md
index d657879..8f225b6 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -23,3 +23,6 @@ axios https://axios-http.com/kr/docs/
 formik https://formik.org/docs/overview
 
 spellchecker https://streetsidesoftware.com/vscode-spell-checker/docs/configuration/
+
+남은기능
+404,내정보,댓글,대댓글
diff --git a/frontend/components/Articles/ArticleList.tsx b/frontend/components/Articles/ArticleList.tsx
index 4eb0c0f..dd39eed 100644
--- a/frontend/components/Articles/ArticleList.tsx
+++ b/frontend/components/Articles/ArticleList.tsx
@@ -43,11 +43,10 @@ function ArticleList({
 
   useEffect(() => {
     if (error) {
-      //! 중복이여도 없앨수가 없음 오류안나고 access토큰만 삭제되면 실행이 안됨
       setVerifyToken();
-      console.error(error.message);
+      // console.error(error.message);
     }
-  }, [error]);
+  }, [error, data]);
 
   const columns = [
     {
diff --git a/frontend/components/Articles/ArticleView.tsx b/frontend/components/Articles/ArticleView.tsx
index adf2274..16a0efb 100644
--- a/frontend/components/Articles/ArticleView.tsx
+++ b/frontend/components/Articles/ArticleView.tsx
@@ -9,6 +9,7 @@ import { setVerifyToken } from "@utils/Cookies/TokenManager";
 import axios from "axios";
 import ArticleAnswerCreate from "./ArticleAnswerCreate";
 import ArticleViewAnswer from "./ArticleViewAnswer";
+import { Div } from "@components/HeaderBig/styles";
 
 interface ArticleViewProps {
   id: number;
@@ -37,9 +38,8 @@ function ArticleView({ id }: ArticleViewProps) {
   const [answer, setAnswer] = useState(false);
   useEffect(() => {
     if (error) {
-      //! 중복이여도 없앨수가 없음 오류안나고 access토큰만 삭제되면 실행이 안됨
       setVerifyToken();
-      console.error(error.message);
+      // console.error(error.message);
     }
   }, [error, data]);
 
@@ -120,16 +120,19 @@ function ArticleView({ id }: ArticleViewProps) {
         />
       )}
 
-      {answered?.results?.map((answer: AnswerProps, index: number) => {
-        return (
-          <ArticleViewAnswer
-            key={index}
-            id={id}
-            answer={answer}
-            answerMutate={answerMutate}
-          />
-        );
-      })}
+      {answered?.results?.map(
+        (answer: AnswerProps, index: number, children: any) => {
+          return (
+            <ArticleViewAnswer
+              key={index}
+              index={index}
+              id={id}
+              answer={answer}
+              answerMutate={answerMutate}
+            />
+          );
+        }
+      )}
 
       <Divider className="border-[1px]" />
       <Comment
diff --git a/frontend/components/Articles/ArticleViewAnswer.tsx b/frontend/components/Articles/ArticleViewAnswer.tsx
index 9812c3e..9c9eda0 100644
--- a/frontend/components/Articles/ArticleViewAnswer.tsx
+++ b/frontend/components/Articles/ArticleViewAnswer.tsx
@@ -5,8 +5,10 @@ import { LikeOutlined, LikeFilled, EditOutlined } from "@ant-design/icons";
 import axios from "axios";
 import dayjs from "dayjs";
 import nl2br from "react-nl2br";
+import { useSWRConfig } from "swr";
 
 interface ArticleViewAnswerProps {
+  index: number;
   id: number;
   answer: {
     id: number;
@@ -26,48 +28,50 @@ interface ArticleViewAnswerProps {
 }
 //* 답변 게시물
 function ArticleViewAnswer({
+  index,
   id,
   answer,
   answerMutate,
 }: ArticleViewAnswerProps) {
+  const { data, mutate } = useFetch(
+    `posts/api/${id}/postComment/${answer?.id}/`
+  );
+  const { mutate: exMutate } = useSWRConfig();
   return (
     <>
       <Divider className="mt-2 mb-7 border-2" />
       <div className="flex items-center">
-        <h3 className="text-xl">{answer.title}</h3>
+        <h3 className="text-xl">{answer?.title}</h3>
         {/* eslint-disable */}
         <img
           className="rounded-full w-5 h-5 mr-1 ml-auto"
-          src={answer?.author.avatar_url}
+          src={answer?.author?.avatar_url}
           alt="avatar"
         />
-        <div className="mr-1">{answer?.author.username}</div>
+        <div className="mr-1">{answer?.author?.username}</div>
         <div className="mr-1 ">
           <Divider type="vertical" className="border-[1px]" />
         </div>
         <div className=" mr-1">
           {dayjs(answer?.created_at).format("MM-DD hh:mm")}
         </div>
-        <div>추천 {answer.likes}</div>
+        <div>추천 {data?.likes}</div>
       </div>
       <div className=" min-h-[35vh]">
         <p>{nl2br(answer?.content)}</p>
       </div>
       <div className="flex items-center justify-center text-[24px]">
-        {answer.isLikes ? (
+        {data?.isLikes ? (
           <LikeFilled
             onClick={async () => {
-              answerMutate((likes: any) => {
-                console.log(likes.results);
-              });
-              // answerMutate(
-              //   {
-              //     ...answer,
-              //     isLikes: false,
-              //     likes: answer.likes - 1,
-              //   },
-              //   false
-              // );
+              mutate(
+                {
+                  answer,
+                  isLikes: false,
+                  likes: data.likes - 1,
+                },
+                false
+              );
               await axios.delete(
                 `${process.env.NEXT_PUBLIC_ENV_BASE_URL}posts/api/${id}/postComment/${answer?.id}/like/`
               );
@@ -76,29 +80,22 @@ function ArticleViewAnswer({
         ) : (
           <LikeOutlined
             onClick={async () => {
-              answerMutate(async (likes: any) => {
-                console.log(likes.results);
-                return {
-                  ...likes.results,
-                  
-                }
-              });
-              // answerMutate(
-              //   {
-              //     ...answer,
-              //     isLikes: true,
-              //     likes: answer.likes + 1,
-              //   },
-              //   false
-              // );
+              mutate(
+                {
+                  answer,
+                  isLikes: true,
+                  likes: data.likes + 1,
+                },
+                false
+              );
               await axios.post(
                 `${process.env.NEXT_PUBLIC_ENV_BASE_URL}posts/api/${id}/postComment/${answer?.id}/like/`,
-                { ...answer }
+                { ...data }
               );
             }}
           />
         )}
-        {answer.likes}
+        {data?.likes}
       </div>
     </>
   );