From 08903648292cae6e81db22c82f703bc66662156d Mon Sep 17 00:00:00 2001
From: inyeong-kang <tomatorkd@naver.com>
Date: Fri, 28 Jul 2023 15:26:05 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20(#157)=20=EB=8C=93=EA=B8=80=20=EC=A1=B0?=
 =?UTF-8?q?=ED=9A=8C,=20=EB=93=B1=EB=A1=9D,=20=EC=88=98=EC=A0=95,=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EA=B4=80=EB=A0=A8=20=EC=BB=A4=EC=8A=A4?=
 =?UTF-8?q?=ED=85=80=20=EC=BF=BC=EB=A6=AC=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/hooks/query/comment/useCommentList.ts | 22 +++++++++++++++++
 .../hooks/query/comment/useCreateComment.ts   | 24 +++++++++++++++++++
 .../hooks/query/comment/useDeleteComment.ts   | 22 +++++++++++++++++
 .../src/hooks/query/comment/useEditComment.ts | 24 +++++++++++++++++++
 4 files changed, 92 insertions(+)
 create mode 100644 frontend/src/hooks/query/comment/useCommentList.ts
 create mode 100644 frontend/src/hooks/query/comment/useCreateComment.ts
 create mode 100644 frontend/src/hooks/query/comment/useDeleteComment.ts
 create mode 100644 frontend/src/hooks/query/comment/useEditComment.ts

diff --git a/frontend/src/hooks/query/comment/useCommentList.ts b/frontend/src/hooks/query/comment/useCommentList.ts
new file mode 100644
index 000000000..b98dc79f4
--- /dev/null
+++ b/frontend/src/hooks/query/comment/useCommentList.ts
@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getCommentList } from '@api/comment';
+
+import { QUERY_KEY } from '@constants/queryKey';
+
+export const useCommentList = (postId: number) => {
+  const { data, error, isLoading } = useQuery(
+    [QUERY_KEY.POSTS, postId, QUERY_KEY.COMMENTS],
+    () => getCommentList(postId),
+    {
+      onSuccess: data => {
+        return data;
+      },
+      onError: error => {
+        window.console.log('get comment list error', error);
+      },
+    }
+  );
+
+  return { data, error, isLoading };
+};
diff --git a/frontend/src/hooks/query/comment/useCreateComment.ts b/frontend/src/hooks/query/comment/useCreateComment.ts
new file mode 100644
index 000000000..ada69bc00
--- /dev/null
+++ b/frontend/src/hooks/query/comment/useCreateComment.ts
@@ -0,0 +1,24 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { CommentRequest } from '@type/comment';
+
+import { createComment } from '@api/comment';
+
+import { QUERY_KEY } from '@constants/queryKey';
+
+export const useCreateComment = (postId: number) => {
+  const queryClient = useQueryClient();
+  const { mutate, isLoading, isError, error } = useMutation(
+    (newComment: CommentRequest) => createComment(postId, newComment),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries([QUERY_KEY.POSTS, postId, QUERY_KEY.COMMENTS]);
+      },
+      onError: error => {
+        window.console.log('createComment error', error);
+      },
+    }
+  );
+
+  return { mutate, isLoading, isError, error };
+};
diff --git a/frontend/src/hooks/query/comment/useDeleteComment.ts b/frontend/src/hooks/query/comment/useDeleteComment.ts
new file mode 100644
index 000000000..b2db07155
--- /dev/null
+++ b/frontend/src/hooks/query/comment/useDeleteComment.ts
@@ -0,0 +1,22 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { deleteComment } from '@api/comment';
+
+import { QUERY_KEY } from '@constants/queryKey';
+
+export const useDeleteComment = (postId: number, commentId: number) => {
+  const queryClient = useQueryClient();
+  const { mutate, isLoading, isError, error } = useMutation(
+    () => deleteComment(postId, commentId),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries([QUERY_KEY.POSTS, postId, QUERY_KEY.COMMENTS]);
+      },
+      onError: error => {
+        window.console.log('editComment error', error);
+      },
+    }
+  );
+
+  return { mutate, isLoading, isError, error };
+};
diff --git a/frontend/src/hooks/query/comment/useEditComment.ts b/frontend/src/hooks/query/comment/useEditComment.ts
new file mode 100644
index 000000000..d2db333d7
--- /dev/null
+++ b/frontend/src/hooks/query/comment/useEditComment.ts
@@ -0,0 +1,24 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { CommentRequest } from '@type/comment';
+
+import { editComment } from '@api/comment';
+
+import { QUERY_KEY } from '@constants/queryKey';
+
+export const useEditComment = (postId: number, commentId: number) => {
+  const queryClient = useQueryClient();
+  const { mutate, isLoading, isError, error } = useMutation(
+    (updatedComment: CommentRequest) => editComment(postId, commentId, updatedComment),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries([QUERY_KEY.POSTS, postId, QUERY_KEY.COMMENTS, commentId]);
+      },
+      onError: error => {
+        window.console.log('editComment error', error);
+      },
+    }
+  );
+
+  return { mutate, isLoading, isError, error };
+};