Skip to content
Snippets Groups Projects
Comment.js 1.74 KiB
Newer Older
  • Learn to ignore specific revisions
  • import "../css/Article.css"
    
    
    import React, { useEffect, useState, useContext} from 'react';
    import cookie from 'react-cookies';
    import {Routes, Route, Link, useNavigate, Navigate, useParams  } from 'react-router-dom';
    
    import { UserContext, ArticleContext } from '../Context.js';
    
    
    import { DateTime } from 'luxon';
    
    import axios from 'axios';
    axios.defaults.withCredentials = true;
    
    
    function Comments({data}) {
    
      const {
        _id, content, author, createdAt} = data;
    
      let params = useParams();
    
      const navigate = useNavigate();
      function MoveTo(link){
        navigate(link)
      }	
    
      const articleContext = useContext(ArticleContext);
      const userinfo = cookie.load('name')
    
      const date = DateTime.fromISO(createdAt).toFormat('yyyy년 MM월 dd일 HH:mm');
    
      function DeleteComment(e) {
        const data = {id: _id}
        axios
          .delete(`http://localhost:8080/post/comment/${params.id}/${_id}`, data,
            {
                headers: {"Content-Type": 'application/json'}
            })
          .then(res => {
            alert("The comment is successfully deleted");
            return articleContext.requestLoadArticleById(params.id)
          })
          .then(res => {
            articleContext.setArticle(res.data)
          })
          .catch(err => {
            console.error(err);
          });
      };
    
      if (userinfo.id===author.email) {
        return (
          <div class="comment" style={{display: 'flex'}}>
            <p>{author.nickname}</p>
            <p>{content}</p>
            <p>{date}</p>
            <button style={{height: '30px'}}  onClick={DeleteComment} type="submit">지우기</button>
          </div>
        );
      }
      else {
        return (
          <div class="comment" style={{display: 'flex'}}>
            <p>{author.nickname}</p>
            <p>{content}</p>
            <p>{date}</p>
          </div>
        );
      }
    
    
    }
    
    export default Comments;