From ec195a69433151bd8466860f06c785bf800f4a95 Mon Sep 17 00:00:00 2001 From: Park Date: Mon, 27 May 2024 02:54:08 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=EA=B3=BC=EC=A0=9C=20=EC=99=84=EB=A3=8C(1?= =?UTF-8?q?=EC=B0=A8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/api.js | 9 +- src/components/Comment/CommentElement.jsx | 128 +++++++++++++--------- src/components/Comment/index.jsx | 110 +++++++++++-------- src/routes/HomePage.jsx | 8 -- 4 files changed, 148 insertions(+), 107 deletions(-) diff --git a/src/apis/api.js b/src/apis/api.js index 41ddee1d..35243d00 100644 --- a/src/apis/api.js +++ b/src/apis/api.js @@ -113,7 +113,14 @@ export const updateComment = async (id, data) => { }; // 과제 !! -export const deleteComment = async (id) => {}; +export const deleteComment = async (id) => { + const response = await instanceWithToken.delete(`/comment/${id}/`); + if (response.status === 204) { + console.log("DELETE SUCCESS"); + } else { + console.log("[ERROR] error while deleting comment"); + } +}; export const getUser = async () => { const response = await instanceWithToken.get("/account/info/"); diff --git a/src/components/Comment/CommentElement.jsx b/src/components/Comment/CommentElement.jsx index fd48385e..94de68ca 100644 --- a/src/components/Comment/CommentElement.jsx +++ b/src/components/Comment/CommentElement.jsx @@ -1,59 +1,79 @@ import { useState, useEffect } from "react"; +import { getUser, updateComment } from "../../apis/api"; +import { getCookie } from "../../utils/cookie"; const CommentElement = (props) => { - const { comment, handleCommentDelete, postId } = props; - const [content, setContent] = useState(comment.content); - const [isEdit, setIsEdit] = useState(false); - - const [onChangeValue, setOnChangeValue] = useState(content); // 수정 취소 시 직전 content 값으로 변경을 위한 state - - // comment created_at 전처리 - const date = new Date(comment.created_at); - const year = date.getFullYear(); - let month = date.getMonth() + 1; - month = month < 10 ? `0${month}` : month; - let day = date.getDate(); - day = day < 10 ? `0${day}` : day; - - const handleEditComment = () => { // add api call for editing comment - setContent(onChangeValue); - setIsEdit(!isEdit); - console.log({ - post: postId, - comment: comment.id, - content: content - }); - }; - - useEffect(() => { // add api call to check if user is the author of the comment - }, []); - - return ( -
-
- {isEdit ? ( - setOnChangeValue(e.target.value)} /> - ) : ( -

{content}

- )} - - {year}.{month}.{day} -
- -
- {isEdit ? ( - <> - - - - ) : ( - <> - - - - )} -
-
- ); + const { comment, handleCommentDelete, postId } = props; + const [isEdit, setIsEdit] = useState(false); + const [user, setUser] = useState(); + + const [onChangeValue, setOnChangeValue] = useState(comment.content); // 수정 취소 시 직전 content 값으로 변경을 위한 state + + // comment created_at 전처리 + const date = new Date(comment.created_at); + const year = date.getFullYear(); + let month = date.getMonth() + 1; + month = month < 10 ? `0${month}` : month; + let day = date.getDate(); + day = day < 10 ? `0${day}` : day; + + useEffect(() => { + // add api call to check if user is the author of the comment + if (getCookie("access_token")) { + const getUserAPI = async () => { + const user = await getUser(); + setUser(user); + }; + getUserAPI(); + } + }, []); + + const handleEditComment = () => { + // add api call for editing comment + updateComment(comment.id, { content: onChangeValue }); + }; + + return ( +
+
+ {isEdit ? ( + setOnChangeValue(e.target.value)} + /> + ) : ( +

{comment.content}

+ )} + + + {year}.{month}.{day} + +
+ +
+ {isEdit ? ( + <> + + + + ) : user?.id === comment?.author ? ( + <> + + + + ) : null} +
+
+ ); }; export default CommentElement; diff --git a/src/components/Comment/index.jsx b/src/components/Comment/index.jsx index c8c4a27e..ec7647aa 100644 --- a/src/components/Comment/index.jsx +++ b/src/components/Comment/index.jsx @@ -1,53 +1,75 @@ -import { useState } from "react"; -import comments from "../../data/comments"; // dummy data +import { useEffect, useState } from "react"; +//import comments from "../../data/comments"; // dummy data import CommentElement from "./CommentElement"; +import { getComments, createComment, deleteComment } from "../../apis/api"; const Comment = ({ postId }) => { - const [commentList, setCommentList] = useState(comments); // state for comments - const [newContent, setNewContent] = useState(""); // state for new comment - - const handleCommentSubmit = (e) => { - e.preventDefault(); - setCommentList([ // TODO: add api call for creating comment - ...commentList, - { - id: commentList.length + 1, - content: newContent, - created_at: new Date().toISOString(), - post: postId, - author: { - id: 1, - username: "user1" - } - } - ]); - console.log({ - post: postId, - content: newContent - }); - setNewContent(""); - }; + const [commentList, setCommentList] = useState([]); // state for comments + const [comment, setComment] = useState({ + post: postId, + content: "", + }); - const handleCommentDelete = (commentId) => { - console.log("comment: ", commentId); - setCommentList(commentList.filter((comment) => comment.id !== commentId)); // TODO: add api call for deleting comment + useEffect(() => { + const getCommentsAPI = async () => { + const comments = await getComments(postId); + setCommentList(comments); }; + getCommentsAPI(); + }, []); + + const handleChange = (e) => { + setComment({ ...comment, content: e.target.value }); + }; + + const handleCommentSubmit = (e) => { + e.preventDefault(); + createComment(comment); + }; + + const handleCommentDelete = (commentId) => { + const confirmDelete = window.confirm("정말 삭제하시겠습니까?"); + if (!confirmDelete) return; + try { + deleteComment(commentId); + } catch (error) { + console.error(error); + } + window.location.reload(); + }; + + return ( +
+

Comments

+ {commentList.map((comment) => { + return ( + + ); + })} - return ( -
-

Comments

- {commentList.map((comment) => { - return ( - - ); - })} - -
- setNewContent(e.target.value)} /> - -
-
- ); +
+ + +
+
+ ); }; export default Comment; diff --git a/src/routes/HomePage.jsx b/src/routes/HomePage.jsx index 577eda7a..5120f609 100644 --- a/src/routes/HomePage.jsx +++ b/src/routes/HomePage.jsx @@ -13,14 +13,6 @@ const HomePage = () => { const [searchTags, setSearchTags] = useState([]); const [searchValue, setSearchValue] = useState(""); - useEffect(() => { - const getPostsAPI = async () => { - const posts = await getPosts(); - setPostList(posts); - }; - getPostsAPI(); - }, []); - useEffect(() => { const getPostsAPI = async () => { const posts = await getPosts(); From fcb53bfa8218afe54102addb33b331acdfc2e8a2 Mon Sep 17 00:00:00 2001 From: Park Date: Mon, 27 May 2024 19:11:17 +0900 Subject: [PATCH 2/3] =?UTF-8?q?10=EC=A3=BC=EC=B0=A8=20=EA=B3=BC=EC=A0=9C?= =?UTF-8?q?=20=EC=99=84=EB=A3=8C(2=EC=B0=A8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Comment/index.jsx | 40 +++++++++++++++++++------------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/src/components/Comment/index.jsx b/src/components/Comment/index.jsx index ec7647aa..a33d1da1 100644 --- a/src/components/Comment/index.jsx +++ b/src/components/Comment/index.jsx @@ -2,6 +2,7 @@ import { useEffect, useState } from "react"; //import comments from "../../data/comments"; // dummy data import CommentElement from "./CommentElement"; import { getComments, createComment, deleteComment } from "../../apis/api"; +import { getCookie } from "../../utils/cookie"; const Comment = ({ postId }) => { const [commentList, setCommentList] = useState([]); // state for comments @@ -9,6 +10,7 @@ const Comment = ({ postId }) => { post: postId, content: "", }); + const [isUserLoggedIn, setIsUserLoggedIn] = useState(false); // 로그인 여부 상태, 우선 false로 초기화 useEffect(() => { const getCommentsAPI = async () => { @@ -16,6 +18,10 @@ const Comment = ({ postId }) => { setCommentList(comments); }; getCommentsAPI(); + + // 로그인 여부 확인 + const loggedIn = getCookie("access_token") ? true : false; + setIsUserLoggedIn(loggedIn); }, []); const handleChange = (e) => { @@ -52,22 +58,24 @@ const Comment = ({ postId }) => { ); })} -
- - -
+ {isUserLoggedIn ? ( +
+ + +
+ ) : null} ); }; From 806795d10a10154bc10fe8f1a2f6896f6c3dbc4e Mon Sep 17 00:00:00 2001 From: Park Date: Mon, 27 May 2024 20:12:18 +0900 Subject: [PATCH 3/3] =?UTF-8?q?error=20handling=20=EC=B2=98=EB=A6=AC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/axios.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/apis/axios.js b/src/apis/axios.js index 786a34a6..f5e57406 100644 --- a/src/apis/axios.js +++ b/src/apis/axios.js @@ -50,6 +50,8 @@ instanceWithToken.interceptors.response.use( (error) => { // 서버가 오류를 응답했을 때 처리 - 콘솔 찍어주고, 프론트에게 보내지 않고 오류를 발생시킴 console.log("Response Error!!"); - return Promise.reject(error); + //return Promise.reject(error); + alert(`${error}`); + return error; } );