adding stale state

components/Dashboard/Header.tsx

@@ -17,10 +17,11 @@ import { User } from "../../models/user";
 import { generateGreetings } from "../../helpers/dateTime";
 import { Dropdown, Menu } from "antd";
 import { useRouter } from "next/router";
+import { TeamMemberRole, TeamMemberStatus } from "../../models/teamMember";
 
 export default function Header() {
   const { logOut } = useAuth();
-  const { team, user } = useTeamDashboardContext();
+  const { team, user, userTeamMember } = useTeamDashboardContext();
   const router = useRouter();
   const { teamid } = router.query;
 
@@ -38,17 +39,42 @@ export default function Header() {
 
   const UserMenu = (
     <Menu>
-      <Menu.Item>
+      {userTeamMember.role == TeamMemberRole.admin && (
-        <button onClick={() => router.push("/teams/" + teamid + "/admin")}>
+        <Menu.Item key={1}>
-          manage team
+          <button onClick={() => router.push("/teams/" + teamid + "/admin")}>
-        </button>
+            manage team
-      </Menu.Item>
+          </button>
-      <Menu.Item danger>
+        </Menu.Item>
+      )}
+
+      <Menu.Item danger key={2}>
         <button onClick={handleSignOut}>sign out</button>
       </Menu.Item>
     </Menu>
   );
 
+  const searchBar = (
+    <div className="pt-2 flex flex-row relative items-center">
+      <button type="submit" className="absolute left-0 top-0 mt-5 ml-5">
+        <FaSearch className="text-white" />
+      </button>
+
+      <input
+        className=" bg-white bg-opacity-40 h-10 px-5 pl-10 pr-16 rounded-lg text-white text-sm focus:outline-none"
+        type="search"
+        name="search"
+        placeholder="Search"
+      />
+
+      <button
+        className="absolute right-1 rounded-lg py-1 px-2 ml-1 
+                                    shadow-md text-center text-white text-sm font-bold"
+      >
+        CTRL + K
+      </button>
+    </div>
+  );
+
   const today = new Date();
   const periodOfDay = generateGreetings();
   return (
@@ -80,32 +106,7 @@ export default function Header() {
 
       {/* header control section */}
       <span className="flex flex-row items-center space-x-5">
-        <button
-          onClick={handleSignOut}
-          className="mt-10 text-sm text-orange-500 font-semibold py-1 px-4 bg-orange-200 rounded"
-        >
-          👋 Logout
-        </button>
         {/* search bar */}
-        <div className="pt-2 flex flex-row relative items-center">
-          <button type="submit" className="absolute left-0 top-0 mt-5 ml-5">
-            <FaSearch className="text-white" />
-          </button>
-
-          <input
-            className=" bg-white bg-opacity-40 h-10 px-5 pl-10 pr-16 rounded-lg text-white text-sm focus:outline-none"
-            type="search"
-            name="search"
-            placeholder="Search"
-          />
-
-          <button
-            className="absolute right-1 rounded-lg py-1 px-2 ml-1 
-                                    shadow-md text-center text-white text-sm font-bold"
-          >
-            CTRL + K
-          </button>
-        </div>
 
         <FaBell className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
         <FaHeadphonesAlt className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />

components/Dashboard/TeamVoiceLine.tsx

@@ -1,3 +1,131 @@
+import { useRouter } from "next/router";
+import { FaPlus } from "react-icons/fa";
+import { IoPulseOutline, IoRemoveOutline, IoTimer } from "react-icons/io5";
+import { BsThreeDots } from "react-icons/bs";
+import { useTeamDashboardContext } from "../../contexts/teamDashboardContext";
+import { UserStatus } from "../../models/user";
+import { useState } from "react";
+
 export default function TeamVoiceLine() {
-  return <div>rooms</div>;
+  const router = useRouter();
+  const { teamid } = router.query;
+  const { teamMembers } = useTeamDashboardContext();
+  const [loading, setLoading] = useState<Boolean>(true);
+
+  //listeners for all teammates' status
+
+  function statusBubble(status: UserStatus) {
+    console.log(status);
+
+    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-green-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-green-400 text-2xl animate-pulse mx-2 ml-auto" />
+        );
+    }
+  }
+
+  function renderTeamMemberList() {
+    // show loading skeleton if not yet got friend info
+    if (loading) {
+      return (
+        <div className="w-full h-24 flex animate-pulse flex-row items-center justify-center space-x-5">
+          <div className="w-12 bg-gray-300 h-12 rounded-full "></div>
+          <div className="flex flex-col space-y-3">
+            <div className="w-60 bg-gray-300 h-6 rounded-md "></div>
+            <div className="w-40 bg-gray-300 h-6 rounded-md "></div>
+          </div>
+        </div>
+      );
+    }
+
+    // if not teammates, stale state message to tell admin to add people
+    if (!teamMembers.length) {
+    }
+
+    return teamMembers.map((tmember, i) => {
+      return (
+        <span
+          key={i}
+          className={
+            "flex flex-row items-center py-2 px-2 justify-items-start ease-in-out duration-300"
+          }
+        >
+          <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(UserStatus.online)}
+
+            <img src={""} alt="asdf" className="rounded-full w-12" />
+          </span>
+
+          <span className="flex flex-col mr-10">
+            <span className="flex flex-row items-center space-x-2">
+              <span className="text-sm text-white font-bold">
+                {tmember.inviteEmailAddress}
+              </span>
+            </span>
+
+            <span className={"text-xs span-sans text-gray-300"}>
+              {tmember.role}
+            </span>
+          </span>
+
+          {renderPulse(UserStatus.online)}
+        </span>
+      );
+    });
+  }
+
+  return (
+    <section className="p-5 flex flex-col w-full max-w-sm bg-gray-100 bg-opacity-25 rounded-lg shadow-md">
+      <span className="flex flex-row justify-start items-center pb-5">
+        <span className="flex flex-col">
+          <span className="text-white">TEAM</span>
+        </span>
+
+        <button
+          onClick={() => router.push("/team/" + teamid + "/admin")}
+          className="bg-gray-300 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40"
+        >
+          <FaPlus className="text-lg text-white" />
+        </button>
+      </span>
+      {/* list of team members */}
+      {renderTeamMemberList()}
+    </section>
+  );
 }

pages/teams/[teamid].tsx

@@ -2,6 +2,7 @@ import { GetServerSidePropsContext, GetServerSidePropsResult } from "next";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import Header from "../../components/Dashboard/Header";
+import TeamVoiceLine from "../../components/Dashboard/TeamVoiceLine";
 import BackgroundLayout from "../../components/Layouts/BackgroundLayout";
 import Loading from "../../components/Loading";
 import { useAuth } from "../../contexts/authContext";
@@ -23,6 +24,10 @@ function TeamDashboard() {
   return (
     <div className="container mx-auto max-w-screen-xl py-10 px-10 flex flex-col space-y-5">
       <Header />
+
+      <div className="flex flex-row items-baseline space-x-5 space-y-5 flex-wrap">
+        <TeamVoiceLine />
+      </div>
     </div>
   );
 }