From 71327fc77a93c67adada5e9df5d2bede23fb84db Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Tue, 3 Jan 2023 13:17:09 +0000
Subject: [PATCH] Browser notifications

---
 src/feed/LoginFeed.js | 15 +++++++++++----
 src/pages/Layout.js   | 16 +++++++++++++++-
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/feed/LoginFeed.js b/src/feed/LoginFeed.js
index efe10c44..8c0f6c55 100644
--- a/src/feed/LoginFeed.js
+++ b/src/feed/LoginFeed.js
@@ -1,3 +1,4 @@
+import Nostrich from "../nostrich.jpg";
 import { useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import EventKind from "../nostr/EventKind";
@@ -12,10 +13,10 @@ import { mapEventToProfile } from "./UsersFeed";
  */
 export default function useLoginFeed() {
     const dispatch = useDispatch();
-    const pubKey = useSelector(s => s.login.publicKey);
+    const [pubKey, readNotifications] = useSelector(s => [s.login.publicKey, s.login.readNotifications]);
 
     const sub = useMemo(() => {
-        if(pubKey === null) {
+        if (pubKey === null) {
             return null;
         }
 
@@ -39,9 +40,9 @@ export default function useLoginFeed() {
     useEffect(() => {
         let contactList = notes.filter(a => a.kind === EventKind.ContactList);
         let notifications = notes.filter(a => a.kind === EventKind.TextNote);
-        let metadata = notes.filter(a => a.kind === EventKind.SetMetadata).map(a => mapEventToProfile(a)); 
+        let metadata = notes.filter(a => a.kind === EventKind.SetMetadata).map(a => mapEventToProfile(a));
 
-        for(let cl of contactList) {
+        for (let cl of contactList) {
             if (cl.content !== "") {
                 let relays = JSON.parse(cl.content);
                 dispatch(setRelays(relays));
@@ -50,6 +51,12 @@ export default function useLoginFeed() {
             dispatch(setFollows(pTags));
         }
 
+        if (Notification.permission === "granted") {
+            for (let nx in notifications.filter(a => (a.created_at * 1000) > readNotifications)) {
+                let n = new Notification(`New reply!`, { body: nx.content, icon: Nostrich });
+                console.log(n);
+            }
+        }
         dispatch(addNotifications(notifications));
         dispatch(setUserData(metadata));
     }, [notes]);
diff --git a/src/pages/Layout.js b/src/pages/Layout.js
index 855af8fc..22c76d51 100644
--- a/src/pages/Layout.js
+++ b/src/pages/Layout.js
@@ -34,11 +34,25 @@ export default function Layout(props) {
         dispatch(init());
     }, []);
 
+    async function goToNotifications(e) {
+        e.stopPropagation();
+        // request permissions to send notifications
+        if (Notification.permission !== "granted") {
+            try {
+                let res = await Notification.requestPermission();
+                console.debug(res);
+            } catch (e) {
+                console.error(e);
+            }
+        }
+        navigate("/notifications");
+    }
+
     function accountHeader() {
         const unreadNotifications = notifications?.filter(a => (a.created_at * 1000) > readNotifications).length ?? 0;
         return (
             <>
-                <div className="btn btn-rnd notifications" onClick={() => navigate("/notifications")}>
+                <div className="btn btn-rnd notifications" onClick={(e) => goToNotifications(e)}>
                     <FontAwesomeIcon icon={faBell} size="xl" />
                     {unreadNotifications}
                 </div>