From 6124ab98319ffccd466cf7dc0f1a410f226ec83f Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 27 May 2024 16:24:59 +0800
Subject: [PATCH] feat: add retry feature for update last read time of comment
 (#5985)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.16.x

#### What this PR does / why we need it:

为更新评论的最后读取时间添加重试机制。Ref https://github.com/halo-dev/halo/pull/5903#issuecomment-2106855779

#### Does this PR introduce a user-facing change?

```release-note
None
```
---
 .../comments/components/CommentListItem.vue   | 46 +++++++++++++------
 1 file changed, 33 insertions(+), 13 deletions(-)

diff --git a/ui/console-src/modules/contents/comments/components/CommentListItem.vue b/ui/console-src/modules/contents/comments/components/CommentListItem.vue
index 9b8c30266..721d28f41 100644
--- a/ui/console-src/modules/contents/comments/components/CommentListItem.vue
+++ b/ui/console-src/modules/contents/comments/components/CommentListItem.vue
@@ -29,7 +29,7 @@ import ReplyListItem from "./ReplyListItem.vue";
 import { apiClient } from "@/utils/api-client";
 import { cloneDeep } from "lodash-es";
 import { usePermission } from "@/utils/permission";
-import { useQuery, useQueryClient } from "@tanstack/vue-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
 import { useI18n } from "vue-i18n";
 import { usePluginModuleStore } from "@/stores/plugin";
 import type {
@@ -163,21 +163,41 @@ const {
   enabled: computed(() => showReplies.value),
 });
 
+const { mutateAsync: updateCommentLastReadTimeMutate } = useMutation({
+  mutationKey: ["update-comment-last-read-time"],
+  mutationFn: async () => {
+    const { data: latestComment } =
+      await apiClient.extension.comment.getContentHaloRunV1alpha1Comment({
+        name: props.comment.comment.metadata.name,
+      });
+
+    if (!latestComment.status?.unreadReplyCount) {
+      return latestComment;
+    }
+
+    latestComment.spec.lastReadTime = new Date().toISOString();
+
+    return apiClient.extension.comment.updateContentHaloRunV1alpha1Comment(
+      {
+        name: latestComment.metadata.name,
+        comment: latestComment,
+      },
+      {
+        mute: true,
+      }
+    );
+  },
+  retry: 3,
+});
+
 const handleToggleShowReplies = async () => {
   showReplies.value = !showReplies.value;
-  if (showReplies.value) {
-    // update last read time
-    if (props.comment.comment.status?.unreadReplyCount) {
-      const commentToUpdate = cloneDeep(props.comment.comment);
-      commentToUpdate.spec.lastReadTime = new Date().toISOString();
-      await apiClient.extension.comment.updateContentHaloRunV1alpha1Comment({
-        name: commentToUpdate.metadata.name,
-        comment: commentToUpdate,
-      });
-    }
-  } else {
-    queryClient.invalidateQueries({ queryKey: ["comments"] });
+
+  if (props.comment.comment.status?.unreadReplyCount) {
+    await updateCommentLastReadTimeMutate();
   }
+
+  queryClient.invalidateQueries({ queryKey: ["comments"] });
 };
 
 const onReplyCreationModalClose = () => {