Comment.js

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/article/${params.id}/comment/${_id}`, data,
        {
          headers: { "Content-Type": 'application/json' }
        })
      .then(res => {
        return articleContext.requestLoadArticleById(params.id)
      })
      .then(res => {
        articleContext.setArticle(res.data)
      })
      .catch(err => {
        console.error(err);
      });
  };

  if (userinfo.id === author.google.id) {
    return (
      <div class="comment" style={{ display: 'flex' }}>
        <p>{author.nickname}</p>
        <p>{content}</p>
        <p>{date}</p>
        <button style={{ width: '30px', height: '30px' }} onClick={DeleteComment} type="submit">X</button>
      </div>
    );
  }
  else {
    return (
      <div class="comment" style={{ display: 'flex' }}>
        <p>{author.nickname}</p>
        <p>{content}</p>
        <p>{date}</p>
      </div>
    );
  }

}

export default Comments;