From 6cbbd0aa1bd7f559453bf3cb388c26d8cae46adb Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 3 Sep 2023 13:41:37 +0800
Subject: [PATCH] More reliable badge clearing

Should be when page visible, not on render

Possibly super effective, but badges can be annoying if not cleared easily.
---
 src/components/notification-service.jsx |  8 ++++++++
 src/pages/notifications.jsx             | 14 +-------------
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/components/notification-service.jsx b/src/components/notification-service.jsx
index f4eb44f1..7de510bf 100644
--- a/src/components/notification-service.jsx
+++ b/src/components/notification-service.jsx
@@ -7,6 +7,7 @@ import {
   getAccountByAccessToken,
   getCurrentAccount,
 } from '../utils/store-utils';
+import usePageVisibility from '../utils/usePageVisibility';
 
 import Icon from './icon';
 import Link from './link';
@@ -104,6 +105,13 @@ export default function NotificationService() {
     };
   }, []);
 
+  usePageVisibility((visible) => {
+    if (visible && navigator?.clearAppBadge) {
+      console.log('🔰 Clear app badge');
+      navigator.clearAppBadge();
+    }
+  });
+
   const onClose = () => {
     setShowNotificationSheet(false);
     states.routeNotification = null;
diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx
index 48d7ce4f..7e3edfbb 100644
--- a/src/pages/notifications.jsx
+++ b/src/pages/notifications.jsx
@@ -2,13 +2,7 @@ import './notifications.css';
 
 import { useIdle } from '@uidotdev/usehooks';
 import { memo } from 'preact/compat';
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'preact/hooks';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { useSearchParams } from 'react-router-dom';
 import { useSnapshot } from 'valtio';
 
@@ -200,12 +194,6 @@ function Notifications({ columnMode }) {
 
   const announcementsListRef = useRef();
 
-  useLayoutEffect(() => {
-    if (navigator.clearAppBadge) {
-      navigator.clearAppBadge();
-    }
-  }, []);
-
   useEffect(() => {
     if (notificationID) {
       states.routeNotification = {