frontend-next/.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["next/babel","next/core-web-vitals" ],
+  "extends": ["next/babel", "next/core-web-vitals"],
   "rules": {
     "no-unused-vars": ["warn", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
     "jsx-a11y/alt-text": "off",

frontend-next/src/app/app/page.js

@@ -27,7 +27,7 @@ function Home() {
   // State variables for app page
   const [user, setUser] = useState(null); // user data
   const [loadingLoc, setLoadingLoc] = useState(true); // location variable loading, true = loading, false = finished loading
-  const [authUser] = useAuthState(auth) // auth user object (used to obtain other user object)
+  const [authUser, authLoading] = useAuthState(auth) // auth user object (used to obtain other user object)
   const [drawerOpen, setDrawerOpen] = useState(true); // drawer open state
   const [coords, setCoords] = useState(null)
 
@@ -42,7 +42,7 @@ function Home() {
 
   // Authentication Verification / Redirection if Profile Data not Filled out
   useEffect(() => {
-    if (authUser) {
+    if (authUser && authLoading === false) {
         onValue(ref(database, `users/${authUser.uid}`), (userData) => {
             userData = userData.val();
             if (userData) {
@@ -51,8 +51,10 @@ function Home() {
                 window.location.href = "/onboarding";
             }
         });
+    } else if (authLoading === false) {
+        window.location.href = "/login";
     }
-  }, [authUser])
+  }, [authLoading])
 
   useEffect(() => {
     Geolocation.getCurrentPosition().then((position) => {

frontend-next/src/app/chat/page.js

@@ -24,7 +24,7 @@ function Chat() {
   const [user, setUser] = useState(null); // user data
   const [chatRoomObj, setChatRoomObj] = useState(null); // Current chatroom object
   const [doneLoading, setDoneLoading] = useState(false) // is the page done loading or not
-  const [authUser] = useAuthState(auth) // auth user object (used to obtain other user object)
+  const [authUser, authLoading] = useAuthState(auth) // auth user object (used to obtain other user object)
   const [drawerOpen, setDrawerOpen] = useState(true); // drawer open state
 
   var windowSize = useWindowSize()
@@ -38,7 +38,7 @@ function Chat() {
   
   // Authentication Verification / Redirection if Profile Data not Filled out
   useEffect(() => {
-    if (authUser) {
+    if (authUser && authLoading === false) {
         onValue(ref(database, `users/${authUser.uid}`), (userData) => {
             userData = userData.val();
             if (userData) {
@@ -47,8 +47,10 @@ function Chat() {
                 window.location.href = "/onboarding";
             }
         });
+    } else if (authLoading === false) {
+        window.location.href = "/login";
     }
-  }, [authUser])
+  }, [authLoading])
 
   // Users URL params to load proper chatroom, then logs the user into that room
   useEffect(() => {

frontend-next/src/app/dm/page.js

@@ -24,7 +24,7 @@ function Chat() {
   const [user, setUser] = useState(null); // user data
   const [chatRoomObj, setChatRoomObj] = useState(null); // Current chatroom object
   const [doneLoading, setDoneLoading] = useState(false) // is the page done loading or not
-  const [authUser] = useAuthState(auth) // auth user object (used to obtain other user object)
+  const [authUser, authLoading] = useAuthState(auth) // auth user object (used to obtain other user object)
   const [drawerOpen, setDrawerOpen] = useState(true); // drawer open state
 
   var windowSize = useWindowSize()
@@ -38,17 +38,19 @@ function Chat() {
   
   // Authentication Verification / Redirection if Profile Data not Filled out
   useEffect(() => {
-    if (authUser) {
-        onValue(ref(database, `users/${authUser.uid}`), (userData) => {
-            userData = userData.val();
-            if (userData) {
-                setUser(userData);
-            } else {
-                window.location.href = "/onboarding";
-            }
-        });
+    if (authUser && authLoading === false) {
+      onValue(ref(database, `users/${authUser.uid}`), (userData) => {
+          userData = userData.val();
+          if (userData) {
+              setUser(userData);
+          } else {
+              window.location.href = "/onboarding";
+          }
+      });
+    } else if (authLoading === false) {
+        window.location.href = "/login";
     }
-  }, [authUser])
+  }, [authLoading])
 
   // Users URL params to load proper chatroom, then logs the user into that room
   useEffect(() => {

frontend-next/src/app/user/page.js

@@ -3,10 +3,12 @@
 import { useState, useEffect } from "react";
 import { auth, database } from "../../../firebase-config";
 import { ref, onValue, get } from "firebase/database";
-import { onAuthStateChanged } from "firebase/auth";
+import { useAuthState } from "react-firebase-hooks/auth"
+
 
 // Refactored Component Imports
 
+
 // Data Structure Imports
 import { ProfileRoom } from "../../components/app/profile/ProfileRoom";
 import { ProfileEdit } from "../../components/app/profile/ProfileEdit";
@@ -31,6 +33,8 @@ function UserProfile() {
   const [isOwner, setIsOwner] = useState(false); // Determines if user is owner of profile
   const [friends, setFriends] = useState(false); // is user a friend?
   const [isPending, setPending] = useState(false); // is friend request pending?
+  const [authUser, authLoading] = useAuthState(auth) // auth user object (used to obtain other user object)
+
 
   // Handles Edit State in Component, shares useState with ProfileEdit
   const [isEditing, setIsEditing] = useState(false);
@@ -40,25 +44,25 @@ function UserProfile() {
 
   // Authentication
   useEffect(() => {
-    onAuthStateChanged(auth, (user) => {
+    if (authUser && authLoading === false) {
       const searchParams = new URLSearchParams(document.location.search);
       var userUID = searchParams.get("uid")
-      if (user) {
-        get(ref(database, `users/${user.uid}`)).then((userData) => {
+      onValue(ref(database, `users/${authUser.uid}`), (userData) => {
           userData = userData.val();
           if (userData) {
             if (userData.uid == userUID) {
               setIsOwner(true);
             }
-            setUser(userData);
             setIsAuthenticated(true);
+            setUser(userData);
           } else {
-            window.location.href = "/onboarding";
+              window.location.href = "/onboarding";
           }
-        });
-      }
-    });
-  }, []);
+      });
+    } else if (authLoading === false) {
+        window.location.href = "/login";
+    }
+  }, [authLoading]);
 
   // Grabs profile user data
   useEffect(() => {
@@ -108,7 +112,7 @@ function UserProfile() {
 
   return (
     <div>
-      {isAuthenticated && (
+      {(isAuthenticated && profileData) && (
         <div className="md:overflow-hidden">
           {/* Left Side of Page */}
           <div className="h-dvh md:overflow-hidden">

frontend-next/src/components/app/friends/friends.js

@@ -55,7 +55,7 @@ export function Friend({user,friendObj}) {
  * 
  * @prop {JSON} user - User Object 
  * @prop {JSON} requestingUser - User Object of the user requesting to be friends
- * @returns 
+ * @returns {Object} Friend Request Component
  */
 export function FriendRequest({user, requestingUser}) {
     /**

frontend-next/src/components/app/profile/ProfileEdit.js

@@ -45,12 +45,11 @@ export function ProfileEdit({ profileData, user, onSave }) {
         }
       );
     } else {
-      for (var key in data) {
-        if (data[key] == "") {
+      for (var key in profileData) {
+        if (data[key] == "" || (key == "pfp" && data[key].length == 0)) {
           data[key] = profileData[key];
         }
       }
-      data.pfp = profileData.pfp;
       handleEditState(false);
       update(ref(database, `users/${user.uid}`), data);
     }

frontend-next/src/components/app/sidebar/home.js

@@ -92,7 +92,7 @@ export function Sidebar({user,location,loadingLoc}) {
   const [nearbyArrReady, setNearbyArrReady] = useState(false)
   const [friends, setFriends] = useState([])
   const [friendRequests, setFriendRequests] = useState(null)
-  const [dms, setDMs] = useState(null)
+  const [dms, setDMs] = useState((<div>No DMs</div>))
   // Add myRooms to Sidebar
   var myRoomArr = [];
   for (var room in user.rooms) {
@@ -164,18 +164,17 @@ export function Sidebar({user,location,loadingLoc}) {
           get(ref(database, `/users/${dmsList[dmRoom].UIDs[1]}`)).then((snapshot) => {
             var friendObj = snapshot.val()
             dmArr.push(<DM user={user} friendObj={friendObj} key={dmRoom}/>);
+            setDMs(dmArr);
           })
         } else if (user.uid == dmsList[dmRoom].UIDs[1]) {
           get(ref(database, `/users/${dmsList[dmRoom].UIDs[0]}`)).then((snapshot) => {
             var friendObj = snapshot.val()
             dmArr.push(<DM user={user} friendObj={friendObj} key={dmRoom}/>);
+            setDMs(dmArr);
           })
         }  
       }
-      if (dmArr.length == 0) {
-        dmArr.push(<div>No DMs</div>);
-      }
-      setDMs(dmArr);
+       
     })
   }, [user])