Skip to content

[week10][김지원] 과제 제출 #60

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
jj1kim wants to merge 1 commit into
base: Jiwon-week10
Choose a base branch
from
Open

[week10][김지원] 과제 제출 #60

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
26 changes: 19 additions & 7 deletions src/apis/api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,12 +88,16 @@ export const getComments = async (postId) => {
};

export const createComment = async (data) => {
const response = await instanceWithToken.post("/comment/", data);
if (response.status === 201) {
console.log("COMMENT SUCCESS");
window.location.reload(); // 새로운 코멘트 생성시 새로고침으로 반영
} else {
console.log("[ERROR] error while creating comment");
try {
const response = await instanceWithToken.post("/comment/", data);
if (response.status === 201) {
console.log("COMMENT SUCCESS");
window.location.reload(); // 새로운 코멘트 생성시 새로고침으로 반영
} else {
console.log("[ERROR] error while creating comment");
}
} catch (e) {
console.log("Error!");
}
};

Expand All @@ -108,7 +112,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("COMMENT DELETE SUCCESS");
window.location.reload();
} else {
console.log("[ERROR] error while deleting comment");
}
};

export const getUser = async () => {
const response = await instanceWithToken.get("/account/info/");
Expand Down
133 changes: 81 additions & 52 deletions src/components/Comment/CommentElement.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,88 @@
import { useState, useEffect } from "react";
import { getCookie } from "../../utils/cookie";
import { getUser, updateComment } from "../../apis/api";
import { useNavigate } from "react-router-dom";

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
});
const { comment, handleCommentDelete, postId } = props;
const [content, setContent] = useState(comment.content);
const [isEdit, setIsEdit] = useState(false);
const [user, setUser] = useState([]);

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);

const newComment = {
post: postId,
content: onChangeValue,
};
updateComment(comment.id, newComment);
};

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();
}
}, []);

return (
<div className="w-full flex flex-row justify-between items-center mb-5">
<div className="w-3/4 flex flex-col gap-1">
{isEdit ? (
<input
className="input mb-2"
value={onChangeValue}
onChange={(e) => setOnChangeValue(e.target.value)}
/>
) : (
<p className="text-lg">{content}</p>
)}

<span className="text-base text-gray-300">
{year}.{month}.{day}
</span>
</div>

useEffect(() => { // add api call to check if user is the author of the comment
}, []);

return (
<div className="w-full flex flex-row justify-between items-center mb-5">
<div className="w-3/4 flex flex-col gap-1">
{isEdit ? (
<input className="input mb-2" value={onChangeValue} onChange={(e) => setOnChangeValue(e.target.value)} />
) : (
<p className="text-lg">{content}</p>
)}

<span className="text-base text-gray-300">{year}.{month}.{day}</span>
</div>

<div className="flex flex-row items-center gap-3">
{isEdit ? (
<>
<button onClick={() => { setIsEdit(!isEdit); setOnChangeValue(content); }}>취소</button>
<button onClick={handleEditComment}>완료</button>
</>
) : (
<>
<button onClick={() => handleCommentDelete(comment.id)}>삭제</button>
<button onClick={() => setIsEdit(!isEdit)}>수정</button>
</>
)}
</div>
</div>
);
<div className="flex flex-row items-center gap-3">
{isEdit ? (
<>
<button
onClick={() => {
setIsEdit(!isEdit);
setOnChangeValue(content);
}}
>
취소
</button>
<button onClick={handleEditComment}>완료</button>
</>
) : user?.id === comment?.author ? (
<>
<button onClick={() => handleCommentDelete(comment.id)}>
삭제
</button>
<button onClick={() => setIsEdit(!isEdit)}>수정</button>
</>
) : null}
</div>
</div>
);
};
export default CommentElement;
98 changes: 56 additions & 42 deletions src/components/Comment/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,67 @@
import { useState } from "react";
import comments from "../../data/comments"; // dummy data
import { useEffect, useState } 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 [newContent, setNewContent] = useState(""); // state for new comment
const [commentList, setCommentList] = useState([]); // 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("");
useEffect(() => {
const getCommentAPI = async () => {
const comments = await getComments(postId);
setCommentList(comments);
};
getCommentAPI();
}, [postId]);

const handleCommentDelete = (commentId) => {
console.log("comment: ", commentId);
setCommentList(commentList.filter((comment) => comment.id !== commentId)); // TODO: add api call for deleting comment
const handleCommentSubmit = (e) => {
e.preventDefault();
const newComment = {
post: postId,
content: newContent,
};
createComment(newComment);
setNewContent("");
};

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>
);
const handleCommentDelete = (commentId) => {
if (window.confirm("정말 삭제하시겠습니까?")) {
deleteComment(commentId);
}
};

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>
);
};

export default Comment;