From d6df0b1d43dc524b516e495d95a90344af969c69 Mon Sep 17 00:00:00 2001
From: valentinkolb <valentin.kolb@uni-ulm.de>
Date: Wed, 12 Jun 2024 00:13:03 +0200
Subject: [PATCH] feat(chat): added desktop notifications

---
 public/stuve-logo.png                     | Bin 0 -> 1673 bytes
 src/pages/chat/components/ChatNavIcon.tsx |  73 +++++++++++++++++-----
 2 files changed, 56 insertions(+), 17 deletions(-)
 create mode 100644 public/stuve-logo.png

diff --git a/public/stuve-logo.png b/public/stuve-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..d6925bb0f5f73b8e1630a0cefb11a342b008c739
GIT binary patch
literal 1673
zcmb7FX;c$u6dgom5tPM>b%A6iEH(lf*$WCbNWvlriUKMgAS~`1h_W<-3t0#u0TC^V
z3lxDuU8|yk2pWzGB47bYLV?UAKp<dH_H-s{|98%tZ@%~5z3<-doS8F>fX!a|y32F{
z0MMsW$bslH3cIy6(bdb977YM%3Ilw%dZH<yQUP=oP^xmLtJdYKi1aoB?<0;bUcu>I
zMu&;H{g#XY0#6QR4B@iGrsw}b>lSPn&y^7veNd(Z%z$y{5du>Nae6^!FP<U6v0*a?
z46&pjM~Y|l;xqej%sxV<gusL$HViUgkd5Fnr399mj*eo&I3@xy5RAf-;Mo$034=@o
zWFdH#gus$uEEL8@@F<KW0a;&D7(!Dv0y0qwj8_*i78`+>5(rJzp{8IJbTWvJWnpqC
z7@Y~RFfgWw)-jg4i*B&GT18#KFsLPT8cM{vYCqWUZ!oo%1a<hI=vV1)2EHQE6+H#E
z{~D++=Hz>-HuJrUo#lT9DotR+=4{v^6Sm|aR$0hTTx2yDvB{R&@}z6|Qioir!v&dB
zp3M28%<YoQ{c=CKpx?8g-}~Bt-}M3in}Y#22ZM{{A-Ck=<wLZ}p}n_<58qcLJQ_Li
zXe7C6<n*)AwCd4}+E1DF%B*^2_DdySpv)1BU3xQC*!21OyU#_<U&`9Pl(&uF>zsJd
zIq|q_;<0d|T0B|PJz3W~^{Q{`Ei&DROuv&(H_N752WC3tGo3>-LdC2|F)LQgc8|>V
zjL!CcQuQfS5~T_rQz2t2^b)zbzCd5myyJnJg8+>=nsevP*V5L})ze?N$iUEOvB`>+
zrZ|XTZfUh@wY81ynzf{LcJ@xrF0O7HJT{U&Dc(MQ{sDnox9tcG+qFA9B8nCpxA(xo
z!$*(DC!9z;c`7M6C6%7eU}y38IT!MNE4X^Sxa3x8#httNA3l9n^ZZ3!z2Hq_b4zPm
zd*{b4p{Tn@0wV*1L&GDZpOj;t$0sJIre|h9C#DNgiy9F=US#o=xcB<#x22?#J+{V*
z<Q-L<7Wc*TyTy5aPaZjcx$MS|@7YfYHY9qay9ay%WU|;qgDdAuJScX@b5;}Q8tKoY
zlowKZocKq;BzQl~k+b5})tJWoee~%7XP3E6cJ&LI&P^JIJ*i1eF}J10xn8TR(5kPo
z@QN-u+o!EnQIh>ZdrzyN7DywlCCv-CXbhPEhpDVT7Xs|q?D&WghgC*()?l3ohc_pc
zRWwDW8*~H*@eM)WR&B0#PF18!)R854Pg2z1?|t&3DCI@ACEN$LR1KkkB--MT!5!DD
zz0{1`1jHG|dctqV#~SiC)iGbzZL>~&+NGNI`k9mhojGOjth!~_E`Qw~N0Vdnwb@FD
z##`c_&`055AxOd5&|U0DA1>^b8IoT!&uA%LHc-Myw4KE^l09kMFouBG5UQM{dEbD?
z)|8G@Gi-&wh8B}8iVrEH7Bt!i@@558#+ec=Ux)4Ckm?>`yGi1~NO$H^Q-y(|>=rji
zS*YPecfPioY88?e>-C`QxhXAv%rQn>NNkvJII-N#IU>%g;b4cIUwYI6otpZ}L1^W(
zDHk6KJ$l*A<UitYcEgbd>zDB1N5N!~_-MHC9S%d8`&1-0+h7mg;VoXe|ALN=xT5LA
z@cKH#j)Y8PPWtd)A-lVT$vaXemarH}i7~mFK+xo?m%9p<rsit``u?kyZqMRGZ;#=J
z>^$(g+f&auk#}2O>9aQ}(HNn`pA^b1tBYFomK#Pe+qQK*tuFci5)FGYBJ<5YPW2OK
z&W3j4dy<dY8u-$TD-G}wk=;qlgW_}T9)RS;wu%6cC)YJQDsA{b>I9uBPr0F!@i9U4
zoK$;gpH+is_Qs1vcMF#Hn|CaDV#{!kDcQ{%mxdwlCpK>(f`@)+E05bh_&B#kp43+g
zR$bgd?FdyUbL;k52<2an<IS%mJFaWvS}6tvPVLJ|?We4J+8uvCCHFPI-FsR!L!Gi~
pr}Uq_4><r`sf1q+a?RqhRKXf<=Z#KTHevr1s^?~M#l}5p{{n5#Satva

literal 0
HcmV?d00001

diff --git a/src/pages/chat/components/ChatNavIcon.tsx b/src/pages/chat/components/ChatNavIcon.tsx
index 51357a9..3394b99 100644
--- a/src/pages/chat/components/ChatNavIcon.tsx
+++ b/src/pages/chat/components/ChatNavIcon.tsx
@@ -2,37 +2,76 @@ import {ActionIcon, Indicator} from "@mantine/core";
 import {Link, useMatch} from "react-router-dom";
 import {IconMessageCircle} from "@tabler/icons-react";
 import {usePB} from "@/lib/pocketbase.tsx";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import {useTimeout} from "@mantine/hooks";
 import {MessagesModel} from "@/models/MessageTypes.ts";
+import {APP_NAME, APP_URL} from "../../../../config.ts";
+
+/**
+ * Parse HTML string and return text content
+ * @param html - HTML string
+ */
+const parseHtmlString = (html: string): string => {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, 'text/html');
+    return doc.body.textContent || '';
+}
+
+const sendDesktopNotification = (body: string, url: string) => {
+    if ("Notification" in window && Notification.permission === 'granted') {
+        const notification = new Notification(APP_NAME, {
+            body: body,
+            icon: `${APP_URL}/stuve-logo.svg`,
+            vibrate: [200, 100, 200],
+            data: {url: url}
+        })
+        notification.onclick = () => {
+            window.focus()
+            window.open(notification.data.url);
+        }
+    }
+}
 
 export default function ChatNavIcon() {
 
-    const [newMessage, setNewMessage] = useState<string | null>(null);
-    const {start} = useTimeout(() => setNewMessage(null), 5000);
+    const [notificationUrl, setNotificationUrl] = useState<string | null>(null);
+    const {start} = useTimeout(() => setNotificationUrl(null), 5000);
 
     const {user, useSubscription} = usePB()
 
     const match = useMatch("/chat/:listId")
 
+    useEffect(() => {
+        // Request notification permission on component mount
+        if ("Notification" in window && Notification.permission !== 'granted') {
+            Notification.requestPermission().then(() => {
+                sendDesktopNotification(
+                    "Willkommen bei StuVe! Du kannst jetzt Desktop Benachrichtigungen erhalten.",
+                    `${APP_URL}/chat`
+                )
+            })
+        }
+    }, [])
+
     useSubscription<MessagesModel>({
         idOrName: "messages",
         topic: "*",
         callback: (event) => {
             if (event.action == "create") {
-                if (event.record.isAnnouncement) {
-                    start()
-                    setNewMessage("announcements")
-                } else if (
-                    event.record.eventList
-                    &&
-                    match?.params.listId !== event.record.eventList // check if chat page is not already open
-                    &&
-                    event.record.sender !== user?.id // check if sender is not the user
-                ) {
-                    start()
-                    setNewMessage(event.record.eventList)
+                // check if chat page is not already open and if sender is not the user
+                if (match?.params.listId === event.record.eventList && event.record.sender === user?.id) {
+                    return
                 }
+
+                const notificationUrl = `/chat/${event.record.isAnnouncement ? "announcements" : event.record.eventList}`
+
+                setNotificationUrl(notificationUrl)
+                start()
+
+                sendDesktopNotification(
+                    parseHtmlString(event.record.content),
+                    `${APP_URL}${notificationUrl}`
+                )
             }
         }
     })
@@ -42,12 +81,12 @@ export default function ChatNavIcon() {
     }
 
     return <>
-        <Indicator inline processing disabled={newMessage === null} classNames={{
+        <Indicator inline processing disabled={notificationUrl === null} classNames={{
             root: "stack"
         }}>
             <ActionIcon
                 component={Link}
-                to={`/chat${newMessage ? `/${newMessage}` : ""}`}
+                to={notificationUrl ?? "/chat"}
                 variant={"transparent"}
                 color={"gray"}
             >