From e8ca93396fa6864b8962261064dc5a0601ab3f22 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 3 Jan 2025 17:46:10 +0800
Subject: [PATCH] feat: add retry mechanism for publishing posts on the UC end
 (#7171)
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.20.x

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

为 UC 端发布文章的操作添加重试机制，防止出现因为锁导致的保存失败问题。

#### Which issue(s) this PR fixes:

Fixes #7139

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

```release-note
为 UC 端发布文章的操作添加重试机制，防止出现因为锁导致的保存失败问题。
```
---
 .../posts/components/PostCreationModal.vue    |  9 +++++----
 .../posts/components/PostListItem.vue         | 15 ++++++++++-----
 .../composables/use-post-publish-mutate.ts    | 19 +++++++++++++++++++
 3 files changed, 34 insertions(+), 9 deletions(-)
 create mode 100644 ui/uc-src/modules/contents/posts/composables/use-post-publish-mutate.ts

diff --git a/ui/uc-src/modules/contents/posts/components/PostCreationModal.vue b/ui/uc-src/modules/contents/posts/components/PostCreationModal.vue
index e3e834338f..9cbe13096a 100644
--- a/ui/uc-src/modules/contents/posts/components/PostCreationModal.vue
+++ b/ui/uc-src/modules/contents/posts/components/PostCreationModal.vue
@@ -7,6 +7,7 @@ import { Toast, VButton, VModal, VSpace } from "@halo-dev/components";
 import { useMutation } from "@tanstack/vue-query";
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
+import { usePostPublishMutate } from "../composables/use-post-publish-mutate";
 import type { PostFormState } from "../types";
 import PostSettingForm from "./PostSettingForm.vue";
 
@@ -31,6 +32,8 @@ const emit = defineEmits<{
 
 const modal = ref<InstanceType<typeof VModal> | null>(null);
 
+const { mutateAsync: postPublishMutate } = usePostPublishMutate();
+
 const { mutate, isLoading } = useMutation({
   mutationKey: ["uc:create-post"],
   mutationFn: async ({ data }: { data: PostFormState }) => {
@@ -55,7 +58,7 @@ const { mutate, isLoading } = useMutation({
         htmlMetas: [],
         pinned: data.pinned,
         priority: 0,
-        publish: false,
+        publish: props.publish,
         publishTime: data.publishTime,
         slug: data.slug,
         tags: data.tags,
@@ -69,9 +72,7 @@ const { mutate, isLoading } = useMutation({
     });
 
     if (props.publish) {
-      await ucApiClient.content.post.publishMyPost({
-        name: post.metadata.name,
-      });
+      await postPublishMutate({ name: post.metadata.name });
     }
 
     return createdPost;
diff --git a/ui/uc-src/modules/contents/posts/components/PostListItem.vue b/ui/uc-src/modules/contents/posts/components/PostListItem.vue
index b61c6b2ff7..88b074f644 100644
--- a/ui/uc-src/modules/contents/posts/components/PostListItem.vue
+++ b/ui/uc-src/modules/contents/posts/components/PostListItem.vue
@@ -24,6 +24,7 @@ import {
 import { useQueryClient } from "@tanstack/vue-query";
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
+import { usePostPublishMutate } from "../composables/use-post-publish-mutate";
 
 const { t } = useI18n();
 const queryClient = useQueryClient();
@@ -67,13 +68,17 @@ const isPublishing = computed(() => {
   );
 });
 
+const { mutateAsync: postPublishMutate } = usePostPublishMutate();
+
 async function handlePublish() {
-  await ucApiClient.content.post.publishMyPost({
-    name: props.post.post.metadata.name,
-  });
+  try {
+    await postPublishMutate({ name: props.post.post.metadata.name });
 
-  Toast.success(t("core.common.toast.publish_success"));
-  queryClient.invalidateQueries({ queryKey: ["my-posts"] });
+    Toast.success(t("core.common.toast.publish_success"));
+    queryClient.invalidateQueries({ queryKey: ["my-posts"] });
+  } catch (_) {
+    Toast.error(t("core.common.toast.publish_failed_and_retry"));
+  }
 }
 
 function handleUnpublish() {
diff --git a/ui/uc-src/modules/contents/posts/composables/use-post-publish-mutate.ts b/ui/uc-src/modules/contents/posts/composables/use-post-publish-mutate.ts
new file mode 100644
index 0000000000..699f5a1d9f
--- /dev/null
+++ b/ui/uc-src/modules/contents/posts/composables/use-post-publish-mutate.ts
@@ -0,0 +1,19 @@
+import { ucApiClient } from "@halo-dev/api-client";
+import { useMutation } from "@tanstack/vue-query";
+
+export function usePostPublishMutate() {
+  return useMutation({
+    mutationKey: ["uc:publish-post"],
+    mutationFn: async ({ name }: { name: string }) => {
+      return await ucApiClient.content.post.publishMyPost(
+        {
+          name: name,
+        },
+        {
+          mute: true,
+        }
+      );
+    },
+    retry: 3,
+  });
+}