Fix: Infinite Loading State When Notification Permission is Blocked o…

…r granted

src/Components/Notifications/NotificationsList.tsx

@@ -2,7 +2,7 @@ import { navigate } from "raviger";
 import { useEffect, useState } from "react";
 import Spinner from "../Common/Spinner";
 import { NOTIFICATION_EVENTS } from "../../Common/constants";
-import { Error } from "../../Utils/Notifications.js";
+import { Error, Success, Warn } from "../../Utils/Notifications.js";
 import { classNames, formatDateTime } from "../../Utils/utils";
 import CareIcon, { IconName } from "../../CAREUI/icons/CareIcon";
 import * as Sentry from "@sentry/browser";
@@ -194,6 +194,30 @@ export default function NotificationsList({
     if (open) document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [open]);
+  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 {

src/Locale/en/Notifications.json

@@ -4,6 +4,8 @@
   "mark_as_unread": "Mark as Unread",
   "subscribe": "Subscribe",
   "subscribe_on_this_device": "Subscribe on this device",
+  "notification_permission_denied": "Notification permission denied",
+  "notification_permission_granted": "Notification permission granted",
   "show_unread_notifications": "Show Unread",
   "show_all_notifications": "Show All",
   "filter_by_category": "Filter by category",
@@ -19,4 +21,4 @@
   "loading": "Loading...",
   "invalid_asset_id_msg": "Oops! The asset ID you entered does not appear to be valid.",
   "asset_not_found_msg": "Oops! The asset you are looking for does not exist. Please check the asset id."
-}
+}

src/Locale/hi/Notifications.json

@@ -4,6 +4,8 @@
   "mark_as_unread": "अपठित के रूप में चिह्नित करें",
   "subscribe": "सदस्यता लें",
   "subscribe_on_this_device": "इस डिवाइस पर सदस्यता लें",
+  "notification_permission_denied": "सूचना अनुमति नामंजूर",
+  "notification_permission_granted": "सूचना अनुमति प्रदान की गई",
   "show_unread_notifications": "अपठित दिखाएँ",
   "show_all_notifications": "सब दिखाएं",
   "filter_by_category": "श्रेणी के अनुसार फ़िल्टर करें",
@@ -19,4 +21,4 @@
   "loading": "लोड हो रहा है...",
   "invalid_asset_id_msg": "ओह! आपके द्वारा दर्ज की गई संपत्ति आईडी वैध नहीं लगती।",
   "asset_not_found_msg": "ओह! आप जिस संपत्ति की तलाश कर रहे हैं वह मौजूद नहीं है। कृपया संपत्ति आईडी की जाँच करें।"
-}
+}

src/Locale/kn/Notifications.json

@@ -4,6 +4,8 @@
   "mark_as_unread": "ಓದದಿರುವಂತೆ ಗುರುತಿಸಿ",
   "subscribe": "ಚಂದಾದಾರರಾಗಿ",
   "subscribe_on_this_device": "ಈ ಸಾಧನದಲ್ಲಿ ಚಂದಾದಾರರಾಗಿ",
+  "notification_permission_denied": "ಅಧಿಸೂಚನೆ ಅನುಮತಿ ನಿರಾಕರಿಸಲಾಗಿದೆ",
+  "notification_permission_granted": "ಅಧಿಸೂಚನೆ ಅನುಮತಿ ನೀಡಲಾಗಿದೆ",
   "show_unread_notifications": "ಓದದಿರುವುದನ್ನು ತೋರಿಸಿ",
   "show_all_notifications": "ಎಲ್ಲವನ್ನೂ ತೋರಿಸು",
   "filter_by_category": "ವರ್ಗದ ಪ್ರಕಾರ ಫಿಲ್ಟರ್ ಮಾಡಿ",
@@ -19,4 +21,4 @@
   "loading": "ಲೋಡ್ ಆಗುತ್ತಿದೆ...",
   "invalid_asset_id_msg": "ಓಹ್! ನೀವು ನಮೂದಿಸಿದ ಸ್ವತ್ತು ಐಡಿ ಮಾನ್ಯವಾಗಿರುವಂತೆ ತೋರುತ್ತಿಲ್ಲ.",
   "asset_not_found_msg": "ಓಹ್! ನೀವು ಹುಡುಕುತ್ತಿರುವ ಸ್ವತ್ತು ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲ. ದಯವಿಟ್ಟು ಸ್ವತ್ತಿನ ಐಡಿಯನ್ನು ಪರಿಶೀಲಿಸಿ."
-}
+}

src/Locale/ml/Notifications.json

@@ -4,6 +4,8 @@
   "mark_as_unread": "വായിക്കാത്തതായി അടയാളപ്പെടുത്തുക",
   "subscribe": "സബ്സ്ക്രൈബ് ചെയ്യുക",
   "subscribe_on_this_device": "ഈ ഉപകരണത്തിൽ സബ്സ്ക്രൈബ് ചെയ്യുക",
+  "notification_permission_denied": "അറിയിപ്പ് അനുമതി നിഷേധിച്ചു",
+  "notification_permission_granted": "അറിയിപ്പ് അനുമതി നൽകി",
   "show_unread_notifications": "വായിക്കാത്തത് കാണിക്കുക",
   "show_all_notifications": "എല്ലാം കാണിക്കുക",
   "filter_by_category": "വിഭാഗം അനുസരിച്ച് ഫിൽട്ടർ ചെയ്യുക",
@@ -19,4 +21,4 @@
   "loading": "ലോഡ് ചെയ്യുന്നു...",
   "invalid_asset_id_msg": "ശ്ശോ! നിങ്ങൾ നൽകിയ അസറ്റ് ഐഡി സാധുതയുള്ളതായി കാണുന്നില്ല.",
   "asset_not_found_msg": "ശ്ശോ! നിങ്ങൾ അന്വേഷിക്കുന്ന അസറ്റ് നിലവിലില്ല. അസറ്റ് ഐഡി പരിശോധിക്കുക."
-}
+}

src/Locale/ta/Notifications.json

@@ -4,6 +4,8 @@
   "mark_as_unread": "படிக்காதது எனக் குறி",
   "subscribe": "குழுசேர்",
   "subscribe_on_this_device": "இந்தச் சாதனத்தில் குழுசேரவும்",
+  "notification_permission_denied": "அறிவிப்பு அனுமதி நிராகரிக்கப்பட்டது",
+  "notification_permission_granted": "அறிவிப்பு அனுமதி அளிக்கப்பட்டது",
   "show_unread_notifications": "படிக்காததைக் காட்டு",
   "show_all_notifications": "அனைத்தையும் காட்டு",
   "filter_by_category": "வகையின்படி வடிகட்டவும்",
@@ -19,4 +21,4 @@
   "loading": "ஏற்றுகிறது...",
   "invalid_asset_id_msg": "அச்சச்சோ! நீங்கள் உள்ளிட்ட சொத்து ஐடி சரியானதாகத் தெரியவில்லை.",
   "asset_not_found_msg": "அச்சச்சோ! நீங்கள் தேடும் சொத்து இல்லை. சொத்து ஐடியைச் சரிபார்க்கவும்."
-}
+}