reusable components for the status and stuff

components/Dashboard/TeamVoiceLine.tsx

@@ -20,52 +20,11 @@ import { Collections } from "../../services/collections";
 import { KeyCode } from "../../globals/keycode";
 import { Tooltip } from "antd";
 import { useAudioContext } from "../../contexts/audioContext";
+import UserStatusBubble, { UserPulse } from "../UserStatusBubble";
 
 const userService = new UserService();
 const db = getFirestore();
 
-function statusBubble(status: UserStatus) {
-  switch (status) {
-    case UserStatus.online:
-      return (
-        <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
-      );
-    case UserStatus.busy:
-      return (
-        <span className="absolute top-0 right-0 w-3 h-3 bg-orange-400 rounded-full"></span>
-      );
-    case UserStatus.offline:
-      return (
-        <span className="absolute top-0 right-0 w-3 h-3 bg-gray-400 rounded-full"></span>
-      );
-    default:
-      return (
-        <span className="absolute top-0 right-0 w-3 h-3 bg-gray-400 rounded-full"></span>
-      );
-  }
-}
-
-function renderPulse(status: UserStatus) {
-  switch (status) {
-    case UserStatus.online:
-      return (
-        <IoPulseOutline className="text-green-500 text-2xl animate-pulse mx-2 ml-auto" />
-      );
-    case UserStatus.busy:
-      return (
-        <IoPulseOutline className="text-orange-400 text-2xl animate-pulse mx-2 ml-auto" />
-      );
-    case UserStatus.offline:
-      return (
-        <IoRemoveOutline className="text-gray-400 text-2xl mx-2 ml-auto" />
-      );
-    default:
-      return (
-        <IoPulseOutline className="text-gray-400 text-2xl animate-pulse mx-2 ml-auto" />
-      );
-  }
-}
-
 const maxNumberOfKeyboardMappings: number = 9;
 
 export default function TeamVoiceLine() {
@@ -177,7 +136,7 @@ export default function TeamVoiceLine() {
           <span className="relative flex mr-2">
             <span className="bg-gray-200 bg-opacity-30 rounded-full shadow-md absolute w-full h-full"></span>
 
-            {statusBubble(tmember.userStatus)}
+            <UserStatusBubble status={tmember.userStatus} />
 
             <img
               src={tmember.avatarUrl}
@@ -256,7 +215,7 @@ export default function TeamVoiceLine() {
               <BsThreeDots className="text-black ml-2 hover:cursor-pointer" />
             </>
           ) : (
-            <>{renderPulse(tmember.userStatus)}</>
+            <UserPulse status={tmember.userStatus} />
           )}
         </span>
       );

components/UserStatusBubble.tsx

@@ -0,0 +1,49 @@
+import { IoPulseOutline, IoRemoveOutline } from "react-icons/io5";
+import { UserStatus } from "../models/user";
+
+interface UserStatusPropsInterface {
+  status: UserStatus;
+}
+
+export default function UserStatusBubble(props: UserStatusPropsInterface) {
+  switch (props.status) {
+    case UserStatus.online:
+      return (
+        <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
+      );
+    case UserStatus.busy:
+      return (
+        <span className="absolute top-0 right-0 w-3 h-3 bg-orange-400 rounded-full"></span>
+      );
+    case UserStatus.offline:
+      return (
+        <span className="absolute top-0 right-0 w-3 h-3 bg-gray-400 rounded-full"></span>
+      );
+    default:
+      return (
+        <span className="absolute top-0 right-0 w-3 h-3 bg-gray-400 rounded-full"></span>
+      );
+  }
+}
+
+// same as status pretty much but prolly less needed for all components
+export function UserPulse(props: UserStatusPropsInterface) {
+  switch (props.status) {
+    case UserStatus.online:
+      return (
+        <IoPulseOutline className="text-green-500 text-2xl animate-pulse mx-2 ml-auto" />
+      );
+    case UserStatus.busy:
+      return (
+        <IoPulseOutline className="text-orange-400 text-2xl animate-pulse mx-2 ml-auto" />
+      );
+    case UserStatus.offline:
+      return (
+        <IoRemoveOutline className="text-gray-400 text-2xl mx-2 ml-auto" />
+      );
+    default:
+      return (
+        <IoPulseOutline className="text-gray-400 text-2xl animate-pulse mx-2 ml-auto" />
+      );
+  }
+}

models/user.ts

@@ -36,6 +36,5 @@ export class User {
 export enum UserStatus {
   online = "online",
   offline = "offline",
-  inCall = "in call",
   busy = "busy",
 }

pages/teams/[teamid].tsx

@@ -13,7 +13,9 @@ import {
 } from "../../contexts/teamDashboardContext";
 import { Team } from "../../models/team";
 import { TeamMemberStatus } from "../../models/teamMember";
+import { UserStatus } from "../../models/user";
 import TeamService from "../../services/teamService";
+import UserService from "../../services/userService";
 
 // User has switched back to the tab
 const onFocus = () => {
@@ -25,30 +27,49 @@ const onBlur = () => {
   console.log("Tab is blurred");
 };
 
-const onClose = (ev) => {
+const alertUserAboutClosing = (ev) => {
   // change user status to offline
 
   ev.preventDefault();
   return (ev.returnValue = "are you sure?");
 };
 
+const userService = new UserService();
+
 function TeamDashboard() {
   const { currUser } = useAuth();
   const router = useRouter();
   const teamDashboardContext = useTeamDashboardContext();
 
+  // user goes offline
+  const handleTabClosing = () => {
+    // change status of user
+    userService.updateUserStatus(currUser.uid, UserStatus.offline);
+  };
+
+  // shows browser alert to warn user of exiting
+  const alertUserAboutClosing = (event: any) => {
+    event.preventDefault();
+    event.returnValue = "";
+  };
+
   useEffect(() => {
     window.addEventListener("focus", onFocus);
     window.addEventListener("blur", onBlur);
     // Calls onFocus when the window first loads
     onFocus();
-    // Specify how to clean up after this effect:
 
-    window.addEventListener("beforeunload", onClose);
+    // set user to online until he closes tab/window
+    userService.updateUserStatus(currUser.uid, UserStatus.online);
+
+    window.addEventListener("beforeunload", alertUserAboutClosing);
+    window.addEventListener("unload", handleTabClosing);
     return () => {
+      // Specify how to clean up after this effect:
       window.removeEventListener("focus", onFocus);
       window.removeEventListener("blur", onBlur);
-      window.removeEventListener("beforeunload", onClose);
+      window.removeEventListener("beforeunload", alertUserAboutClosing);
+      window.removeEventListener("unload", handleTabClosing);
     };
   }, []);
 

services/userService.tsx

@@ -11,7 +11,7 @@ import {
   Unsubscribe,
   DocumentSnapshot,
 } from "firebase/firestore";
-import { User } from "../models/user";
+import { User, UserStatus } from "../models/user";
 import { Collections } from "./collections";
 
 export default class UserService {
@@ -65,4 +65,13 @@ export default class UserService {
       { merge: true }
     );
   }
+
+  async updateUserStatus(userId: string, newStatus: UserStatus) {
+    const docRef = doc(this.db, Collections.users, userId);
+    await setDoc(
+      docRef,
+      { userStatus: newStatus, lastUpdatedDate: serverTimestamp() },
+      { merge: true }
+    );
+  }
 }