From 7b3ebb847ed1f572f86709534411691360531464 Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Sat, 22 Jan 2022 14:59:10 -0800
Subject: [PATCH] fixing dashboard layout and other things starting to
 implement rooms and all

---
 components/Dashboard/Office.tsx        |  4 +--
 components/Dashboard/Rooms.tsx         |  2 +-
 components/Dashboard/TeamVoiceLine.tsx |  2 +-
 components/OfficeCard.tsx              | 44 ++++++++++++++++++++++----
 pages/teams/[teamid].tsx               |  6 ++--
 5 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/components/Dashboard/Office.tsx b/components/Dashboard/Office.tsx
index 8032c9f..1a112f2 100644
--- a/components/Dashboard/Office.tsx
+++ b/components/Dashboard/Office.tsx
@@ -81,7 +81,7 @@ export default function Office() {
   // 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">
+    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md w-96 shrink-0 flex-1">
       <span className="flex flex-row justify-start items-center pb-5">
         <span className="flex flex-col">
           <span className="text-white uppercase">Office</span>
@@ -89,7 +89,7 @@ export default function Office() {
       </span>
 
       {/* all office rooms  */}
-      <span className="flex flex-col space-y-5">
+      <span className="flex flex-col space-y-5 overflow-auto">
         {allOfficeRooms.map((officeRoom) => (
           <OfficeCard key={officeRoom.id} officeRoom={officeRoom} />
         ))}
diff --git a/components/Dashboard/Rooms.tsx b/components/Dashboard/Rooms.tsx
index 2385533..d8d7ce4 100644
--- a/components/Dashboard/Rooms.tsx
+++ b/components/Dashboard/Rooms.tsx
@@ -362,7 +362,7 @@ export default function DashboardRoom() {
   }
 
   return (
-    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md h-[46rem] ">
+    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md flex-1">
       {/*  modal for creating room */}
       <CreateOrUpdateRoom
         show={showModalType == ShowModalType.createRoom}
diff --git a/components/Dashboard/TeamVoiceLine.tsx b/components/Dashboard/TeamVoiceLine.tsx
index e190c26..9fd76f2 100644
--- a/components/Dashboard/TeamVoiceLine.tsx
+++ b/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">
+    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md w-96 shrink-0 max-h-[32rem]">
       <span className="flex flex-row justify-start items-center pb-5">
         <span className="flex flex-col">
           <span className="text-white">TEAM</span>
diff --git a/components/OfficeCard.tsx b/components/OfficeCard.tsx
index 99fd813..7ef6d15 100644
--- a/components/OfficeCard.tsx
+++ b/components/OfficeCard.tsx
@@ -1,30 +1,49 @@
 import { Avatar } from "antd";
+import { useAuth } from "../contexts/authContext";
+import { useTeamDashboardContext } from "../contexts/teamDashboardContext";
 import OfficeRoom, { OfficeRoomState } from "../models/officeRoom";
+import { User } from "../models/user";
 
 interface IOfficeCard {
   officeRoom: OfficeRoom;
 }
 
 export default function OfficeCard(props: IOfficeCard) {
+  const { currUser } = useAuth();
+  const { teamUsersMap, user } = useTeamDashboardContext();
+
+  var allMembersInRoom = props.officeRoom.members?.reduce((results, userId) => {
+    if (userId in teamUsersMap) {
+      results.push(teamUsersMap[userId]);
+    }
+
+    if (userId == currUser.uid) {
+      results.push(user);
+    }
+
+    return results;
+  }, [] as User[]);
+
   return (
     <span className="flex flex-col">
       <span className="flex flex-row justify-start items-center">
-        {renderOfficePulse(OfficeRoomState.active)}
+        {renderOfficePulse(props.officeRoom.state)}
 
         {/* office location name */}
-        <span className="text-gray-200 text-lg font-semibold ml-2">
+        <span className="text-gray-200 text-md font-semibold ml-2">
           {props.officeRoom.name}
         </span>
 
         {/* all members in room */}
         <span className="ml-auto">
           <Avatar.Group>
-            {props.officeRoom.members.map((officeLocation) => {
+            {allMembersInRoom.map((member) => {
               <Avatar
+                src={member.avatarUrl}
                 style={{ backgroundColor: "teal", verticalAlign: "middle" }}
                 className="shadow-xl hover:z-20 hover:cursor-pointer"
               >
-                {officeLocation[0]}
+                {member.nickName[0]}
               </Avatar>;
             })}
           </Avatar.Group>
@@ -35,7 +54,18 @@ export default function OfficeCard(props: IOfficeCard) {
 }
 
 function renderOfficePulse(officeRoomState: OfficeRoomState) {
-  return (
-    <span className="h-4 w-4 rounded-full bg-green-500 animate-pulse shadow-lg"></span>
-  );
+  switch (officeRoomState) {
+    case OfficeRoomState.active:
+      return (
+        <span className="h-4 w-4 rounded-full bg-green-500 animate-pulse shadow-lg"></span>
+      );
+    case OfficeRoomState.idle:
+      return (
+        <span className="h-4 w-4 rounded-full bg-gray-400 animate-pulse shadow-lg"></span>
+      );
+    default:
+      return (
+        <span className="h-4 w-4 rounded-full bg-gray-400 animate-pulse shadow-lg"></span>
+      );
+  }
 }
diff --git a/pages/teams/[teamid].tsx b/pages/teams/[teamid].tsx
index 8872263..1980a96 100644
--- a/pages/teams/[teamid].tsx
+++ b/pages/teams/[teamid].tsx
@@ -85,14 +85,14 @@ function TeamDashboard() {
     <div className="container mx-auto py-10 px-10 flex flex-col space-y-5">
       <Header />
 
-      <div className="flex flex-row items-baseline space-x-5 space-y-5">
-        <div className="flex flex-col max-w-sm space-y-5">
+      <div className="flex flex-row items-start space-x-5 h-[56rem]">
+        <div className="flex flex-col max-w-sm space-y-5 h-full">
           <TeamVoiceLine />
 
           <Office />
         </div>
 
-        <div className="flex flex-col space-y-5 flex-1 overflow-auto">
+        <div className="flex flex-col space-y-5 flex-1 h-full">
           <Announcements />
 
           <Rooms />