seeding initial office rooms and showing them

components/Dashboard/Announcements.tsx

@@ -55,8 +55,6 @@ export default function Announcements() {
         updatedOrNewAnn.id = change.doc.id;
 
         if (change.type === "added" || change.type === "modified") {
-          console.log("New or updated announcement: ", updatedOrNewAnn);
-
           // update rooms map
           setAnnMap((prevMap) => {
             return new Map(prevMap.set(updatedOrNewAnn.id, updatedOrNewAnn));

components/Dashboard/Office.tsx

@@ -0,0 +1,100 @@
+import {
+  collection,
+  getFirestore,
+  onSnapshot,
+  query,
+  where,
+} from "firebase/firestore";
+import { useEffect, useState } from "react";
+import { useAuth } from "../../contexts/authContext";
+import { useTeamDashboardContext } from "../../contexts/teamDashboardContext";
+import OfficeRoom from "../../models/officeRoom";
+import { Collections } from "../../services/collections";
+import OfficeRoomService from "../../services/officeRoomService";
+import OfficeCard from "../OfficeCard";
+
+const db = getFirestore();
+
+const officeRoomService = new OfficeRoomService();
+
+export default function Office() {
+  const { currUser } = useAuth();
+  const { team } = useTeamDashboardContext();
+
+  const [officeRoomsMap, setOfficeRoomsMap] = useState<Map<string, OfficeRoom>>(
+    new Map<string, OfficeRoom>()
+  );
+
+  // get all offices for this team : realtime
+  useEffect(() => {
+    /**
+     * QUERY:
+     * all offices for this team
+     *
+     */
+    const q = query(
+      collection(db, Collections.officeRooms),
+      where("teamId", "==", team.id)
+    );
+
+    // return unsubscribe
+    return onSnapshot(q, (snapshot) => {
+      if (snapshot.empty) {
+        // seed data and create the initial rooms
+        console.log("seeding office rooms for this team");
+        officeRoomService.createInitialOfficeRooms(currUser.uid, team.id);
+        return;
+      }
+
+      snapshot.docChanges().forEach((change) => {
+        let updatedOfficeRoom = change.doc.data() as OfficeRoom;
+        updatedOfficeRoom.id = change.doc.id;
+
+        if (change.type === "added" || change.type === "modified") {
+          // update office rooms map on change of the room
+          setOfficeRoomsMap((prevMap) => {
+            return new Map(
+              prevMap.set(updatedOfficeRoom.id, updatedOfficeRoom)
+            );
+          });
+        }
+        if (change.type === "removed") {
+          console.log("Removed office room: ", updatedOfficeRoom);
+        }
+      });
+    });
+  }, []);
+
+  const allOfficeRooms = Array.from(officeRoomsMap.values());
+
+  allOfficeRooms.sort((a, b) => {
+    if (a.name < b.name) {
+      return 1;
+    }
+
+    if (a.name > b.name) {
+      return 1;
+    }
+    return 0;
+  });
+
+  // if there are none, then show user button to create initial office rooms and then create them
+
+  return (
+    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md w-96 shrink-0">
+      <span className="flex flex-row justify-start items-center pb-5">
+        <span className="flex flex-col">
+          <span className="text-white uppercase">Office</span>
+        </span>
+      </span>
+
+      {/* all office rooms  */}
+      <span className="flex flex-col space-y-5">
+        {allOfficeRooms.map((officeRoom) => (
+          <OfficeCard key={officeRoom.id} officeRoom={officeRoom} />
+        ))}
+        {/* <OfficeCard /> */}
+      </span>
+    </section>
+  );
+}

components/Dashboard/TeamVoiceLine.tsx

@@ -204,7 +204,7 @@ export default function TeamVoiceLine() {
   }
 
   return (
-    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md w-96 shrink-0 max-h-[32rem]">
+    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md w-96 shrink-0">
       <span className="flex flex-row justify-start items-center pb-5">
         <span className="flex flex-col">
           <span className="text-white">TEAM</span>

components/OfficeCard.tsx

@@ -0,0 +1,41 @@
+import { Avatar } from "antd";
+import OfficeRoom, { OfficeRoomState } from "../models/officeRoom";
+
+interface IOfficeCard {
+  officeRoom: OfficeRoom;
+}
+
+export default function OfficeCard(props: IOfficeCard) {
+  return (
+    <span className="flex flex-col">
+      <span className="flex flex-row justify-start items-center">
+        {renderOfficePulse(OfficeRoomState.active)}
+
+        {/* office location name */}
+        <span className="text-gray-200 text-lg font-semibold ml-2">
+          {props.officeRoom.name}
+        </span>
+
+        {/* all members in room */}
+        <span className="ml-auto">
+          <Avatar.Group>
+            {props.officeRoom.members.map((officeLocation) => {
+              <Avatar
+                style={{ backgroundColor: "teal", verticalAlign: "middle" }}
+                className="shadow-xl hover:z-20 hover:cursor-pointer"
+              >
+                {officeLocation[0]}
+              </Avatar>;
+            })}
+          </Avatar.Group>
+        </span>
+      </span>
+    </span>
+  );
+}
+
+function renderOfficePulse(officeRoomState: OfficeRoomState) {
+  return (
+    <span className="h-4 w-4 rounded-full bg-green-500 animate-pulse shadow-lg"></span>
+  );
+}