Fix Notification Subscription Loading and Messaging Errors (#9038)

ohcnetwork · Nov 12, 2024 · 899196e · 899196e
1 parent c391c89
commit 899196e
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 57 deletions.
diff --git a/public/locale/en.json b/public/locale/en.json
@@ -915,6 +915,7 @@
   "notes": "Notes",
   "notes_placeholder": "Type your Notes",
   "notice_board": "Notice Board",
+  "notification_cancelled": "Notification cancelled",
   "notification_permission_denied": "Notification permission denied",
   "notification_permission_granted": "Notification permission granted",
   "number_of_aged_dependents": "Number of Aged Dependents (Above 60)",
@@ -1191,7 +1192,9 @@
   "submitting": "Submitting",
   "subscribe": "Subscribe",
   "subscribe_on_this_device": "Subscribe on this device",
+  "subscribed_successfully": "Subscribed Successfully",
   "subscription_error": "Subscription Error",
+  "subscription_failed": "Subscription Failed",
   "suggested_investigations": "Suggested Investigations",
   "summary": "Summary",
   "support": "Support",
@@ -1235,6 +1238,7 @@
   "unlink_camera_and_bed": "Unlink this bed from this camera",
   "unsubscribe": "Unsubscribe",
   "unsubscribe_failed": "Unsubscribe failed.",
+  "unsubscribed_successfully": "Unsubscribed Successfully.",
   "unsupported_browser": "Unsupported Browser",
   "unsupported_browser_description": "Your browser ({{name}} version {{version}}) is not supported. Please update your browser to the latest version or switch to a supported browser for the best experience.",
   "up": "Up",

diff --git a/src/components/Notifications/NotificationsList.tsx b/src/components/Notifications/NotificationsList.tsx
@@ -222,30 +222,6 @@ export default function NotificationsList({
       }
     };
   }, [data, totalCount]);
-  useEffect(() => {
-    let intervalId: ReturnType<typeof setTimeout>;
-    if (isSubscribing) {
-      const checkNotificationPermission = () => {
-        if (Notification.permission === "denied") {
-          Warn({
-            msg: t("notification_permission_denied"),
-          });
-          setIsSubscribing(false);
-          clearInterval(intervalId);
-        } else if (Notification.permission === "granted") {
-          Success({
-            msg: t("notification_permission_granted"),
-          });
-          setIsSubscribing(false);
-          clearInterval(intervalId);
-        }
-      };
-
-      checkNotificationPermission();
-      intervalId = setInterval(checkNotificationPermission, 1000);
-    }
-    return () => clearInterval(intervalId);
-  }, [isSubscribing]);
 
   const intialSubscriptionState = async () => {
     try {
@@ -269,7 +245,14 @@ export default function NotificationsList({
   const handleSubscribeClick = () => {
     const status = isSubscribed;
     if (status === "NotSubscribed" || status === "SubscribedOnAnotherDevice") {
-      subscribe();
+      if (Notification.permission === "denied") {
+        Warn({
+          msg: t("notification_permission_denied"),
+        });
+        setIsSubscribing(false);
+      } else {
+        subscribe();
+      }
     } else {
       unsubscribe();
     }
@@ -324,6 +307,10 @@ export default function NotificationsList({
                   body: data,
                 });
 
+                Warn({
+                  msg: t("unsubscribed_successfully"),
+                });
+
                 setIsSubscribed("NotSubscribed");
                 setIsSubscribing(false);
               })
@@ -344,43 +331,67 @@ export default function NotificationsList({
 
   async function subscribe() {
     setIsSubscribing(true);
-    const response = await request(routes.getPublicKey);
-    const public_key = response.data?.public_key;
-    const sw = await navigator.serviceWorker.ready;
-    const push = await sw.pushManager.subscribe({
-      userVisibleOnly: true,
-      applicationServerKey: public_key,
-    });
-    const p256dh = btoa(
-      String.fromCharCode.apply(
-        null,
-        new Uint8Array(push.getKey("p256dh") as any) as any,
-      ),
-    );
-    const auth = btoa(
-      String.fromCharCode.apply(
-        null,
-        new Uint8Array(push.getKey("auth") as any) as any,
-      ),
-    );
+    try {
+      const response = await request(routes.getPublicKey);
+      const public_key = response.data?.public_key;
+      const sw = await navigator.serviceWorker.ready;
+      const push = await sw.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: public_key,
+      });
+      const p256dh = btoa(
+        String.fromCharCode.apply(
+          null,
+          new Uint8Array(push.getKey("p256dh") as any) as any,
+        ),
+      );
+      const auth = btoa(
+        String.fromCharCode.apply(
+          null,
+          new Uint8Array(push.getKey("auth") as any) as any,
+        ),
+      );
 
-    const data = {
-      pf_endpoint: push.endpoint,
-      pf_p256dh: p256dh,
-      pf_auth: auth,
-    };
+      const data = {
+        pf_endpoint: push.endpoint,
+        pf_p256dh: p256dh,
+        pf_auth: auth,
+      };
 
-    const { res } = await request(routes.updateUserPnconfig, {
-      pathParams: { username: username },
-      body: data,
-    });
+      const { res } = await request(routes.updateUserPnconfig, {
+        pathParams: { username: username },
+        body: data,
+      });
 
-    if (res?.ok) {
-      setIsSubscribed("SubscribedOnThisDevice");
+      if (res?.ok) {
+        setIsSubscribed("SubscribedOnThisDevice");
+        Success({
+          msg: t("subscribed_successfully"),
+        });
+        setIsSubscribing(false);
+      } else {
+        Error({
+          msg: t("subscription_failed"),
+        });
+        setIsSubscribing(false);
+      }
+    } catch (error) {
+      const permission = Notification.permission;
+
+      if (permission === "denied" || permission === "default") {
+        Warn({
+          msg: t("notification_permission_denied"),
+        });
+        setIsSubscribing(false);
+        return;
+      }
+      Error({
+        msg: t("subscription_failed"),
+      });
+    } finally {
+      setIsSubscribing(false);
     }
-    setIsSubscribing(false);
   }
-
   const handleMarkAllAsRead = async () => {
     setIsMarkingAllAsRead(true);
     await Promise.all(