Fetch incoming friend requests on login

Feature in App.jsx to be shared between header and outlet. Friend requests SSE adds to this state.
MaoShizhong · Dec 31, 2023 · 8b318fe · 8b318fe
1 parent 17f80dd
commit 8b318fe
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 17 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -2,19 +2,26 @@ import { Outlet } from 'react-router';
 import { Header } from './components/header/Header';
 import { Loading } from './components/loading/Loading';
 import { Login } from './components/login/Login';
-import { useAutoLogin } from './helpers/hooks';
+import { useAutoLogin, useIncomingFriendRequests } from './helpers/hooks';
 
 export default function App() {
     const { user, setUser, initialising } = useAutoLogin();
+    const { incomingFriendRequests, setIncomingFriendRequests } = useIncomingFriendRequests(user);
 
     return (
         <>
             {initialising ? (
                 <Loading text="Initialising" />
             ) : user ? (
                 <>
-                    <Header setUser={setUser} userHandle={user.handle} userID={user._id} />
-                    <Outlet context={{ user, setUser }} />
+                    <Header
+                        setUser={setUser}
+                        userHandle={user.handle}
+                        userID={user._id}
+                        incomingFriendRequests={incomingFriendRequests}
+                        setIncomingFriendRequests={setIncomingFriendRequests}
+                    />
+                    <Outlet context={{ user, setUser, setIncomingFriendRequests }} />
                 </>
             ) : (
                 <Login setUser={setUser} />

diff --git a/src/components/buttons/RespondFR.jsx b/src/components/buttons/RespondFR.jsx
@@ -6,7 +6,7 @@ import { Loading } from '../loading/Loading';
 import buttonStyles from './css/button.module.css';
 
 export function RespondFR({ userID, action, setFriendsList, page }) {
-    const { user } = useOutletContext();
+    const { user, setIncomingFriendRequests } = useOutletContext();
     const [loading, setLoading] = useState(false);
 
     async function respondToFriendRequest() {
@@ -35,6 +35,9 @@ export function RespondFR({ userID, action, setFriendsList, page }) {
                 target.status = 'accepted';
                 return clonedList;
             });
+            setIncomingFriendRequests((prev) =>
+                prev.filter((request) => request.user._id !== userID)
+            );
         } else {
             let setFriendsListCallback;
             if (page === 'friends') {
@@ -53,6 +56,9 @@ export function RespondFR({ userID, action, setFriendsList, page }) {
             }
 
             setFriendsList(setFriendsListCallback);
+            setIncomingFriendRequests((prev) =>
+                prev.filter((request) => request.user._id !== userID)
+            );
         }
 
         setLoading(false);

diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useSSE } from '../../helpers/hooks';
 import { SearchButton } from '../buttons/SearchButton';
@@ -7,16 +7,25 @@ import { FriendRequests } from './FriendRequests';
 import { Notifications } from './Notifications';
 import headerStyles from './css/header.module.css';
 
-export function Header({ setUser, userHandle, userID }) {
+export function Header({
+    setUser,
+    userHandle,
+    userID,
+    incomingFriendRequests,
+    setIncomingFriendRequests,
+}) {
+    const { notifications: newFriendRequests } = useSSE(`/notifications/friend-requests`);
+
+    useEffect(() => {
+        if (newFriendRequests.length) {
+            setIncomingFriendRequests((prev) => [...prev, newFriendRequests.at(-1)]);
+        }
+    }, [newFriendRequests, setIncomingFriendRequests]);
+
     const [notificationsIsOpen, setNotificationsIsOpen] = useState(false);
     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);

diff --git a/src/components/profile/ToggleGalleryVisiblity.jsx b/src/components/profile/ToggleGalleryVisiblity.jsx
@@ -7,7 +7,6 @@ export function ToggleGalleryVisiblity({ isGalleryHidden, setProfileUser }) {
     const { user } = useOutletContext();
 
     async function changeVisibility(e) {
-        console.log(e.target.value);
         const checkValue = isGalleryHidden ? 'hidden' : 'visible';
 
         /*

diff --git a/src/components/search/SearchPage.jsx b/src/components/search/SearchPage.jsx
@@ -11,7 +11,6 @@ export function SearchPage() {
     const goTo = useNavigate();
 
     const { results, setResults, loading } = useSearchResults(query);
-    console.log(results);
 
     function goToSearchResults(e) {
         e.preventDefault();

diff --git a/src/components/token_auth/AccountDeletion.jsx b/src/components/token_auth/AccountDeletion.jsx
@@ -17,8 +17,6 @@ export function AccountDeletion() {
 
         if (deleteRes instanceof Error || !deleteRes.ok) {
             alert(SERVER_ERROR);
-            const data = await deleteRes.json();
-            console.log(data);
         } else {
             alert('Account successfully deleted.');
             goTo('/');

diff --git a/src/helpers/hooks.js b/src/helpers/hooks.js
@@ -214,6 +214,27 @@ export const useTokenValidation = (type, token) => {
     return { isValidToken, validating };
 };
 
+export const useIncomingFriendRequests = (user) => {
+    const [incomingFriendRequests, setIncomingFriendRequests] = useState([]);
+
+    useEffect(() => {
+        async function getIncomingFriendRequests() {
+            const frRes = await fetchData(`/users/${user._id}/friends`);
+
+            if (frRes instanceof Error) {
+                alert(SERVER_ERROR);
+            } else if (frRes.ok) {
+                const data = await frRes.json();
+                setIncomingFriendRequests(data.incomingRequests);
+            }
+        }
+
+        if (user) getIncomingFriendRequests();
+    }, [user]);
+
+    return { incomingFriendRequests, setIncomingFriendRequests };
+};
+
 export const useSSE = (endpoint) => {
     const [notifications, setNotifications] = useState([]);
     const [eventSourceOpen, setEventSourceOpen] = useState(false);
@@ -223,8 +244,6 @@ export const useSSE = (endpoint) => {
             const events = new EventSource(`${DOMAIN}${endpoint}`, { withCredentials: true });
             setEventSourceOpen(true);
 
-            console.log(`${DOMAIN}${endpoint}`);
-
             events.onmessage = (event) => {
                 setNotifications([...notifications, JSON.parse(event.data)]);
             };