From a77756abadc4d32ca5d46f5726dcfe5598b7ea2d Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 30 Mar 2023 16:32:19 +0800
Subject: [PATCH] refactor: use tanstack query to refactor system setting form
 fetching (#3606)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind improvement

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

使用 [TanStack Query](https://github.com/TanStack/query) 重构系统设置表单的逻辑，移除无意义的重复请求。

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

Ref https://github.com/halo-dev/halo/issues/3360

#### Special notes for your reviewer:

测试方式：

1. 测试系统设置的表单加载是否正常，以及保存之后重载配置是否正常。

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

```release-note
None
```
---
 .../modules/system/settings/SystemSetting.vue | 82 ++++++++++++------
 .../settings/layouts/SystemSettingsLayout.vue | 84 +++++++++++--------
 2 files changed, 104 insertions(+), 62 deletions(-)

diff --git a/console/src/modules/system/settings/SystemSetting.vue b/console/src/modules/system/settings/SystemSetting.vue
index a9006965e..2c8249bef 100644
--- a/console/src/modules/system/settings/SystemSetting.vue
+++ b/console/src/modules/system/settings/SystemSetting.vue
@@ -1,58 +1,86 @@
 <script lang="ts" setup>
 // core libs
-import { computed, ref } from "vue";
+import { computed, ref, type Ref, inject } from "vue";
 
 // components
-import { VButton } from "@halo-dev/components";
+import { Toast, VButton } from "@halo-dev/components";
 
 // hooks
-import { useSettingForm } from "@/composables/use-setting-form";
+import { useSettingFormConvert } from "@/composables/use-setting-form";
 import { useRouteParams } from "@vueuse/router";
-import type { FormKitSchemaCondition, FormKitSchemaNode } from "@formkit/core";
 import { useSystemConfigMapStore } from "@/stores/system-configmap";
+import type { ConfigMap, Setting } from "@halo-dev/api-client";
+import { useQuery, useQueryClient } from "@tanstack/vue-query";
+import { apiClient } from "@/utils/api-client";
+import { useI18n } from "vue-i18n";
 
+const SYSTEM_CONFIGMAP_NAME = "system";
+
+const { t } = useI18n();
+const systemConfigMapStore = useSystemConfigMapStore();
+const queryClient = useQueryClient();
+
+const saving = ref(false);
 const group = useRouteParams<string>("group");
+const setting = inject<Ref<Setting | undefined>>("setting", ref());
 
-const {
-  setting,
-  configMapFormData,
-  saving,
-  handleFetchConfigMap,
-  handleFetchSettings,
-  handleSaveConfigMap,
-} = useSettingForm(ref("system"), ref("system"));
-
-const formSchema = computed(() => {
-  if (!setting.value) {
-    return;
-  }
-  return setting.value.spec.forms.find((item) => item.group === group?.value)
-    ?.formSchema as (FormKitSchemaCondition | FormKitSchemaNode)[];
+const { data: configMap, suspense } = useQuery<ConfigMap>({
+  queryKey: ["system-configMap"],
+  queryFn: async () => {
+    const { data } = await apiClient.extension.configMap.getv1alpha1ConfigMap({
+      name: SYSTEM_CONFIGMAP_NAME,
+    });
+    return data;
+  },
+  refetchOnWindowFocus: false,
+  enabled: computed(() => !!setting.value),
 });
 
-const systemConfigMapStore = useSystemConfigMapStore();
+const { configMapFormData, formSchema, convertToSave } = useSettingFormConvert(
+  setting,
+  configMap,
+  group
+);
 
-const handleSave = async () => {
-  await handleSaveConfigMap();
-  await systemConfigMapStore.fetchSystemConfigMap();
+const handleSaveConfigMap = async () => {
+  saving.value = true;
+
+  const configMapToUpdate = convertToSave();
+
+  if (!configMapToUpdate) {
+    saving.value = false;
+    return;
+  }
+
+  const { data } = await apiClient.extension.configMap.updatev1alpha1ConfigMap({
+    name: SYSTEM_CONFIGMAP_NAME,
+    configMap: configMapToUpdate,
+  });
+
+  Toast.success(t("core.common.toast.save_success"));
+
+  queryClient.invalidateQueries({ queryKey: ["system-configMap"] });
+
+  systemConfigMapStore.configMap = data;
+
+  saving.value = false;
 };
 
-await handleFetchSettings();
-await handleFetchConfigMap();
+await suspense();
 </script>
 <template>
   <Transition mode="out-in" name="fade">
     <div class="bg-white p-4">
       <div>
         <FormKit
-          v-if="group && formSchema && configMapFormData"
+          v-if="group && formSchema && configMapFormData?.[group]"
           :id="group"
           v-model="configMapFormData[group]"
           :name="group"
           :actions="false"
           :preserve="true"
           type="form"
-          @submit="handleSave"
+          @submit="handleSaveConfigMap"
         >
           <FormKitSchema
             :schema="formSchema"
diff --git a/console/src/modules/system/settings/layouts/SystemSettingsLayout.vue b/console/src/modules/system/settings/layouts/SystemSettingsLayout.vue
index 917dbd715..66e8c423d 100644
--- a/console/src/modules/system/settings/layouts/SystemSettingsLayout.vue
+++ b/console/src/modules/system/settings/layouts/SystemSettingsLayout.vue
@@ -1,12 +1,10 @@
 <script lang="ts" setup>
 // core libs
-import { nextTick, onMounted } from "vue";
-import { ref, watch } from "vue";
+import { nextTick, ref, watch, type Ref, provide } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
 // types
 import BasicLayout from "@/layouts/BasicLayout.vue";
-import { useSettingForm } from "@/composables/use-setting-form";
 
 // components
 import {
@@ -16,7 +14,12 @@ import {
   IconSettings,
   VLoading,
 } from "@halo-dev/components";
-import type { SettingForm } from "@halo-dev/api-client";
+import type { Setting, SettingForm } from "@halo-dev/api-client";
+import { useQuery } from "@tanstack/vue-query";
+import { apiClient } from "@/utils/api-client";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 interface SettingTab {
   id: string;
@@ -27,17 +30,52 @@ interface SettingTab {
   };
 }
 
-const tabs = ref<SettingTab[]>([] as SettingTab[]);
-const activeTab = ref("");
-
-const { setting, handleFetchSettings } = useSettingForm(
-  ref("system"),
-  ref("system")
-);
+const tabs = ref<SettingTab[]>([
+  {
+    id: "loading",
+    label: t("core.common.status.loading"),
+    route: { name: "SystemSetting" },
+  },
+]);
+const activeTab = ref(tabs.value[0].id);
 
 const route = useRoute();
 const router = useRouter();
 
+const { data: setting } = useQuery({
+  queryKey: ["system-setting"],
+  queryFn: async () => {
+    const { data } = await apiClient.extension.setting.getv1alpha1Setting({
+      name: "system",
+    });
+    return data;
+  },
+  refetchOnWindowFocus: false,
+  async onSuccess(data) {
+    if (data) {
+      const { forms } = data.spec;
+      tabs.value = forms.map((item: SettingForm) => {
+        return {
+          id: item.group,
+          label: item.label || "",
+          route: {
+            name: "SystemSetting",
+            params: {
+              group: item.group,
+            },
+          },
+        };
+      });
+    }
+
+    await nextTick();
+
+    handleTriggerTabChange();
+  },
+});
+
+provide<Ref<Setting | undefined>>("setting", setting);
+
 const handleTabChange = (id: string) => {
   const tab = tabs.value.find((item) => item.id === id);
   if (tab) {
@@ -46,30 +84,6 @@ const handleTabChange = (id: string) => {
   }
 };
 
-onMounted(async () => {
-  await handleFetchSettings();
-
-  if (setting.value) {
-    const { forms } = setting.value.spec;
-    tabs.value = forms.map((item: SettingForm) => {
-      return {
-        id: item.group,
-        label: item.label || "",
-        route: {
-          name: "SystemSetting",
-          params: {
-            group: item.group,
-          },
-        },
-      };
-    });
-  }
-
-  await nextTick();
-
-  handleTriggerTabChange();
-});
-
 const handleTriggerTabChange = () => {
   const tab = tabs.value.find((tab) => {
     return (