From eb03dc1d05276d61af7810aca4207eb50baaf40d Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Wed, 6 Mar 2024 14:56:32 +0300
Subject: [PATCH] Add delete function to Comment component

The Comment component has been updated to include a delete function which removes the selected comment from the displayed list in real time. This update enhances user experience by providing instant feedback when a comment is deleted. Additionally, debug logging was added to authorFollows function for testing purposes.
---
 src/components/Article/Comment/Comment.tsx |  8 +++++++-
 src/components/Views/Author/Author.tsx     | 17 +++++++++++++----
 src/graphql/client/core.ts                 |  1 +
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/Article/Comment/Comment.tsx b/src/components/Article/Comment/Comment.tsx
index 445d4944..316f0fa2 100644
--- a/src/components/Article/Comment/Comment.tsx
+++ b/src/components/Article/Comment/Comment.tsx
@@ -30,6 +30,7 @@ type Props = {
   showArticleLink?: boolean
   clickedReply?: (id: number) => void
   clickedReplyId?: number
+  onDelete?: (id: number) => void
 }
 
 export const Comment = (props: Props) => {
@@ -64,9 +65,14 @@ export const Comment = (props: Props) => {
 
         if (isConfirmed) {
           await deleteReaction(props.comment.id)
-
+          // TODO: Учесть то что deleteReaction может вернуть error
+          if (props.onDelete) {
+            props.onDelete(props.comment.id)
+          }
           await showSnackbar({ body: t('Comment successfully deleted') })
         }
+
+
       } catch (error) {
         console.error('[deleteReaction]', error)
       }
diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx
index 1649d92c..b519ca28 100644
--- a/src/components/Views/Author/Author.tsx
+++ b/src/components/Views/Author/Author.tsx
@@ -127,9 +127,8 @@ export const AuthorView = (props: Props) => {
   }
 
   createEffect(() => {
-    const a = author()
-    if (a) {
-      fetchComments(a)
+    if (author()) {
+      fetchComments(author())
     }
   })
 
@@ -139,6 +138,9 @@ export const AuthorView = (props: Props) => {
       : getImageUrl('production/image/logo_image.png'),
   )
   const description = createMemo(() => getDescription(author()?.bio))
+  const handleDeleteComment = (id: number) => {
+    setCommented((prev) => prev.filter((comment) => comment.id !== id));
+  }
 
   return (
     <div class={styles.authorPage}>
@@ -233,7 +235,14 @@ export const AuthorView = (props: Props) => {
               <div class="col-md-20 col-lg-18">
                 <ul class={stylesArticle.comments}>
                   <For each={commented()?.sort(byCreated).reverse()}>
-                    {(comment) => <Comment comment={comment} class={styles.comment} showArticleLink />}
+                    {(comment) =>
+                      <Comment
+                        comment={comment}
+                        class={styles.comment}
+                        showArticleLink={true}
+                        onDelete={(id) => handleDeleteComment(id)}
+                      />
+                    }
                   </For>
                 </ul>
               </div>
diff --git a/src/graphql/client/core.ts b/src/graphql/client/core.ts
index d9fef87a..b46cdc27 100644
--- a/src/graphql/client/core.ts
+++ b/src/graphql/client/core.ts
@@ -135,6 +135,7 @@ export const apiClient = {
     user?: string
   }): Promise<AuthorFollows> => {
     const response = await publicGraphQLClient.query(authorFollows, params).toPromise()
+    console.log("!!! response:", response);
     return response.data.get_author_follows
   },