[week10][송준혁]과제 제출

src/apis/api.js

@@ -53,6 +53,13 @@ export const getPosts = async () => {
 
   // 과제!!
   export const deletePost = async (id, navigate) => {
+    const response = await instanceWithToken.delete(`/post/${id}/`);
+    if (response.status === 204) {
+      console.log("POST DELETE SUCCESS");
+      navigate(-1);
+    } else {
+      console.log("[ERROR] error while deleting post");
+    }
 
   };
 
@@ -109,6 +116,13 @@ export const getComments = async (postId) => {
 
   // 과제 !!
   export const deleteComment = async (id) => {
+    const response = await instanceWithToken.delete(`/comment/${id}/`);
+    if (response.status === 204) {
+      console.log("COMMENT DELETE SUCCESS");
+      window.location.reload();
+    } else {
+      console.log("[ERROR] error while deleting comment");
+    }
 
   };
 

src/components/Comment/CommentElement.jsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { updateComment } from "../../apis/api";
 
 const CommentElement = (props) => {
     const { comment, handleCommentDelete, postId } = props;
@@ -15,14 +16,10 @@ const CommentElement = (props) => {
     let day = date.getDate();
     day = day < 10 ? `0${day}` : day;
 
-    const handleEditComment = () => { // add api call for editing comment
+    const handleEditComment = async () => { // add api call for editing comment
         setContent(onChangeValue);
         setIsEdit(!isEdit);
-        console.log({
-            post: postId,
-            comment: comment.id,
-            content: content
-        });
+        await updateComment(comment.id, { content: onChangeValue });
     };
 
     useEffect(() => { // add api call to check if user is the author of the comment

src/components/Comment/index.jsx

@@ -1,42 +1,52 @@
-import { useState } from "react";
-import comments from "../../data/comments"; // dummy data
+import { useEffect, useState } from "react";
 import CommentElement from "./CommentElement";
+import { createComment, deleteComment, getComments, getUser } from "../../apis/api";
 
 const Comment = ({ postId }) => {
-    const [commentList, setCommentList] = useState(comments); // state for comments
+    const [commentList, setCommentList] = useState([]); // state for comments
     const [newContent, setNewContent] = useState(""); // state for new comment
+    const [userId, setUserId] = useState(0);
 
-    const handleCommentSubmit = (e) => {
+    useEffect(() => {
+        const getCommentList = async () => {
+            const comment = await getComments(postId);
+            setCommentList(comment);
+        };
+        getCommentList();
+
+        getUser().then((response) => {
+            setUserId(response.id);
+        });
+
+    }, []);
+
+    const handleCommentSubmit = async (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"
-                }
+                content: newContent,
+                author: userId,
             }
         ]);
-        console.log({
+        await createComment({
             post: postId,
-            content: newContent
+            content: newContent,
+            author: userId,
         });
         setNewContent("");
     };
 
-    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) => {
+        await deleteComment(commentId);
+        setCommentList(commentList.filter((comment) => comment.id !== commentId));
     };
 
     return (
         <div className="w-full mt-5 self-start">
             <h1 className="text-3xl font-bold my-5">Comments</h1>
-            {commentList.map((comment) => {
+            {commentList?.map((comment) => {
                 return (
                     <CommentElement key={comment.id} comment={comment} handleCommentDelete={handleCommentDelete} postId={postId} />
                 );