From b5a51293200e19a4a4834f4ba285a967ba6508d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=9C=A4=ED=9D=AC?= Date: Thu, 30 May 2024 14:34:11 +0900 Subject: [PATCH] =?UTF-8?q?[week10][=EC=B5=9C=EC=9C=A4=ED=9D=AC]=20?= =?UTF-8?q?=EA=B3=BC=EC=A0=9C=20=EC=A0=9C=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/api.js | 10 +- src/components/Comment/CommentElement.jsx | 129 +++++++++++++--------- src/components/Comment/index.jsx | 105 ++++++++++-------- src/routes/HomePage.jsx | 1 + src/routes/PostDetailPage.jsx | 1 + 5 files changed, 149 insertions(+), 97 deletions(-) diff --git a/src/apis/api.js b/src/apis/api.js index 828bc0f2..bd067847 100644 --- a/src/apis/api.js +++ b/src/apis/api.js @@ -113,7 +113,15 @@ 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"); + window.location.reload(); + } else { + console.log("[ERROR] error while deleting delete"); + } +}; 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..be6b6f89 100644 --- a/src/components/Comment/CommentElement.jsx +++ b/src/components/Comment/CommentElement.jsx @@ -1,59 +1,82 @@ import { useState, useEffect } from "react"; +import { getCookie } from "../../utils/cookie"; +import { getUser, updateComment } from "../../apis/api"; 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 [content, setContent] = useState(comment.content); + const [isEdit, setIsEdit] = useState(false); + const [user, setUser] = useState([]); + + useEffect(() => { + if (getCookie("access_token")) { + const getUserAPI = async () => { + const user = await getUser(); + setUser(user); + }; + getUserAPI(); + } + }, []); + + 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 + updateComment(comment.id, { ...comment, content: onChangeValue }); + setIsEdit(!isEdit); + }; + + return ( +
+
+ {isEdit ? ( + setOnChangeValue(e.target.value)} + /> + ) : ( +

{content}

+ )} + + + {year}.{month}.{day} + +
+ + {user?.id === comment?.author ? ( +
+ {isEdit ? ( + <> + + + + ) : ( + <> + + + + )}
- ); + ) : null} +
+ ); }; export default CommentElement; diff --git a/src/components/Comment/index.jsx b/src/components/Comment/index.jsx index c8c4a27e..c881f837 100644 --- a/src/components/Comment/index.jsx +++ b/src/components/Comment/index.jsx @@ -1,53 +1,72 @@ -import { useState } from "react"; +import { useState, useEffect } 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(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([]); - 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(); + }, [postId]); + + const [newContent, setNewContent] = useState({ + post: postId, + content: "", + }); + + const handleChange = (e) => { + setNewContent({ ...newContent, content: e.target.value }); + }; + + const handleCommentSubmit = (e) => { + e.preventDefault(); + createComment(newContent); + }; + + const handleCommentDelete = (commentId) => { + deleteComment(commentId); + }; + + return ( +
+

Comments

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

Comments

- {commentList.map((comment) => { - return ( - - ); - })} - -
- setNewContent(e.target.value)} /> - -
-
- ); + {getCookie("access_token") ? ( +
+ + +
+ ) : null} +
+ ); }; export default Comment; diff --git a/src/routes/HomePage.jsx b/src/routes/HomePage.jsx index e1b173b6..e4d12583 100644 --- a/src/routes/HomePage.jsx +++ b/src/routes/HomePage.jsx @@ -16,6 +16,7 @@ const HomePage = () => { setPostList(posts); }; getPostsAPI(); + const getTagsAPI = async () => { const tags = await getTags(); const tagContents = tags.map((tag) => { diff --git a/src/routes/PostDetailPage.jsx b/src/routes/PostDetailPage.jsx index 89c60cb8..fa9e7e45 100644 --- a/src/routes/PostDetailPage.jsx +++ b/src/routes/PostDetailPage.jsx @@ -17,6 +17,7 @@ const PostDetailPage = () => { }; getPostAPI(); }, [postId]); + // 작성했던 getPost()를 호출한 후, setPostList를 통해 postList에 저장 useEffect(() => { // access_token이 있으면 유저 정보 가져옴