create push notifications, solve blogApi issue

Bardala · Nov 13, 2023 · 8c9fc53 · 8c9fc53
1 parent 1442954
commit 8c9fc53
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/frontend/src/components/NavBar.tsx b/frontend/src/components/NavBar.tsx
@@ -33,7 +33,7 @@ export const NavBar = () => {
 
   if (!isLoggedIn())
     return (
-      <>
+      <header className="navbar">
         <div className="title-wrapper">
           <h1>{AppName}</h1>
         </div>
@@ -43,7 +43,7 @@ export const NavBar = () => {
           </Link>
           <Link to="/login">Login</Link>
         </nav>
-      </>
+      </header>
     );
 
   return (

diff --git a/frontend/src/components/NotificationMenu.tsx b/frontend/src/components/NotificationMenu.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { FaBell } from 'react-icons/fa';
 import { Link } from 'react-router-dom';
 
@@ -13,6 +13,25 @@ export const NotificationMenu = () => {
   const notificationRef = useRef<HTMLDivElement>(null);
   useClickOutside(notificationRef, () => setShowNotification(false));
 
+  useEffect(() => {
+    if (missedMsgs?.length! > 0) {
+      const lastMsg = missedMsgs![0];
+      if (Notification.permission === 'granted') {
+        new Notification('New message', {
+          body: `You have ${lastMsg?.unread_count} new messages in ${lastMsg.spaceName}`,
+        });
+      } else if (Notification.permission !== 'denied') {
+        Notification.requestPermission().then(permission => {
+          if (permission === 'granted') {
+            new Notification('New message', {
+              body: `You have ${lastMsg?.unread_count} new messages in ${lastMsg.spaceName}`,
+            });
+          }
+        });
+      }
+    }
+  }, [missedMsgs]);
+
   return (
     <div ref={notificationRef}>
       <div