Improved: changing the state of notification preference toggle only i…

…f api success (#405)
hotwax · Jun 27, 2024 · 20a7e70 · 20a7e70
1 parent 20efc65
commit 20a7e70
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/src/store/modules/user/actions.ts b/src/store/modules/user/actions.ts
@@ -323,6 +323,10 @@ const actions: ActionTree<UserState, RootState> = {
     }
   },
 
+  async updateNotificationPreferences({ commit }, payload) {
+      commit(types.USER_NOTIFICATIONS_PREFERENCES_UPDATED, payload)
+  },
+
   async storeClientRegistrationToken({ commit }, registrationToken) {
     const firebaseDeviceId = generateDeviceId()
     commit(types.USER_FIREBASE_DEVICEID_UPDATED, firebaseDeviceId)

diff --git a/src/views/Settings.vue b/src/views/Settings.vue
@@ -425,9 +425,14 @@ export default defineComponent({
         // and updating the toggle). But it returns the updated value on further references (if passed
         // as a parameter in other function, here in our case, passed from confirmNotificationPrefUpdate)
         // Hence, event.target.checked here holds the updated value (value after the toggle action)
-        event.target.checked
-          ? await subscribeTopic(topicName, process.env.VUE_APP_NOTIF_APP_ID)
-          : await unsubscribeTopic(topicName, process.env.VUE_APP_NOTIF_APP_ID)
+        const notificationPref = this.notificationPrefs.find((pref: any) => pref.enumId === enumId)
+
+        notificationPref.isEnabled
+          ? await unsubscribeTopic(topicName, process.env.VUE_APP_NOTIF_APP_ID)
+          : await subscribeTopic(topicName, process.env.VUE_APP_NOTIF_APP_ID)
+
+        notificationPref.isEnabled = !notificationPref.isEnabled
+        await this.store.dispatch('user/updateNotificationPreferences', this.notificationPrefs)
         showToast(translate('Notification preferences updated.'))
       } catch (error) {
         // reverting the value of toggle as event.target.checked is 
@@ -439,23 +444,23 @@ export default defineComponent({
       }
     },
     async confirmNotificationPrefUpdate(enumId: string, event: any) {
+      // To stop event bubbling when clicking on the toggle
+      event.preventDefault()
+      event.stopImmediatePropagation();
+
       const message = translate("Are you sure you want to update the notification preferences?");
       const alert = await alertController.create({
         header: translate("Update notification preferences"),
         message,
         buttons: [
           {
             text: translate("Cancel"),
-            handler: () => {
-              // reverting the value of toggle as event.target.checked is 
-              // updated on click event and revert is needed on "Cancel"
-              event.target.checked = !event.target.checked
-            }
+            role: "cancel"
           },
           {
             text: translate("Confirm"),
             handler: async () => {
-              // passing event reference for updation in case the API fails
+              // passing event reference for updation in case the API success
               alertController.dismiss()
               await this.updateNotificationPref(enumId, event)
             }