Merge pull request #3351 from gradido/monterail_vue3_migration_fix-newsletter

fix(frontend): fix newsletter state reactivity

frontend/src/components/UserSettings/UserNewsletter.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="formusernewsletter">
     <BFormCheckbox
-      :model-value="newsletterState"
+      :model-value="localNewsletterState"
       test="BFormCheckbox"
       name="check-button"
       switch
-      @change="onSubmit"
-      @update:modelValue="newsletterState = $event"
+      @update:modelValue="localNewsletterState = $event"
     />
   </div>
 </template>
+
 <script setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useStore } from 'vuex'
 import { subscribeNewsletter, unsubscribeNewsletter } from '@/graphql/mutations'
 import { useMutation } from '@vue/apollo-composable'
@@ -21,28 +21,44 @@ import { useI18n } from 'vue-i18n'
 
 const { toastSuccess, toastError } = useAppToast()
 const store = useStore()
-const state = store.state
-
 const { t } = useI18n()
 
-const newsletterState = ref(state.newsletterState)
+const localNewsletterState = ref(store.state.newsletterState)
 
 const { mutate: newsletterSubscribe } = useMutation(subscribeNewsletter)
 const { mutate: newsletterUnsubscribe } = useMutation(unsubscribeNewsletter)
 
+watch(localNewsletterState, async (newValue, oldValue) => {
+  if (newValue !== oldValue) {
+    await onSubmit()
+  }
+})
+
 const onSubmit = async () => {
   try {
-    newsletterState.value ? newsletterSubscribe() : newsletterUnsubscribe()
+    if (localNewsletterState.value) {
+      await newsletterSubscribe()
+    } else {
+      await newsletterUnsubscribe()
+    }
+
+    store.commit('setNewsletterState', localNewsletterState.value)
 
-    store.commit('newsletterState', newsletterState.value)
     toastSuccess(
-      newsletterState.value
+      localNewsletterState.value
         ? t('settings.newsletter.newsletterTrue')
         : t('settings.newsletter.newsletterFalse'),
     )
   } catch (error) {
-    newsletterState.value = state.newsletterState
+    localNewsletterState.value = store.state.newsletterState
     toastError(error.message)
   }
 }
+
+watch(
+  () => store.state.newsletterState,
+  (newState) => {
+    localNewsletterState.value = newState
+  },
+)
 </script>