Add Global User Online Status

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

@@ -8,7 +8,6 @@ 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";
@@ -20,6 +19,9 @@ import { Header } from "../../components/app/header";
 // Friend Import
 import { addFriend } from "../../components/app/friends/friends";
 
+// Icons
+import CircleIcon from '@mui/icons-material/Circle';
+
 /**
  * User Profile Page
  * @returns {Object} - User Profile Page
@@ -128,8 +130,8 @@ function UserProfile() {
                       style={{maxWidth: "350px", maxHeight: "450px"}} 
                       className="relative mx-auto rounded-2xl overflow-hidden"
                     />
-                    <div className="font-bold text-[30px]">
-                      {profileData.firstName} {profileData.lastName}
+                    <div className="font-bold text-[30px] flex justify-center items-center">
+                      {profileData.lastOnline == true && <CircleIcon className="text-lime-600 mr-3"/>}{profileData.firstName} {profileData.lastName}
                     </div>
                     <div className="text-[20px]">@{profileData.username}</div>
                     <div className="pt-5">{profileData.bio}</div>

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

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 
 // Icons
 import PersonIcon from '@mui/icons-material/Person';
+import CircleIcon from '@mui/icons-material/Circle';
 
 // Colors for Messages
 const userColors = [
@@ -149,7 +150,7 @@ export function Member({ memberObj }) {
   return (
     <Link href={"/user?uid=" + memberObj.uid}>
       <div className="cursor-pointer g-[aliceblue] rounded-lg m-3 shadow-xl p-2">
-        {memberObj.username}
+      {memberObj.lastOnline == true && <CircleIcon className="text-lime-600 mr-1 relative top-[-1px]" fontSize="20px"/>}{memberObj.username}
       </div>
     </Link>
   );

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

@@ -12,6 +12,7 @@ import { openDM } from './dm';
 // Icons
 import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
+import CircleIcon from '@mui/icons-material/Circle';
 
 /**
  * Send a friend request to a user
@@ -41,7 +42,7 @@ export function Friend({user,friendObj}) {
                         <Link href={`/user?uid=${friendObj.uid}`}>
                             <div className='inline-block mr-8'><img src={friendObj.pfp} className= 'w-[38px] h-[50px]'/></div>
                             <div className='inline-block relative top-[-6px]'>
-                                <div className="font-bold">{friendObj.firstName} {friendObj.lastName}</div>
+                                <div className="font-bold">{friendObj.lastOnline == true && <CircleIcon className="text-lime-600 mr-1 relative top-[-2px]" fontSize="20px"/>}{friendObj.firstName} {friendObj.lastName}</div>
                                 <div className="">@{friendObj.username}</div>
                             </div>
                         </Link>

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

@@ -3,7 +3,7 @@ import Link from "next/link"
 
 // Firebase Imports
 import { database } from "../../../firebase-config";
-import { ref, set, remove } from "firebase/database";
+import { ref, set, remove, onDisconnect, serverTimestamp } from "firebase/database";
 
 // Component Imports
 import { NotificationPanel } from "./notifications/notifications";
@@ -88,6 +88,15 @@ export function Header({mainTab,chatRoomObj,user,sidebarControl}) {
     }
 
   }
+
+  // Sets User Online / Offline
+  // Stored in header for easy code maintenance and retains user online/offline throughout app
+  // Makes user online
+  set(ref(database, `/users/${user.uid}/lastOnline`), true)
+
+  // Makes user offline (with last time online)
+  onDisconnect(ref(database, `/users/${user.uid}/lastOnline`)).set(serverTimestamp())
+
   return (
     <div className="flex m-2 rounded-lg h-[63px] bg-white shadow-2xl p-1">
       <div className="flex shrink h-[60px]">