diff --git a/src/atoms/auth.jsx b/src/atoms/auth.jsx index ba8107b..27fcfd4 100644 --- a/src/atoms/auth.jsx +++ b/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', diff --git a/src/component/Article/ShowComment.jsx b/src/component/Article/ShowComment.jsx index a0332dc..1d17976 100644 --- a/src/component/Article/ShowComment.jsx +++ b/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 (
diff --git a/src/component/Article/WriteCommet.jsx b/src/component/Article/WriteCommet.jsx index b92dc0d..2f5774e 100644 --- a/src/component/Article/WriteCommet.jsx +++ b/src/component/Article/WriteCommet.jsx @@ -1,7 +1,7 @@ -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 = () => { @@ -9,18 +9,21 @@ 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 (
diff --git a/src/remote/index.jsx b/src/remote/index.jsx index 712eddb..a8acc3c 100644 --- a/src/remote/index.jsx +++ b/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}; \ No newline at end of file