132 lines
4.2 KiB
TypeScript
132 lines
4.2 KiB
TypeScript
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() {
|
|
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>
|
|
);
|
|
}
|