Skip to content

[week10][박성일] 과제 제출 #72

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Atipico1 wants to merge 1 commit into
base: seongil-week10
Choose a base branch
from
Open

[week10][박성일] 과제 제출 #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 22 additions & 30 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 7 additions & 1 deletion src/apis/api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,5 +123,11 @@ export const updateComment = async (id, data) => {

// 과제 !!
export const deleteComment = async (id) => {

const response = await instanceWithToken.delete(`/comment/${id}/`);
if (response.status === 204) {
console.log("success");
window.location.reload();
} else {
console.log("[ERROR] error while deleting comment");
}
};
22 changes: 15 additions & 7 deletions src/components/Comment/CommentElement.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,21 @@
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 [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 전처리
Expand All @@ -16,13 +27,8 @@ 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
Expand All @@ -40,6 +46,7 @@ const CommentElement = (props) => {
<span className="text-base text-gray-300">{year}.{month}.{day}</span>
</div>

{user?.id === comment?.author ? (
<div className="flex flex-row items-center gap-3">
{isEdit ? (
<>
Expand All @@ -53,6 +60,7 @@ const CommentElement = (props) => {
</>
)}
</div>
) : null}
</div>
);
};
Expand Down
97 changes: 56 additions & 41 deletions src/components/Comment/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,68 @@
import { useState } from "react";
import comments from "../../data/comments"; // dummy data
import { useState, useEffect } from "react";
import CommentElement from "./CommentElement";
import { getComments, createComment, deleteComment } 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 handleCommentSubmit = (e) => {

useEffect(() => {
const getCommentsAPI = async () => {
const comments = await getComments(postId);
setCommentList(comments);
};
console.log("get comments");
getCommentsAPI();
}, []);

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"
}
}
]);
createComment({
post: postId,
content: newContent,
});
console.log({
post: postId,
content: newContent
post: postId,
content: newContent,
});
setNewContent("");
};
};

const handleCommentDelete = (commentId) => {
if (window.confirm("정말로 삭제하시겠습니까?"))
{deleteComment(commentId);}
}

const handleCommentDelete = (commentId) => {
console.log("comment: ", commentId);
setCommentList(commentList.filter((comment) => comment.id !== commentId)); // TODO: add api call for deleting comment
};

return (
return (
<div className="w-full mt-5 self-start">
<h1 className="text-3xl font-bold my-5">Comments</h1>
{commentList.map((comment) => {
return (
<CommentElement key={comment.id} comment={comment} handleCommentDelete={handleCommentDelete} postId={postId} />
);
})}

<form className="flex flex-row mt-10 gap-3" onSubmit={handleCommentSubmit}>
<input type="text" value={newContent} placeholder="댓글을 입력해주세요" className="input" style={{ width: "calc(100% - 100px)" }} onChange={(e) => setNewContent(e.target.value)} />
<button type="submit" className="button">작성</button>
</form>
</div>
);
<h1 className="text-3xl font-bold my-5">Comments</h1>
{commentList.map((comment) => {
return (
<CommentElement
key={comment.id}
comment={comment}
handleCommentDelete={handleCommentDelete}
postId={postId}
/>
);
})}
<form
className="flex flex-row mt-10 gap-3"
onSubmit={handleCommentSubmit}
>
<input
type="text"
value={newContent}
placeholder="댓글을 입력해주세요"
className="input"
style={{ width: "calc(100% - 100px)" }}
onChange={(e) => setNewContent(e.target.value)}
/>
<button type="submit" className="button">
작성
</button>
</form>
</div>
);
};

export default Comment;