Retrieve SSE event data into state

MaoShizhong · Dec 31, 2023 · 17f80dd · 17f80dd
1 parent 5e85f00
commit 17f80dd
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 4 deletions.
diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
@@ -1,5 +1,6 @@
 import { useRef, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
+import { useSSE } from '../../helpers/hooks';
 import { SearchButton } from '../buttons/SearchButton';
 import { AccountMenu } from './AccountMenu';
 import { FriendRequests } from './FriendRequests';
@@ -11,6 +12,11 @@ export function Header({ setUser, userHandle, userID }) {
     const [friendRequestsIsOpen, setFriendRequestsIsOpen] = useState(false);
     const [accountIsOpen, setAccountIsOpen] = useState(false);
 
+    const { notifications: incomingFriendRequests, setNotifications: setIncomingFriendRequests } =
+        useSSE(`/notifications/friend-requests`);
+
+    console.log('FRs:', incomingFriendRequests);
+
     const notificationsRef = useRef(null);
     const friendRequestsRef = useRef(null);
     const accountRef = useRef(null);
@@ -47,6 +53,12 @@ export function Header({ setUser, userHandle, userID }) {
                                 <path d="M192 256c61.9 0 112-50.1 112-112S253.9 32 192 32 80 82.1 80 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C51.6 288 0 339.6 0 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zM480 256c53 0 96-43 96-96s-43-96-96-96-96 43-96 96 43 96 96 96zm48 32h-3.8c-13.9 4.8-28.6 8-44.2 8s-30.3-3.2-44.2-8H432c-20.4 0-39.2 5.9-55.7 15.4 24.4 26.3 39.7 61.2 39.7 99.8v38.4c0 2.2-.5 4.3-.6 6.4H592c26.5 0 48-21.5 48-48 0-61.9-50.1-112-112-112z"></path>
                             </g>
                         </svg>
+
+                        {incomingFriendRequests.length > 0 && (
+                            <div className={headerStyles.notificationDot}>
+                                {incomingFriendRequests.length}
+                            </div>
+                        )}
                     </button>
 
                     <button

diff --git a/src/components/header/css/header.module.css b/src/components/header/css/header.module.css
@@ -36,14 +36,15 @@
 
 .dropdowns {
     display: inline-block;
-    height: 100%;
     position: relative;
 
     & > button {
         aspect-ratio: 1 / 1;
         color: var(--main-fade-d);
         height: 1rem;
         margin-inline: 4px;
+        margin-top: 3px;
+        position: relative;
 
         &:hover {
             color: var(--main-l);
@@ -122,3 +123,20 @@
         padding-inline: 0;
     }
 }
+
+.notificationDot {
+    --dot-size: 0.85rem;
+
+    background-color: var(--main-l);
+    border-radius: 50%;
+    color: var(--text-l);
+    display: grid;
+    font-size: x-small;
+    font-weight: bold;
+    height: var(--dot-size);
+    place-content: center;
+    position: absolute;
+    right: -5px;
+    top: -5px;
+    width: var(--dot-size);
+}
diff --git a/src/helpers/fetch.js b/src/helpers/fetch.js
@@ -1,4 +1,4 @@
-const domain =
+export const DOMAIN =
     import.meta.env.VITE_MODE === 'prod'
         ? import.meta.env.VITE_PROD_API
         : import.meta.env.VITE_DEV_API;
@@ -40,7 +40,7 @@ export const fetchData = async (endpoint, method, form) => {
     }
 
     try {
-        return await fetch(`${domain}${endpoint}`, options);
+        return await fetch(`${DOMAIN}${endpoint}`, options);
     } catch (err) {
         return err;
     }

diff --git a/src/helpers/hooks.js b/src/helpers/hooks.js
@@ -1,6 +1,6 @@
 import { useEffect, useLayoutEffect, useState } from 'react';
 import { MOBILE_BREAKPOINT_PX, SERVER_ERROR } from './constants';
-import { fetchData } from './fetch';
+import { DOMAIN, fetchData } from './fetch';
 
 export const useAutoLogin = () => {
     const [user, setUser] = useState(null);
@@ -213,3 +213,23 @@ export const useTokenValidation = (type, token) => {
 
     return { isValidToken, validating };
 };
+
+export const useSSE = (endpoint) => {
+    const [notifications, setNotifications] = useState([]);
+    const [eventSourceOpen, setEventSourceOpen] = useState(false);
+
+    useEffect(() => {
+        if (!eventSourceOpen) {
+            const events = new EventSource(`${DOMAIN}${endpoint}`, { withCredentials: true });
+            setEventSourceOpen(true);
+
+            console.log(`${DOMAIN}${endpoint}`);
+
+            events.onmessage = (event) => {
+                setNotifications([...notifications, JSON.parse(event.data)]);
+            };
+        }
+    }, [endpoint, notifications, eventSourceOpen]);
+
+    return { notifications, setNotifications };
+};