From cb09e9f08cfed40315c273cc49960e8d2df19984 Mon Sep 17 00:00:00 2001
From: K0IN <19688162+K0IN@users.noreply.github.com>
Date: Mon, 28 Aug 2023 17:31:00 +0200
Subject: [PATCH] Fix badge on ios (#93)

* Fix badge

* Update use-messagereceiver.ts
---
 app/frontend/src/components/messages/messages.tsx | 7 +++++++
 app/frontend/src/hooks/use-messagereceiver.ts     | 1 +
 app/frontend/src/sw.js                            | 3 +++
 3 files changed, 11 insertions(+)

diff --git a/app/frontend/src/components/messages/messages.tsx b/app/frontend/src/components/messages/messages.tsx
index fea09b63..10b75ece 100644
--- a/app/frontend/src/components/messages/messages.tsx
+++ b/app/frontend/src/components/messages/messages.tsx
@@ -4,6 +4,7 @@ import { useLastOpenTime } from '../../hooks/use-lastopen';
 import { useMessageReceiver } from '../../hooks/use-messagereceiver';
 import Message from '../message/message';
 import style from './messages.css';
+import { useEffect } from 'preact/hooks';
 
 const Messages: FunctionalComponent = () => {
     const messages = useMessageReceiver();
@@ -12,6 +13,12 @@ const Messages: FunctionalComponent = () => {
     const newMessages = messages.filter(e => !(e.receivedAt <= lastOpenTime));
     const oldMessages = messages.filter(e => e.receivedAt <= lastOpenTime);
 
+    useEffect(() => {
+        if (navigator && navigator.clearAppBadge) {
+            navigator.clearAppBadge();
+        }
+    }, [messages]);
+
     return (<div class={style.content}>
         <div class={style.main}>
             <ul class={style.messagelist}>
diff --git a/app/frontend/src/hooks/use-messagereceiver.ts b/app/frontend/src/hooks/use-messagereceiver.ts
index 1409dd8b..58b17760 100644
--- a/app/frontend/src/hooks/use-messagereceiver.ts
+++ b/app/frontend/src/hooks/use-messagereceiver.ts
@@ -16,6 +16,7 @@ export const useMessageReceiver = () => {
     useEffect(() => {
         database && database.getAll('messages').then(savedMessages => setMessages(sortMessages(savedMessages))).catch(console.warn);
         database && setAllMessagesAsRead(database as unknown as NotifyDatabase);
+        navigator.clearAppBadge && navigator.clearAppBadge();
     }, [database, setMessages]);
 
     useEffect(() => {
diff --git a/app/frontend/src/sw.js b/app/frontend/src/sw.js
index 8d474d64..e3854357 100644
--- a/app/frontend/src/sw.js
+++ b/app/frontend/src/sw.js
@@ -92,6 +92,9 @@ self.addEventListener('push', (event) => {
 self.addEventListener('notificationclick', (e) => {
     const notification = e.notification;
     const load = async () => {
+        if (navigator && navigator.clearAppBadge) {
+            navigator.clearAppBadge();
+        }
         try {
             const clientList = await clients.matchAll();
             if (clientList.length > 0) {