배포하기 연습

Author: hoyyChoi

src/atoms/auth.jsx

@@ -33,7 +33,10 @@ export const slugState = atom({
   default:''
 })
 
-
+export const commentsState = atom({
+  key:'src/atoms/auth.jsx-commentsState',
+  default:[]
+})
 
 // export const newArticleState = atom({
 //   key: 'src/atoms/auth.jsx-newArticleState',

src/component/Article/ShowComment.jsx

@@ -1,24 +1,25 @@
 import React from "react";
 import { useState } from "react";
 import { useEffect } from "react";
-import { useRecoilValue } from "recoil";
-import { slugState } from "../../atoms/auth";
+import { useRecoilValue,useRecoilState } from "recoil";
+import { commentsState, slugState } from "../../atoms/auth";
 import { getComment } from "../../remote/index";
 import WritterInfo from "../WritterInfo";
 
 const ShowComment = () => {
   const slug = useRecoilValue(slugState);
-  const [comments, setComments] = useState([]);
+  let [comments, setComments] = useRecoilState(commentsState);
 
   useEffect(() => {
     getComment(slug)
       .then((res) => {
-        setComments(res.data.comments);
+        console.log(res.data.comments)
+        setComments(res.data.comments)
       })
       .catch((err) => {
         console.log(err);
       });
-  }, [comments]);
+  }, [comments.length]);
 
   return (
     <div className="row">

src/component/Article/WriteCommet.jsx

@@ -1,26 +1,29 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useState } from 'react'
 import { useRecoilValue } from 'recoil'
-import { slugState, userState } from '../../atoms/auth'
+import { commentsState, slugState, userState } from '../../atoms/auth'
 import { postComment } from '../../remote/index'
 
 const WriteCommet = () => {
 
   const [body,setTextComment] = useState('')
   const slug = useRecoilValue(slugState)
   const user = useRecoilValue(userState)
-   
-  const submitComment = (e) =>{
-    e.preventDefault()
-
-    postComment(slug,{body},{user})
-    .then(res=>{
-        console.log(res)
-        //rerender 되면서 코멘트 부분이 추가됨. 페이지 전환
-    }).catch(err=>{
-        console.log(err)
-    })
-  }
+  let comments = useRecoilValue(commentsState)
+  
+    const submitComment = (e) =>{
+      e.preventDefault()
+  
+      postComment(slug,{body})
+      .then(res=>{
+          comments = [...comments,res.data.comment]
+          console.log(comments)
+          //rerender 되면서 코멘트 부분이 추가됨. 페이지 전환
+      }).catch(err=>{
+          console.log(err)
+      })
+    }
+  
 
 return (
     <div className="row">

src/remote/index.jsx

@@ -289,7 +289,7 @@ const getSlugArticle = (slug) => conduitAxios.get(`/articles/${slug}`)
   ]
 }}
  */
-const getComment = (slug) => conduitAxios.get(`/articles/${slug}/comments`)
+const getComment = (slug) => conduitAxios.get(`/articles/${slug}/comments`,{headers:{authorization:`Bearer ${localStorage.getItem('token')}`}})
 
 /**
  @param {string} slug
@@ -299,7 +299,7 @@ const getComment = (slug) => conduitAxios.get(`/articles/${slug}/comments`)
   }
 }} comment
  @returns {{
-  comments: [
+  comment: [
     {
       id: 0;
       createdAt: 2022-09-13T09:11:17.036Z;
@@ -316,6 +316,6 @@ const getComment = (slug) => conduitAxios.get(`/articles/${slug}/comments`)
 }}
  */
 
-const postComment =(slug,comment,{user}) => conduitAxios.post(`/articles/${slug}/comments`,{comment},{headers:{authorization:`Bearer ${user.token}`}})
+const postComment =(slug,comment) => conduitAxios.post(`/articles/${slug}/comments`,{comment},{headers:{authorization:`Bearer ${localStorage.getItem('token')}`}})
 
   export {postRegisterUser,postLoginUser,getLoginUser,putLoginUser,getProfile,getGlobalLoginArticles,getGlobalArticles,getArticles,getLoginArticles,createArticle,getSlugArticle,getComment,postComment};