From ad79d5d766ea3c9a6b277c34b8cb5e4394c6f5db Mon Sep 17 00:00:00 2001
From: Satont <satontworldwide@gmail.com>
Date: Sun, 26 May 2024 02:35:14 +0300
Subject: [PATCH] fix(dashboard): yse `ignoreUpdates` for chat alerts autosave

fixes #735
---
 frontend/dashboard/src/api/chat-alerts.ts     |  7 +--
 .../chat-alerts/components/settings.vue       |  6 +-
 .../chat-alerts/composables/use-form.ts       | 58 +++++++++----------
 3 files changed, 32 insertions(+), 39 deletions(-)

diff --git a/frontend/dashboard/src/api/chat-alerts.ts b/frontend/dashboard/src/api/chat-alerts.ts
index 85b97462b..2c1c3545e 100644
--- a/frontend/dashboard/src/api/chat-alerts.ts
+++ b/frontend/dashboard/src/api/chat-alerts.ts
@@ -1,6 +1,5 @@
 import { useQuery } from '@urql/vue'
 import { createGlobalState } from '@vueuse/core'
-import { computed } from 'vue'
 
 import type { GetAllChatAlertsQuery } from '@/gql/graphql.js'
 
@@ -12,7 +11,7 @@ export type ChatAlerts = GetAllChatAlertsQuery['chatAlerts']
 const invalidationKey = 'ChatAlertsInvalidateKey'
 
 export const useChatAlertsApi = createGlobalState(() => {
-	const { data } = useQuery({
+	const useChatAlertsQuery = () => useQuery({
 		variables: {},
 		context: { additionalTypenames: [invalidationKey] },
 		query: graphql(`
@@ -127,8 +126,6 @@ export const useChatAlertsApi = createGlobalState(() => {
 		`),
 	})
 
-	const chatAlerts = computed<ChatAlerts>(() => data.value?.chatAlerts)
-
 	const useMutationUpdateChatAlerts = () => useMutation(graphql(`
 		mutation UpdateChatAlerts($input: ChatAlertsInput!) {
 			updateChatAlerts(input: $input) {
@@ -138,7 +135,7 @@ export const useChatAlertsApi = createGlobalState(() => {
 	`), [invalidationKey])
 
 	return {
-		chatAlerts,
+		useChatAlertsQuery,
 		useMutationUpdateChatAlerts,
 	}
 })
diff --git a/frontend/dashboard/src/features/chat-alerts/components/settings.vue b/frontend/dashboard/src/features/chat-alerts/components/settings.vue
index 66af86c1b..55c4a54f2 100644
--- a/frontend/dashboard/src/features/chat-alerts/components/settings.vue
+++ b/frontend/dashboard/src/features/chat-alerts/components/settings.vue
@@ -32,13 +32,13 @@ defineSlots<{
 	additionalSettings: VNode
 }>()
 
-const { formValue, formInited, formRef } = useForm()
+const { formValue, formRef } = useForm()
 const hasAccessToManageAlerts = useUserAccessFlagChecker(ChannelRolePermissionEnum.ManageAlerts)
 
-watch(formInited, (v) => {
+watch(formValue, (v) => {
 	if (!v) return
 
-	if (!formValue?.value?.[props.formKey]?.messages.length) {
+	if (!v[props.formKey]?.messages.length) {
 		createMessage()
 	}
 }, { immediate: true })
diff --git a/frontend/dashboard/src/features/chat-alerts/composables/use-form.ts b/frontend/dashboard/src/features/chat-alerts/composables/use-form.ts
index 5ab52b409..91c6b2af4 100644
--- a/frontend/dashboard/src/features/chat-alerts/composables/use-form.ts
+++ b/frontend/dashboard/src/features/chat-alerts/composables/use-form.ts
@@ -1,4 +1,4 @@
-import { createGlobalState, useDebounceFn, watchDebounced } from '@vueuse/core'
+import { createGlobalState, useDebounceFn, watchIgnorable } from '@vueuse/core'
 import { useNotification } from 'naive-ui'
 import { ref, toRaw, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -17,7 +17,8 @@ export const useForm = createGlobalState(() => {
 	const { t } = useI18n()
 	const formRef = ref<HTMLFormElement>()
 
-	const { chatAlerts, useMutationUpdateChatAlerts } = useChatAlertsApi()
+	const { useChatAlertsQuery, useMutationUpdateChatAlerts } = useChatAlertsApi()
+	const { data } = useChatAlertsQuery()
 	const updateChatAlerts = useMutationUpdateChatAlerts()
 
 	const formValue = ref<Form>({
@@ -94,33 +95,6 @@ export const useForm = createGlobalState(() => {
 		},
 	})
 
-	const formInited = ref(false)
-
-	watch(chatAlerts, (v) => {
-		if (!v || formInited.value) return
-		formInited.value = false
-
-		for (const key of Object.keys(formValue.value) as FormKey[]) {
-			if (!v[key]) continue
-			// eslint-disable-next-line ts/ban-ts-comment
-			// @ts-expect-error
-			formValue.value[key] = v[key]
-		}
-
-		formInited.value = true
-	}, { immediate: true })
-
-	watchDebounced(formValue, () => {
-		if (!formInited.value) {
-			return
-		}
-
-		if (!formRef.value) return
-		if (!formRef.value?.reportValidity()) return
-
-		save()
-	}, { deep: true, debounce: 500 })
-
 	async function save() {
 		const input = toRaw(formValue.value)
 		if (!input) return
@@ -135,11 +109,33 @@ export const useForm = createGlobalState(() => {
 		}
 	}
 
-	const debouncedSave = useDebounceFn(save, 500)
+	const debouncedSave = useDebounceFn(save, 1000)
+
+	const { ignoreUpdates } = watchIgnorable(
+		formValue,
+		() => {
+			if (!formRef.value) return
+			if (!formRef.value?.reportValidity()) return
+
+			debouncedSave()
+		},
+		{ deep: true, immediate: true },
+	)
+
+	watch(data, (v) => {
+		ignoreUpdates(() => {
+			if (!v?.chatAlerts) return
+			for (const key of Object.keys(formValue.value) as FormKey[]) {
+				if (!v.chatAlerts[key]) continue
+				// eslint-disable-next-line ts/ban-ts-comment
+				// @ts-expect-error
+				formValue.value[key] = v.chatAlerts[key]
+			}
+		})
+	}, { immediate: true })
 
 	return {
 		formValue,
-		formInited,
 		save: debouncedSave,
 		formRef,
 	}