Newer
Older
import React, { useEffect, useState, useContext } from 'react';
import { UserContext, ArticleContext } from '../Context.js';
import axios from 'axios';
axios.defaults.withCredentials = true;
function PostRead() {
let params = useParams();
const userContext = useContext(UserContext);
const articleContext = useContext(ArticleContext);
const [article, setArticle] = useState(null)
const [inputComment, setInputComment] = useState("")
const [commentList, setCommentList] = useState("")
const navigate = useNavigate();
.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)
})
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 onSubmit = e => {
e.preventDefault();
if (!inputComment) {
alert("댓글을 작성해주세요.");
return
}
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 => {
<div className="introduction" style={{ display: 'flex' }}>
<MapLocator loc={{ lat: article.latitude, lng: article.longitude }} keyword={article.keyword}></MapLocator>
<div style={{ display: 'flex' }}>
<button onClick={SetLike}>좋아요</button>
<DelButton isThatYou={userinfo.id === article.author._id} target={article}></DelButton>
<ArticleContext.Provider value={{ requestLoadArticleById, setArticle }}>
{
article.comments.map((el) => {
return (
<Comment key={el._id} data={el}></Comment>
)
})
}
</ArticleContext.Provider>
<button>댓글 작성</button>
<input type="text" onChange={onTextChange}></input>
</div>
return (
<div className="introduction" style={{ display: 'flex' }}>
<p>로딩중입니다...</p>
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;
}