Rewrite WebPush enable handler to properly catch errors

Retrospring · Oct 14, 2023 · 9e35c03 · 9e35c03
1 parent 887fd7e
commit 9e35c03
Showing 1 changed file with 36 additions and 35 deletions.
diff --git a/app/javascript/retrospring/features/webpush/enable.ts b/app/javascript/retrospring/features/webpush/enable.ts
@@ -3,52 +3,53 @@ import I18n from "retrospring/i18n";
 import { showNotification } from "utilities/notifications";
 import { Buffer } from "buffer";
 
-export function enableHandler (event: Event): void {
+export async function enableHandler (event: Event): Promise<void> {
   event.preventDefault();
   const sender = event.target as HTMLButtonElement;
 
   try {
-    getServiceWorker()
-      .then(subscribe)
-      .then(async subscription => {
-        return Notification.requestPermission().then(permission => {
-          if (permission != "granted") {
-            return;
-          }
+    const registration = await getServiceWorker();
+    const subscription = await subscribe(registration);
+    const permission = await Notification.requestPermission();
 
-          post('/ajax/webpush', {
-            body: {
-              subscription
-            },
-            contentType: 'application/json'
-          }).then(async response => {
-            const data = await response.json;
+    if (permission != "granted") {
+      return;
+    }
+
+    const response = await post('/ajax/webpush', {
+      body: {
+        subscription
+      },
+      contentType: 'application/json'
+    });
 
-            if (data.success) {
-              new Notification(I18n.translate("frontend.push_notifications.subscribe.success.title"), {
-                body: I18n.translate("frontend.push_notifications.subscribe.success.body")
-              });
+    const data = await response.json;
+
+    if (data.success) {
+      new Notification(I18n.translate("frontend.push_notifications.subscribe.success.title"), {
+        body: I18n.translate("frontend.push_notifications.subscribe.success.body")
+      });
 
-              document.querySelectorAll<HTMLButtonElement>('button[data-action="push-disable"], button[data-action="push-remove-all"]')
-                .forEach(button => button.classList.remove('d-none'));
+      document.querySelectorAll<HTMLButtonElement>('button[data-action="push-disable"], button[data-action="push-remove-all"]')
+        .forEach(button => button.classList.remove('d-none'));
 
-              sender.classList.add('d-none');
-              document.querySelector<HTMLDivElement>('.push-settings')?.classList.add('d-none');
-              localStorage.setItem('dismiss-push-settings-prompt', 'true');
+      sender.classList.add('d-none');
+      document.querySelector<HTMLDivElement>('.push-settings')?.classList.add('d-none');
+      localStorage.setItem('dismiss-push-settings-prompt', 'true');
 
-              document.getElementById('subscription-count').textContent = data.message;
-            } else {
-              new Notification(I18n.translate("frontend.push_notifications.fail.title"), {
-                body: I18n.translate("frontend.push_notifications.fail.body")
-              });
-            }
-          });
-        });
+      const subscriptionCountElement = document.getElementById('subscription-count');
+      if (subscriptionCountElement != null) {
+        subscriptionCountElement.textContent = data.message;
+      }
+    } else {
+      new Notification(I18n.translate("frontend.push_notifications.fail.title"), {
+        body: I18n.translate("frontend.push_notifications.fail.body")
       });
-    } catch (error) {
-      console.error("Failed to set up push notifications", error);
-      showNotification(I18n.translate("frontend.push_notifications.setup_fail"));
     }
+  } catch (error) {
+    console.error("Failed to set up push notifications", error);
+    showNotification(I18n.translate("frontend.push_notifications.setup_fail"), false);
+  }
 }
 
 async function getServiceWorker(): Promise<ServiceWorkerRegistration> {