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(() => { 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(`http://localhost:8080/article/${params.id}/like`) .then(res => { alert("The comment is successfully uploaded"); 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(`http://localhost:8080/article/${params.id}/comment`, data, { headers: {"Content-Type": 'application/json'} }) .then(res => { alert("The comment is successfully uploaded"); 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("The article is successfully deleted"); 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.user_id} target={article}></DelButton> </div> </div> </div> <form onSubmit={onSubmit}> <div style={{display: 'flex'}}> <button>댓글 작성</button> <input type="text" onChange={onTextChange}></input> </div> </form> <ArticleContext.Provider value={{requestLoadArticleById, setArticle}}> { article.comments.map((el)=>{ return( <Comment key={el._id} data={el}></Comment> ) }) } </ArticleContext.Provider> </> ) } else { return( <div className="introduction" style={{display: 'flex'}}> <p>로딩준</p> </div> ) } } async function requestLoadArticleById(id) { const response = await axios({ url: `http://localhost:8080/article/${id}`, // 통신할 웹문서 method: 'get', // 통신할 방식 }); return response; } async function requestDeleteArticleById(id) { const response = await axios({ url: `http://localhost:8080/article/${id}`, // 통신할 웹문서 method: 'delete', // 통신할 방식 }); return response; } export default PostRead;