adding a lot of ui changes and dynamic all
This commit is contained in:
Arjun Patel
+171
-370
@@ -9,13 +9,28 @@ import {
|
||||
ShowModalType,
|
||||
useKeyboardContext,
|
||||
} from "../../contexts/keyboardContext";
|
||||
import {
|
||||
collection,
|
||||
getFirestore,
|
||||
onSnapshot,
|
||||
orderBy,
|
||||
query,
|
||||
where,
|
||||
} from "firebase/firestore";
|
||||
import { Collections } from "../../services/collections";
|
||||
import { useTeamDashboardContext } from "../../contexts/teamDashboardContext";
|
||||
import Room, { RoomType } from "../../models/room";
|
||||
import { useAuth } from "../../contexts/authContext";
|
||||
import { Radio } from "antd";
|
||||
import RoomCard from "../RoomCard";
|
||||
|
||||
enum RoomTypeFilter {
|
||||
all = "all",
|
||||
live = "live",
|
||||
me = "me",
|
||||
now = "now",
|
||||
scheduled = "scheduled",
|
||||
recurring = "recurring",
|
||||
expired = "expired",
|
||||
archived = "archived",
|
||||
}
|
||||
|
||||
enum RoomTimeFilter {
|
||||
@@ -24,21 +39,148 @@ enum RoomTimeFilter {
|
||||
month = "month",
|
||||
}
|
||||
|
||||
const db = getFirestore();
|
||||
|
||||
const lastWeek = new Date();
|
||||
lastWeek.setDate(lastWeek.getDate() - 7);
|
||||
|
||||
export default function DashboardRoom() {
|
||||
const { currUser } = useAuth();
|
||||
const { handleModalType } = useKeyboardContext();
|
||||
const { team } = useTeamDashboardContext();
|
||||
|
||||
const [roomsMap, setRoomsMap] = useState<Map<string, Room>>(
|
||||
new Map<string, Room>()
|
||||
);
|
||||
|
||||
// get rooms data realtime
|
||||
useEffect(() => {
|
||||
/**
|
||||
* QUERY:
|
||||
* all rooms in the past week
|
||||
* order createdDate desc
|
||||
*
|
||||
*/
|
||||
});
|
||||
const q = query(
|
||||
collection(db, Collections.rooms),
|
||||
where("teamId", "==", team.id),
|
||||
where("createdDate", ">", lastWeek),
|
||||
orderBy("createdDate", "desc")
|
||||
);
|
||||
|
||||
// return unsubscribe
|
||||
return onSnapshot(q, (snapshot) => {
|
||||
snapshot.docChanges().forEach((change) => {
|
||||
let updatedRoom = change.doc.data() as Room;
|
||||
updatedRoom.id = change.doc.id;
|
||||
|
||||
if (change.type === "added" || change.type === "modified") {
|
||||
console.log("New or updated room: ", updatedRoom);
|
||||
// update rooms map
|
||||
setRoomsMap((prevMap) => {
|
||||
return new Map(prevMap.set(updatedRoom.id, updatedRoom));
|
||||
});
|
||||
}
|
||||
if (change.type === "removed") {
|
||||
console.log("Removed room: ", updatedRoom);
|
||||
}
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
|
||||
// on CTRL + Q, new tab to google meet
|
||||
// on CTRL + V, show modal to create meeting with the link
|
||||
|
||||
const [selectedTabPane, setSelectedTabPane] = useState<string>(
|
||||
RoomTypeFilter.all
|
||||
);
|
||||
|
||||
// tab pane ui from scratch
|
||||
// function renderTabPane() {
|
||||
// return (
|
||||
// <span className="flex flex-row space-x-5 uppercase mr-5">
|
||||
// <span
|
||||
// onClick={() => setSelectedTabPane(RoomTypeFilter.all)}
|
||||
// className={`${
|
||||
// selectedTabPane == RoomTypeFilter.all
|
||||
// } underline underline-offset-8 decoration-white text-white hover:text-white hover:cursor-pointer`}
|
||||
// >
|
||||
// All
|
||||
// </span>
|
||||
|
||||
// <span
|
||||
// onClick={() => setSelectedTabPane(RoomTypeFilter.me)}
|
||||
// className="text-gray-300 hover:text-white hover:cursor-pointer"
|
||||
// >
|
||||
// Me
|
||||
// </span>
|
||||
|
||||
// <span
|
||||
// onClick={() => setSelectedTabPane(RoomTypeFilter.now)}
|
||||
// className="text-gray-300 hover:text-white hover:cursor-pointer"
|
||||
// >
|
||||
// Now
|
||||
// </span>
|
||||
|
||||
// <span
|
||||
// onClick={() => setSelectedTabPane(RoomTypeFilter.scheduled)}
|
||||
// className="text-gray-300 hover:text-white hover:cursor-pointer"
|
||||
// >
|
||||
// Scheduled
|
||||
// </span>
|
||||
|
||||
// <span
|
||||
// onClick={() => setSelectedTabPane(RoomTypeFilter.recurring)}
|
||||
// className="text-gray-300 hover:text-white hover:cursor-pointer"
|
||||
// >
|
||||
// Recurring
|
||||
// </span>
|
||||
|
||||
// <span
|
||||
// onClick={() => setSelectedTabPane(RoomTypeFilter.archived)}
|
||||
// className="text-gray-300 hover:text-white hover:cursor-pointer"
|
||||
// >
|
||||
// Archive
|
||||
// </span>
|
||||
// </span>
|
||||
// );
|
||||
// }
|
||||
|
||||
const allRooms = Array.from(roomsMap.values());
|
||||
|
||||
function getRoomContent() {
|
||||
// return data based on the selected filters
|
||||
switch (selectedTabPane) {
|
||||
case RoomTypeFilter.all:
|
||||
return allRooms;
|
||||
case RoomTypeFilter.me:
|
||||
const meRooms = allRooms.filter((room) =>
|
||||
room.members.includes(currUser.uid)
|
||||
);
|
||||
return meRooms;
|
||||
case RoomTypeFilter.now:
|
||||
const nowRooms = allRooms.filter((room) => room.type == RoomType.now);
|
||||
return nowRooms;
|
||||
case RoomTypeFilter.scheduled:
|
||||
const scheduledRooms = allRooms.filter(
|
||||
(room) => room.type == RoomType.scheduled
|
||||
);
|
||||
return scheduledRooms;
|
||||
case RoomTypeFilter.recurring:
|
||||
const recurringRooms = allRooms.filter(
|
||||
(room) => room.type == RoomType.recurring
|
||||
);
|
||||
return recurringRooms;
|
||||
case RoomTypeFilter.archived:
|
||||
const archivedRooms = allRooms.filter(
|
||||
(room) => room.type == RoomType.archived
|
||||
);
|
||||
return archivedRooms;
|
||||
default:
|
||||
return allRooms;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md">
|
||||
{/* modal for creating room */}
|
||||
@@ -56,32 +198,29 @@ export default function DashboardRoom() {
|
||||
</button>
|
||||
</span>
|
||||
|
||||
{/* tab pane */}
|
||||
<span className="flex flex-row space-x-5 uppercase mr-5">
|
||||
<span className="underline underline-offset-8 decoration-white text-white hover:text-white hover:cursor-pointer">
|
||||
All
|
||||
</span>
|
||||
|
||||
<span className="text-gray-300 hover:text-white hover:cursor-pointer">
|
||||
Me
|
||||
</span>
|
||||
|
||||
<span className="text-gray-300 hover:text-white hover:cursor-pointer">
|
||||
Now
|
||||
</span>
|
||||
|
||||
<span className="text-gray-300 hover:text-white hover:cursor-pointer">
|
||||
Scheduled
|
||||
</span>
|
||||
|
||||
<span className="text-gray-300 hover:text-white hover:cursor-pointer">
|
||||
Recurring
|
||||
</span>
|
||||
|
||||
<span className="text-gray-300 hover:text-white hover:cursor-pointer">
|
||||
Archive
|
||||
</span>
|
||||
</span>
|
||||
<Radio.Group
|
||||
value={selectedTabPane}
|
||||
onChange={(e) => setSelectedTabPane(e.target.value)}
|
||||
>
|
||||
<Radio.Button value={RoomTypeFilter.all}>
|
||||
{RoomTypeFilter.all}
|
||||
</Radio.Button>
|
||||
<Radio.Button value={RoomTypeFilter.me}>
|
||||
{RoomTypeFilter.me}
|
||||
</Radio.Button>
|
||||
<Radio.Button value={RoomTypeFilter.now}>
|
||||
{RoomTypeFilter.now}
|
||||
</Radio.Button>
|
||||
<Radio.Button value={RoomTypeFilter.scheduled}>
|
||||
{RoomTypeFilter.scheduled}
|
||||
</Radio.Button>
|
||||
<Radio.Button value={RoomTypeFilter.recurring}>
|
||||
{RoomTypeFilter.recurring}
|
||||
</Radio.Button>
|
||||
<Radio.Button value={RoomTypeFilter.archived}>
|
||||
{RoomTypeFilter.archived}
|
||||
</Radio.Button>
|
||||
</Radio.Group>
|
||||
|
||||
<span className="text-sm text-gray-300 flex flex-row items-center uppercase">
|
||||
Week <FaAngleDown />
|
||||
@@ -99,347 +238,9 @@ export default function DashboardRoom() {
|
||||
|
||||
{/* all rooms */}
|
||||
<span className="flex flex-row flex-wrap max-h-96 overflow-auto">
|
||||
{/* spontaneous bugs room */}
|
||||
<span className="flex flex-col bg-white bg-opacity-80 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip">
|
||||
{/* header */}
|
||||
<span className="flex flex-1 flex-row justify-between items-baseline space-x-1 p-5">
|
||||
{/* meeting details */}
|
||||
<span className="flex flex-col items-baseline max-w-xs pr-10">
|
||||
<span className="text-gray-500 font-semibold mr-auto">
|
||||
bug fixing
|
||||
</span>
|
||||
<span className="text-xs text-gray-400 overflow-wrap">
|
||||
were just fixing that jsx bug thats a paiiinnnn
|
||||
</span>
|
||||
|
||||
{/* badges and tags */}
|
||||
<span className="flex flex-row flex-wrap">
|
||||
<span className="text-xs m-1 text-white bg-red-400 p-1 rounded-md font-bold flex flex-row items-center">
|
||||
<span>blockers</span>
|
||||
</span>
|
||||
|
||||
<span className="text-xs m-1 text-white bg-indigo-400 p-1 rounded-md font-bold flex flex-row items-center">
|
||||
<span>engineering</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* room status */}
|
||||
<span className="flex flex-col items-end space-y-1 justify-between h-full">
|
||||
<span
|
||||
className="text-xs bg-red-500
|
||||
text-white font-bold p-1 rounded-md flex flex-row space-x-2 items-center"
|
||||
>
|
||||
<FaClock />
|
||||
<span>live</span>
|
||||
</span>
|
||||
|
||||
{/* room attachments */}
|
||||
<span className="flex flex-row space-x-2">
|
||||
<button className="bg-gray-400 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40">
|
||||
<FaLink className="text-sm text-gray-400" />
|
||||
</button>
|
||||
|
||||
<button className="bg-gray-400 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40">
|
||||
<FaLink className="text-sm text-gray-400" />
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* footer */}
|
||||
<span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
|
||||
<span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
|
||||
<span className="relative flex">
|
||||
<span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
|
||||
<Image
|
||||
className=""
|
||||
src={
|
||||
"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-20.svg"
|
||||
}
|
||||
alt="profile"
|
||||
width={30}
|
||||
height={30}
|
||||
/>
|
||||
</span>
|
||||
<span className="-mr-4 relative flex">
|
||||
<span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
|
||||
<Image
|
||||
className=""
|
||||
src={
|
||||
"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg"
|
||||
}
|
||||
alt="profile"
|
||||
width={30}
|
||||
height={30}
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-xs text-gray-400">Arjun and Liam</span>
|
||||
<button className="ml-auto text-sm text-orange-500 font-semibold py-1 px-4 bg-gray-200 rounded">
|
||||
👋 Leave
|
||||
</button>
|
||||
<BsThreeDots className="text-white ml-2 hover:cursor-pointer" />{" "}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* live room - design meeting */}
|
||||
<span className="flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip">
|
||||
{/* header */}
|
||||
<span className="flex flex-row justify-between items-baseline space-x-1 p-5">
|
||||
{/* meeting details */}
|
||||
<span className="flex flex-col items-baseline max-w-xs pr-20">
|
||||
<span className="text-white font-semibold mr-auto">
|
||||
Shopping Cart Experience
|
||||
</span>
|
||||
<span className="text-xs text-gray-200 overflow-wrap">
|
||||
lets finish the mockups @josh, @mark, and @arjun please step in
|
||||
for feedback
|
||||
</span>
|
||||
|
||||
{/* badges and tags */}
|
||||
<span className="flex flex-row flex-wrap space-x-2">
|
||||
<span className="text-xs my-3 text-white bg-purple-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center">
|
||||
<span>design</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* room status */}
|
||||
<span className="flex flex-col items-end justify-between h-full">
|
||||
<span
|
||||
className="text-xs bg-red-500
|
||||
text-white font-bold p-1 rounded-md flex flex-row space-x-2 items-center"
|
||||
>
|
||||
<FaClock />
|
||||
<span>live</span>
|
||||
</span>
|
||||
<span className="text-gray-200 text-xs text-right mb-auto">
|
||||
on and off all day
|
||||
</span>
|
||||
|
||||
{/* room attachments */}
|
||||
<span className="flex flex-row space-x-2">
|
||||
<button className="bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40">
|
||||
<FaLink className="text-sm text-white" />
|
||||
</button>
|
||||
|
||||
<button className="bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40">
|
||||
<FaLink className="text-sm text-white" />
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* footer */}
|
||||
<span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
|
||||
<span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
|
||||
<span className="relative flex">
|
||||
<span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
|
||||
<Image
|
||||
className=""
|
||||
src={
|
||||
"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-06.svg"
|
||||
}
|
||||
alt="profile"
|
||||
width={30}
|
||||
height={30}
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="text-xs text-white">Adriana</span>
|
||||
|
||||
<button className="ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500">
|
||||
Join
|
||||
</button>
|
||||
|
||||
<BsThreeDots className="text-white ml-2 hover:cursor-pointer" />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* scheduled room - one on one */}
|
||||
<span className="flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip">
|
||||
{/* header */}
|
||||
<span className="flex flex-row justify-between items-baseline space-x-1 p-5">
|
||||
{/* meeting details */}
|
||||
<span className="flex flex-col items-baseline max-w-xs pr-20">
|
||||
<span className="text-white font-semibold mr-auto">
|
||||
Arjun and Paul - One on one
|
||||
</span>
|
||||
<span className="text-xs text-gray-200 overflow-wrap">
|
||||
performance review
|
||||
</span>
|
||||
|
||||
{/* badges and tags */}
|
||||
<span className="flex flex-row flex-wrap space-x-2">
|
||||
<span className="text-xs my-3 text-white bg-gray-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center">
|
||||
<span>private</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* room status */}
|
||||
<span className="flex flex-col items-end">
|
||||
<span className="text-blue-700 bg-blue-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1">
|
||||
<FaClock />
|
||||
<span>scheduled</span>
|
||||
</span>
|
||||
|
||||
<span className="text-gray-200 text-xs text-center">
|
||||
3ish? Ill ping you Arjun
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* footer */}
|
||||
<span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
|
||||
<button className="ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500">
|
||||
Join
|
||||
</button>
|
||||
<BsThreeDots className="text-white ml-2 hover:cursor-pointer" />{" "}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* recurring room - dsu */}
|
||||
<span className="flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip">
|
||||
{/* header */}
|
||||
<span className="flex flex-row justify-between items-baseline space-x-1 p-5">
|
||||
{/* meeting details */}
|
||||
<span className="flex flex-col items-baseline max-w-xs pr-20">
|
||||
<span className="text-white font-semibold mr-auto">
|
||||
Daily Standup
|
||||
</span>
|
||||
<span className="text-xs text-gray-200 overflow-wrap"></span>
|
||||
|
||||
{/* badges and tags */}
|
||||
<span className="flex flex-row flex-wrap space-x-2">
|
||||
<span className="text-xs my-3 text-white bg-cyan-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center">
|
||||
<span>scrum</span>
|
||||
</span>
|
||||
|
||||
<span className="text-xs my-3 text-white bg-indigo-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center">
|
||||
<span>engineering</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* room status */}
|
||||
<span className="flex flex-col items-center justify-start">
|
||||
<span className="text-yellow-700 bg-yellow-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1">
|
||||
<IoTimer />
|
||||
<span>recurring</span>
|
||||
</span>
|
||||
|
||||
<span className="text-gray-200 text-xs">10am daily</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* footer */}
|
||||
<span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
|
||||
<button className="ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500">
|
||||
Join
|
||||
</button>
|
||||
<button className="bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
|
||||
<FaBell className="text-sm text-orange-500" />
|
||||
</button>
|
||||
<BsThreeDots className="text-white ml-2 hover:cursor-pointer" />{" "}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* recurring room - demo */}
|
||||
<span className="flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip">
|
||||
{/* header */}
|
||||
<span className="flex flex-row justify-between items-baseline space-x-1 p-5">
|
||||
{/* meeting details */}
|
||||
<span className="flex flex-col items-baseline max-w-xs pr-20">
|
||||
<span className="text-white font-semibold mr-auto">
|
||||
Sprint Demo
|
||||
</span>
|
||||
<span className="text-xs text-gray-200 overflow-wrap">
|
||||
all hands on deck...lets have fun :)
|
||||
</span>
|
||||
|
||||
{/* badges and tags */}
|
||||
<span className="flex flex-row flex-wrap space-x-2">
|
||||
<span className="text-xs my-3 text-white bg-cyan-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center">
|
||||
<span>scrum</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* room status */}
|
||||
<span className="flex flex-col items-center justify-start">
|
||||
<span className="text-yellow-700 bg-yellow-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1">
|
||||
<IoTimer />
|
||||
<span>recurring</span>
|
||||
</span>
|
||||
|
||||
<span className="text-gray-200 text-xs text-center">
|
||||
biweekly fridays!
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* footer */}
|
||||
<span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
|
||||
<button className="ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500">
|
||||
Join
|
||||
</button>
|
||||
<button className="bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
|
||||
<FaBell className="text-sm text-orange-500" />
|
||||
</button>
|
||||
<BsThreeDots className="text-white ml-2 hover:cursor-pointer" />{" "}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* recurring room - wine wednesdays */}
|
||||
<span className="flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip">
|
||||
{/* header */}
|
||||
<span className="flex flex-row justify-between items-baseline space-x-1 p-5">
|
||||
{/* meeting details */}
|
||||
<span className="flex flex-col items-baseline max-w-xs pr-20">
|
||||
<span className="text-white font-semibold mr-auto">
|
||||
Wine Wednesdays
|
||||
</span>
|
||||
<span className="text-xs text-gray-200 overflow-wrap">
|
||||
@JOSH YOU BETTER COME
|
||||
</span>
|
||||
|
||||
{/* badges and tags */}
|
||||
<span className="flex flex-row flex-wrap space-x-2">
|
||||
<span className="text-xs my-3 text-white bg-lime-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center">
|
||||
<span>party 🎉</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* room status */}
|
||||
<span className="flex flex-col items-end">
|
||||
<span className="text-yellow-700 bg-yellow-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1">
|
||||
<IoTimer />
|
||||
<span>recurring</span>
|
||||
</span>
|
||||
|
||||
<span className="text-gray-200 text-xs text-right">
|
||||
wednesdays 7-9pm
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* footer */}
|
||||
<span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
|
||||
<button className="ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500">
|
||||
Join
|
||||
</button>
|
||||
|
||||
<button className="bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
|
||||
<FaBell className="text-sm text-orange-500" />
|
||||
</button>
|
||||
|
||||
<BsThreeDots className="text-white ml-2 hover:cursor-pointer" />
|
||||
</span>
|
||||
</span>
|
||||
{getRoomContent().map((room) => {
|
||||
return <RoomCard key={room.id} room={room} />;
|
||||
})}
|
||||
</span>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -18,7 +18,7 @@ const roomService = new RoomService();
|
||||
|
||||
export default function CreateRoomModal() {
|
||||
const { currUser } = useAuth();
|
||||
const { teamUsers } = useTeamDashboardContext();
|
||||
const { teamUsers, team } = useTeamDashboardContext();
|
||||
const { pastedLink, handleModalType, showModalType } = useKeyboardContext();
|
||||
|
||||
useEffect(() => {
|
||||
@@ -53,6 +53,7 @@ export default function CreateRoomModal() {
|
||||
newRoom.description = roomDescription;
|
||||
newRoom.name = roomName;
|
||||
newRoom.createdByUserId = currUser.uid;
|
||||
newRoom.teamId = team.id;
|
||||
|
||||
await roomService.createRoom(newRoom);
|
||||
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
import { BsThreeDots } from "react-icons/bs";
|
||||
import { FaBell, FaClock, FaLink } from "react-icons/fa";
|
||||
import { IoTimer } from "react-icons/io5";
|
||||
import Room from "../models/room";
|
||||
import RoomTypeTag from "./RoomTypeTag";
|
||||
import Image from "next/image";
|
||||
import { useAuth } from "../contexts/authContext";
|
||||
import { Tooltip } from "antd";
|
||||
|
||||
interface IRoomCardProps {
|
||||
room: Room;
|
||||
}
|
||||
export default function RoomCard(props: IRoomCardProps) {
|
||||
const { currUser } = useAuth();
|
||||
|
||||
// const x = {`${
|
||||
// props.room.membersInRoom?.includes(currUser.uid)
|
||||
// ? " bg-white bg-opacity-80"
|
||||
// : "bg-gray-300 bg-opacity-25"
|
||||
// }`}
|
||||
|
||||
var isUserInRoom: boolean;
|
||||
if (props.room.membersInRoom?.includes(currUser.uid)) {
|
||||
isUserInRoom = true;
|
||||
}
|
||||
|
||||
const membersInRoom = (
|
||||
<Tooltip title={"Arjun and Liam"}>
|
||||
<span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
|
||||
<span className="relative flex">
|
||||
<span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
|
||||
<Image
|
||||
className=""
|
||||
src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-20.svg"}
|
||||
alt="profile"
|
||||
width={30}
|
||||
height={30}
|
||||
/>
|
||||
</span>
|
||||
<span className="-mr-4 relative flex">
|
||||
<span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
|
||||
<Image
|
||||
className=""
|
||||
src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg"}
|
||||
alt="profile"
|
||||
width={30}
|
||||
height={30}
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
return (
|
||||
<span
|
||||
className={`flex flex-col ${
|
||||
isUserInRoom ? " bg-white bg-opacity-80" : "bg-gray-300 bg-opacity-25"
|
||||
} rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip`}
|
||||
>
|
||||
{/* header */}
|
||||
<span className="flex flex-row justify-between items-baseline space-x-1 p-5">
|
||||
{/* meeting details */}
|
||||
<span className="flex flex-col items-baseline max-w-xs pr-20">
|
||||
<span
|
||||
className={`${
|
||||
isUserInRoom ? " text-gray-500" : "text-white"
|
||||
} font-semibold mr-auto`}
|
||||
>
|
||||
{props.room.name}
|
||||
</span>
|
||||
<span
|
||||
className={`${
|
||||
isUserInRoom ? " text-gray-400" : "text-gray-200"
|
||||
} text-xs overflow-wrap`}
|
||||
>
|
||||
{props.room.description}
|
||||
</span>
|
||||
|
||||
{/* badges and tags */}
|
||||
{/* <span className="flex flex-row flex-wrap space-x-2">
|
||||
<span className="text-xs my-3 text-white bg-cyan-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center">
|
||||
<span>scrum</span>
|
||||
</span>
|
||||
</span> */}
|
||||
</span>
|
||||
|
||||
{/* room status and link(s) */}
|
||||
<span className="flex flex-col items-end space-y-1 justify-between h-full">
|
||||
<RoomTypeTag roomType={props.room.type} />
|
||||
|
||||
{/* room attachments */}
|
||||
<span className="flex flex-row space-x-2">
|
||||
{props.room.attachments && props.room.attachments.length > 0 && (
|
||||
<button
|
||||
onClick={() => window.open(props.room.attachments[0], "_blank")}
|
||||
className={`${
|
||||
isUserInRoom
|
||||
? " bg-gray-400 bg-opacity-25 text-gray-400"
|
||||
: "bg-gray-300 bg-opacity-25 text-white"
|
||||
} bg-gray-400 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40`}
|
||||
>
|
||||
<FaLink className="text-sm" />
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* footer */}
|
||||
<span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
|
||||
{membersInRoom}
|
||||
<button className="ml-auto text-sm text-orange-500 font-semibold py-1 px-4 bg-gray-200 rounded">
|
||||
👋 Leave
|
||||
</button>
|
||||
<BsThreeDots className="text-white ml-2 hover:cursor-pointer" />{" "}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import { FaClock } from "react-icons/fa";
|
||||
import { IoTimer } from "react-icons/io5";
|
||||
import { RoomType } from "../models/room";
|
||||
|
||||
interface RoomTypeTagProps {
|
||||
roomType: RoomType;
|
||||
}
|
||||
|
||||
export default function RoomTypeTag(props: RoomTypeTagProps) {
|
||||
switch (props.roomType) {
|
||||
case RoomType.now:
|
||||
return (
|
||||
<span
|
||||
className="text-xs bg-red-500
|
||||
text-white font-bold p-1 rounded-md flex flex-row space-x-2 items-center"
|
||||
>
|
||||
<FaClock />
|
||||
<span>live</span>
|
||||
</span>
|
||||
);
|
||||
|
||||
case RoomType.scheduled:
|
||||
return (
|
||||
<span className="text-blue-700 bg-blue-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1">
|
||||
<FaClock />
|
||||
<span>scheduled</span>
|
||||
</span>
|
||||
);
|
||||
|
||||
case RoomType.recurring:
|
||||
return (
|
||||
<span className="text-yellow-700 bg-yellow-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1">
|
||||
<IoTimer />
|
||||
<span>recurring</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -14,6 +14,7 @@ import toast from "react-hot-toast";
|
||||
import Loading from "../components/Loading";
|
||||
import { compareStatus } from "../helpers/userHelper";
|
||||
import { Message } from "../models/message";
|
||||
import Room from "../models/room";
|
||||
import { Team } from "../models/team";
|
||||
import { TeamMember, TeamMemberStatus } from "../models/teamMember";
|
||||
import { User } from "../models/user";
|
||||
@@ -225,7 +226,7 @@ export function TeamDashboardContextProvider({ children }) {
|
||||
const [allMessages, setAllMessages] = useState<Message[]>([]);
|
||||
const [messagesByTeamMate, setMessagesByTeamMate] = useState<{}>({});
|
||||
|
||||
// listener for all incoming messages
|
||||
// SECTION: REALTIME listener for all incoming messages
|
||||
useEffect(() => {
|
||||
// todo for new messages, change document.title
|
||||
|
||||
@@ -249,7 +250,6 @@ export function TeamDashboardContextProvider({ children }) {
|
||||
// messages won't be deleted or updated really
|
||||
if (change.type === "added") {
|
||||
let newMessage = change.doc.data() as Message;
|
||||
console.log("New message: ", newMessage);
|
||||
|
||||
// update all messages array
|
||||
setAllMessages((prevMessages) => [newMessage, ...prevMessages]);
|
||||
|
||||
@@ -10,6 +10,8 @@ export default class Room {
|
||||
|
||||
members: string[]; //userIds of "mandatory"/invited people including the person who created it
|
||||
|
||||
membersInRoom: string[];
|
||||
|
||||
attachments: string[]; // the links themselves (NOT Ids)...there will be duplicate entries in the attachments table which will be created
|
||||
|
||||
type: RoomType;
|
||||
@@ -18,10 +20,13 @@ export default class Room {
|
||||
|
||||
createdDate: Timestamp;
|
||||
createdByUserId: string;
|
||||
|
||||
teamId: string;
|
||||
}
|
||||
|
||||
export enum RoomType {
|
||||
now = "now",
|
||||
scheduled = "scheduled", // one time sort of standard meeting
|
||||
recurring = "recurring", //daily standup
|
||||
archived = "archived", // this room is dead or over
|
||||
}
|
||||
|
||||
@@ -78,8 +78,6 @@ function TeamDashboard() {
|
||||
};
|
||||
}, []);
|
||||
|
||||
console.log(teamDashboardContext);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto py-10 px-10 flex flex-col space-y-5">
|
||||
<Header />
|
||||
|
||||
@@ -621,8 +621,9 @@ export default function Dashboard() {
|
||||
<FaBell className='text-sm text-orange-500' />
|
||||
</button>
|
||||
|
||||
<BsThreeDots className='text-white ml-2 hover:cursor-pointer' /> </span>
|
||||
</span>
|
||||
<BsThreeDots className='text-white ml-2 hover:cursor-pointer' />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* recurring room - wine wednesdays */}
|
||||
<span className='flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip'>
|
||||
|
||||
@@ -105,6 +105,16 @@ p {
|
||||
@apply text-white bg-white !important;
|
||||
}
|
||||
|
||||
.ant-radio-button-wrapper {
|
||||
@apply bg-transparent text-gray-200 !important;
|
||||
}
|
||||
.ant-radio-button-checked {
|
||||
@apply bg-white text-black !important;
|
||||
}
|
||||
.ant-radio-button-wrapper-checked {
|
||||
@apply bg-white text-black rounded !important;
|
||||
}
|
||||
|
||||
/* scrollbar customization */
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
|
||||
Reference in New Issue
Block a user