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'); console.log(articleContext) 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;