Merge pull request #54 from Soongsil-Developers/Writecomment

[#53] comment 부분 글 작성후,post 메소드를 이용하여 서버에 저장

src/atoms/auth.jsx

@@ -33,6 +33,8 @@ export const slugState = atom({
   default:''
 })
 
+
+
 // export const newArticleState = atom({
 //   key: 'src/atoms/auth.jsx-newArticleState',
 //   default:{

src/component/Article/ArticleContainer.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import ArticleComment from './ArticleComment'
 import ArticleContents from './ArticleContents'
 import ShowComment from './ShowComment'
 import WriteCommet from './WriteCommet'

src/component/Article/WriteCommet.jsx

@@ -1,26 +1,43 @@
 import React from 'react'
+import { useState } from 'react'
+import { useRecoilValue } from 'recoil'
+import { 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)
+    }).catch(err=>{
+        console.log(err)
+    })
+  }
 
 return (
     <div className="row">
       <div className="col-xs-12 col-md-8 offset-md-2">
-        <form className="card comment-form">
+        <form className="card comment-form" onSubmit={(e)=>submitComment(e)}>
           <div className="card-block">
             <textarea
               className="form-control"
               placeholder="Write a comment..."
-              rows="3"
+              rows="3" value={body} onChange={(e)=>setTextComment(e.currentTarget.value)}
             ></textarea>
           </div>
           <div className="card-footer">
             <img
               src="http://i.imgur.com/Qr71crq.jpg"
               className="comment-author-img"
             />
-            <button className="btn btn-sm btn-primary">Post Comment</button>
+            <button className="btn btn-sm btn-primary" type='submit'>Post Comment</button>
           </div>
         </form>
       </div>

src/remote/index.jsx

@@ -203,6 +203,33 @@ const getSlugArticle = (slug) => conduitAxios.get(`/articles/${slug}`)
   ]
 }}
  */
-
 const getComment = (slug) => conduitAxios.get(`/articles/${slug}/comments`)
-  export {postRegisterUser,postLoginUser,getLoginUser,putLoginUser,getProfile,getArticles,createArticle,getSlugArticle,getComment};
+
+/**
+ @param {string} slug
+ @param {{
+  comment: {
+    body: string;
+  }
+}} comment
+ @returns {{
+  comments: [
+    {
+      id: 0;
+      createdAt: 2022-09-13T09:11:17.036Z;
+      updatedAt: 2022-09-13T09:11:17.036Z;
+      body: string;
+      author: {
+        username: string;
+        bio: string;
+        image: string;
+        following: true
+      }
+    }
+  ]
+}}
+ */
+
+const postComment =(slug,comment,{user}) => conduitAxios.post(`/articles/${slug}/comments`,{comment},{headers:{authorization:`Bearer ${user.token}`}})
+
+  export {postRegisterUser,postLoginUser,getLoginUser,putLoginUser,getProfile,getArticles,createArticle,getSlugArticle,getComment,postComment};