From 6c26ede7e3f5f19f3a015a862619c08bf6266f76 Mon Sep 17 00:00:00 2001 From: Rokhee LEE Date: Mon, 27 May 2024 19:34:50 +0900 Subject: [PATCH 1/2] feat: hw fin --- src/apis/api.js | 10 ++-- src/components/Comment/CommentElement.jsx | 51 ++++++++++-------- src/components/Comment/index.jsx | 66 ++++++++++++----------- 3 files changed, 71 insertions(+), 56 deletions(-) diff --git a/src/apis/api.js b/src/apis/api.js index 7a968e7d..b5b8654a 100644 --- a/src/apis/api.js +++ b/src/apis/api.js @@ -120,8 +120,12 @@ export const updateComment = async (id, data) => { console.log("[ERROR] error while updating comment"); } }; - -// 과제 !! + 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"); + } }; \ No newline at end of file diff --git a/src/components/Comment/CommentElement.jsx b/src/components/Comment/CommentElement.jsx index fd48385e..5d5e0711 100644 --- a/src/components/Comment/CommentElement.jsx +++ b/src/components/Comment/CommentElement.jsx @@ -1,4 +1,6 @@ import { useState, useEffect } from "react"; +import { getUser, updateComment } from "../../apis/api"; +import { getCookie } from "../../utils/cookie"; const CommentElement = (props) => { const { comment, handleCommentDelete, postId } = props; @@ -6,6 +8,17 @@ const CommentElement = (props) => { const [isEdit, setIsEdit] = useState(false); const [onChangeValue, setOnChangeValue] = useState(content); // 수정 취소 시 직전 content 값으로 변경을 위한 state + const [user, setUser] = useState(); + + useEffect(() => { + if (getCookie("access_token")) { + const getUserAPI = async () => { + const user = await getUser(); + setUser(user); + }; + getUserAPI(); + } + }, []); // comment created_at 전처리 const date = new Date(comment.created_at); @@ -16,18 +29,10 @@ const CommentElement = (props) => { day = day < 10 ? `0${day}` : day; const handleEditComment = () => { // add api call for editing comment - setContent(onChangeValue); + updateComment(comment.id, {...comment, content: 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 (
@@ -39,20 +44,20 @@ const CommentElement = (props) => { {year}.{month}.{day}
- -
- {isEdit ? ( - <> - - - - ) : ( - <> - - - - )} -
+ {user?.id === comment?.author ? ( +
+ {isEdit ? ( + <> + + + + ) : ( + <> + + + + )} +
) : null }
); }; diff --git a/src/components/Comment/index.jsx b/src/components/Comment/index.jsx index c8c4a27e..e7aabc3d 100644 --- a/src/components/Comment/index.jsx +++ b/src/components/Comment/index.jsx @@ -1,36 +1,42 @@ -import { useState } from "react"; -import comments from "../../data/comments"; // dummy data +import { useState, useEffect } from "react"; +import { getComments, createComment, deleteComment } from "../../apis/api"; import CommentElement from "./CommentElement"; +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 [commentList, setCommentList] = useState([]); + + useEffect(() => { + const getCommentsAPI = async () => { + const comments = await getComments(postId); + setCommentList(comments); + }; + getCommentsAPI(); + }); + + const [newComment, setNewComment] = useState({ + post: postId, + content: "", + }); + + const handleChange = (e) => { + setNewComment({...newComment, content: e.target.value}); + }; 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(""); + createComment(newComment); }; - const handleCommentDelete = (commentId) => { - console.log("comment: ", commentId); - setCommentList(commentList.filter((comment) => comment.id !== commentId)); // TODO: add api call for deleting comment + const handleCommentDelete = async(commentId) => { + const confirmDelete = window.confirm("정말 삭제하시겠습니까?"); + if (!confirmDelete) return; + try { + console.log(commentId); + await deleteComment(commentId); + } catch (error) { + console.error(error); + } }; return ( @@ -41,11 +47,11 @@ const Comment = ({ postId }) => { ); })} - -
- setNewContent(e.target.value)} /> - -
+ {getCookie("access_token") ? ( +
+ + +
) : null} ); }; From 84af64ec6d7911b8da59427fa14aaa718672a81e Mon Sep 17 00:00:00 2001 From: Rokhee LEE Date: Mon, 27 May 2024 20:02:56 +0900 Subject: [PATCH 2/2] feat: ban comment with no content --- src/components/Comment/index.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Comment/index.jsx b/src/components/Comment/index.jsx index e7aabc3d..48e5f298 100644 --- a/src/components/Comment/index.jsx +++ b/src/components/Comment/index.jsx @@ -25,7 +25,8 @@ const Comment = ({ postId }) => { const handleCommentSubmit = (e) => { e.preventDefault(); - createComment(newComment); + if (newComment.content.length > 0) createComment(newComment); + else alert('내용을 작성해주세요.'); }; const handleCommentDelete = async(commentId) => {