PostRead.js

import { useNavigate, useParams } from 'react-router-dom';
import React, { useEffect, useState, useContext } from 'react';
import Article from '../components/Article.js';
import { UserContext, ArticleContext } from '../Context.js';
import MapLocator from '../components/MapForLoaction.js';
import Comment from '../components/Comment.js';
import cookie from 'react-cookies';

import axios from 'axios';
axios.defaults.withCredentials = true;

function PostRead() {
  let params = useParams();
  const userContext = useContext(UserContext);
  const articleContext = useContext(ArticleContext);
  const userinfo = cookie.load('name')
  const [article, setArticle] = useState(null)
  const [inputComment, setInputComment] = useState("")
  const [commentList, setCommentList] = useState("")
  const navigate = useNavigate();
  function MoveTo(link) {
    navigate(link)
  }
  useEffect(() => {
    console.log(userinfo);
    userContext.CheckSession()
      .then((response) => {
        if (!response.data) {
          alert("로그인 바랍니다.");
          MoveTo('/login');
        }
        else {
          return requestLoadArticleById(params.id)
        }
      })
      .then((response) => {
        console.log(response)
        setArticle(response.data)
      })
      .catch((response) => {
        console.log("error!:LogOut")
        console.log(response)
      })

  }, []);

  function SetLike() {
    axios.put(`${process.env.REACT_APP_BACKEND_URL}/article/${params.id}/like`)
      .then(res => {
        return requestLoadArticleById(params.id)
      })
      .then(res => {
        setArticle(res.data)
      })
      .catch(err => {
        console.error(err);
      });
  }

  const onTextChange = (e) => {
    const { value } = e.target;
    setInputComment(value);
  }

  const onSubmit = e => {
    e.preventDefault();
    if (!inputComment) {
      alert("댓글을 작성해주세요.");
      return
    }
    const data = { content: inputComment }
    axios.post(`${process.env.REACT_APP_BACKEND_URL}/article/${params.id}/comment`, data,
      {
        headers: { "Content-Type": 'application/json' }
      })
      .then(res => {
        return requestLoadArticleById(params.id)
      })
      .then(res => {
        setArticle(res.data)
      })
      .catch(err => {
        console.error(err);
      });
  };

  function DelButton({ isThatYou, target }) {
    function deleteArticle() {
      console.log(target._id)
      requestDeleteArticleById(target._id).then(res => {
        alert("게시글이 삭제되었습니다");
        MoveTo('/')
      })
        .catch(err => {
          console.error(err);
        });
    }

    if (isThatYou) {
      return (<button onClick={deleteArticle}>지우기</button>)
    }
    else {
      return null
    }

  }
  if (article) {
    return (
      <>
        <div className="introduction" style={{ display: 'flex' }}>
          <MapLocator loc={{ lat: article.latitude, lng: article.longitude }} keyword={article.keyword}></MapLocator>
          <div>
            <Article data={article}></Article>
            <div style={{ display: 'flex' }}>
              <button onClick={SetLike}>좋아요</button>
              <DelButton isThatYou={userinfo.id === article.author._id} target={article}></DelButton>
            </div>
            <ArticleContext.Provider value={{ requestLoadArticleById, setArticle }}>
              {
                article.comments.map((el) => {
                  return (
                    <Comment key={el._id} data={el}></Comment>
                  )
                })
              }
            </ArticleContext.Provider>
          </div>
        </div>
        <form onSubmit={onSubmit}>
          <div style={{ display: 'flex' }}>
            <button>댓글 작성</button>
            <input type="text" onChange={onTextChange}></input>
          </div>
        </form>
      </>
    )
  }
  else {
    return (
      <div className="introduction" style={{ display: 'flex' }}>
        <p>로딩중입니다...</p>
      </div>
    )
  }
}

async function requestLoadArticleById(id) {
  const response = await axios({
    url: `${process.env.REACT_APP_BACKEND_URL}/article/${id}`, // 통신할 웹문서
    method: 'get', // 통신할 방식
  });
  return response;
}

async function requestDeleteArticleById(id) {
  const response = await axios({
    url: `${process.env.REACT_APP_BACKEND_URL}/article/${id}`, // 통신할 웹문서
    method: 'delete', // 통신할 방식
  });
  return response;
}

export default PostRead;