From 3e9cd413c9d6eab9abecd199c38ec034c9948759 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Autumn=20=28=EC=A1=B0=ED=99=8D=EB=B9=84=29?=
<60209518+dyongdi@users.noreply.github.com>
Date: Wed, 30 Jun 2021 15:55:18 +0900
Subject: [PATCH] =?UTF-8?q?[#126]=20=EC=BD=94=EB=A9=98=ED=8A=B8=20?=
=?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20(#130)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* [#111] Feat: 코멘트 생성 시 새로고침 안 해도 화면에 렌더링 되도록 atom 추가
* [#126] Feat: login user id와 comment author id 비교해서 삭제 버튼 렌더링
* [#126] Feat: 코멘트 삭제 기능 구현
---
fe/src/components/issue-detail/Comment.tsx | 38 +++++++++++++++++--
.../issue-detail/IssueDetailBody.tsx | 8 +++-
fe/src/stores/detailIssueStore.ts | 7 ++++
3 files changed, 47 insertions(+), 6 deletions(-)
diff --git a/fe/src/components/issue-detail/Comment.tsx b/fe/src/components/issue-detail/Comment.tsx
index e9ce18a62..47eecbb7b 100644
--- a/fe/src/components/issue-detail/Comment.tsx
+++ b/fe/src/components/issue-detail/Comment.tsx
@@ -1,17 +1,36 @@
+import { useRecoilValue, useSetRecoilState } from 'recoil';
import { Box, Button } from '@material-ui/core';
-import AuthorAvatar from 'components/common/AuthorAvatar';
import styled from 'styled-components';
+
+import AuthorAvatar from 'components/common/AuthorAvatar';
import { ReactComponent as EditSvg } from 'icons/edit.svg';
+import { ReactComponent as DeleteSvg } from 'icons/delete.svg';
import { ReactComponent as EmojiSvg } from 'icons/emoji.svg';
+import { instanceWithAuth } from 'api';
+
import { CommentType } from 'types/issueType';
-import { useRecoilValue } from 'recoil';
import { decodedUserDataAtom } from 'stores/userStore';
-import { detailIssueAuthorIdAtom } from 'stores/detailIssueStore';
+import { clickedIssueIdAtom } from 'stores/issueStore';
+import {
+ commentUpdateAtom,
+ detailIssueAuthorIdAtom,
+} from 'stores/detailIssueStore';
const Comment = ({ commentData }: { commentData: CommentType }) => {
const { id, description, createdTime, author } = commentData;
const issueAuthorId = useRecoilValue(detailIssueAuthorIdAtom);
const loginUser = useRecoilValue(decodedUserDataAtom);
+ const clickedIssueId = useRecoilValue(clickedIssueIdAtom);
+ const setCommentUpdate = useSetRecoilState(commentUpdateAtom);
+
+ const clickDeleteHandler = () => {
+ (async () => {
+ await instanceWithAuth.delete(
+ `${process.env.REACT_APP_API_URL}/api/issues/${clickedIssueId}/comments/${id}`
+ );
+ setCommentUpdate((cur) => ++cur);
+ })();
+ };
return (
@@ -23,7 +42,7 @@ const Comment = ({ commentData }: { commentData: CommentType }) => {
{createdTime}분 전
- {issueAuthorId === id && (
+ {issueAuthorId === author.id && (
{
{loginUser && loginUser.id === author.id && (
}>편집
)}
+ {loginUser && loginUser.id === author.id && (
+ }
+ color="secondary"
+ >
+ 삭제
+
+ )}
@@ -92,6 +120,8 @@ const IssueAuthorLabel = styled(Box)`
const EditIcon = styled(EditSvg)``;
+const DeleteIcon = styled(DeleteSvg)``;
+
const EmojiButton = styled.button`
all: unset;
margin-left: 1rem;
diff --git a/fe/src/components/issue-detail/IssueDetailBody.tsx b/fe/src/components/issue-detail/IssueDetailBody.tsx
index 34fb04969..90cf535a5 100644
--- a/fe/src/components/issue-detail/IssueDetailBody.tsx
+++ b/fe/src/components/issue-detail/IssueDetailBody.tsx
@@ -1,7 +1,7 @@
import axios from 'axios';
import { Box } from '@material-ui/core';
import styled from 'styled-components';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import AuthorAvatar from 'components/common/AuthorAvatar';
import CreateButton from 'components/buttons/CreateButton';
@@ -14,6 +14,7 @@ import { decodedUserDataAtom } from 'stores/userStore';
import {
commentDesctiptionAtom,
commentsQuery,
+ commentUpdateAtom,
detailIssueAuthorIdAtom,
issueDetailQuery,
} from 'stores/detailIssueStore';
@@ -28,6 +29,7 @@ const IssueDetailBody = () => {
const [commentDesctiption, setCommentDesctiption] = useRecoilState(
commentDesctiptionAtom
);
+ const setCommentUpdate = useSetRecoilState(commentUpdateAtom);
const issueDescription = {
// 코멘트처럼 생겼지만 사실 이슈의 본문
@@ -44,7 +46,7 @@ const IssueDetailBody = () => {
const newCommentHandler = () => {
const token = localStorage.getItem('jwt');
(async function () {
- axios.post(
+ await axios.post(
`${process.env.REACT_APP_API_URL}/api/issues/${clickedIssueId}/comments`,
{
description: commentDesctiption,
@@ -55,6 +57,8 @@ const IssueDetailBody = () => {
},
}
);
+ setCommentUpdate((cur) => ++cur);
+ setCommentDesctiption('');
})();
};
const handleChange = (e: React.ChangeEvent) =>
diff --git a/fe/src/stores/detailIssueStore.ts b/fe/src/stores/detailIssueStore.ts
index 9edb3b8bf..99200150d 100644
--- a/fe/src/stores/detailIssueStore.ts
+++ b/fe/src/stores/detailIssueStore.ts
@@ -14,6 +14,11 @@ export const commentDesctiptionAtom = atom({
default: '',
});
+export const commentUpdateAtom = atom({
+ key: 'commentUpdateAtom',
+ default: 0,
+});
+
export const issueDetailQuery = selector({
key: 'issueDetailQuery',
get: async ({ get }) => {
@@ -77,6 +82,8 @@ export const commentsQuery = selector({
get: async ({ get }) => {
const token = localStorage.getItem('jwt');
const clickedIssueId = get(clickedIssueIdAtom);
+ get(commentUpdateAtom);
+
try {
const { data } = await axios.get(
`${process.env.REACT_APP_API_URL}/api/issues/${clickedIssueId}/comments`,