adding a lot of ui changes and dynamic all
This commit is contained in:
Arjun Patel
+171
-370
@@ -9,13 +9,28 @@ import {
|
|||||||
ShowModalType,
|
ShowModalType,
|
||||||
useKeyboardContext,
|
useKeyboardContext,
|
||||||
} from "../../contexts/keyboardContext";
|
} 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 {
|
enum RoomTypeFilter {
|
||||||
all = "all",
|
all = "all",
|
||||||
live = "live",
|
me = "me",
|
||||||
|
now = "now",
|
||||||
scheduled = "scheduled",
|
scheduled = "scheduled",
|
||||||
recurring = "recurring",
|
recurring = "recurring",
|
||||||
expired = "expired",
|
archived = "archived",
|
||||||
}
|
}
|
||||||
|
|
||||||
enum RoomTimeFilter {
|
enum RoomTimeFilter {
|
||||||
@@ -24,21 +39,148 @@ enum RoomTimeFilter {
|
|||||||
month = "month",
|
month = "month",
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const db = getFirestore();
|
||||||
|
|
||||||
|
const lastWeek = new Date();
|
||||||
|
lastWeek.setDate(lastWeek.getDate() - 7);
|
||||||
|
|
||||||
export default function DashboardRoom() {
|
export default function DashboardRoom() {
|
||||||
|
const { currUser } = useAuth();
|
||||||
const { handleModalType } = useKeyboardContext();
|
const { handleModalType } = useKeyboardContext();
|
||||||
|
const { team } = useTeamDashboardContext();
|
||||||
|
|
||||||
|
const [roomsMap, setRoomsMap] = useState<Map<string, Room>>(
|
||||||
|
new Map<string, Room>()
|
||||||
|
);
|
||||||
|
|
||||||
// get rooms data realtime
|
// get rooms data realtime
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
/**
|
/**
|
||||||
* QUERY:
|
* QUERY:
|
||||||
* all rooms in the past week
|
* 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 + Q, new tab to google meet
|
||||||
// on CTRL + V, show modal to create meeting with the link
|
// 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 (
|
return (
|
||||||
<section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md">
|
<section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md">
|
||||||
{/* modal for creating room */}
|
{/* modal for creating room */}
|
||||||
@@ -56,32 +198,29 @@ export default function DashboardRoom() {
|
|||||||
</button>
|
</button>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
{/* tab pane */}
|
<Radio.Group
|
||||||
<span className="flex flex-row space-x-5 uppercase mr-5">
|
value={selectedTabPane}
|
||||||
<span className="underline underline-offset-8 decoration-white text-white hover:text-white hover:cursor-pointer">
|
onChange={(e) => setSelectedTabPane(e.target.value)}
|
||||||
All
|
>
|
||||||
</span>
|
<Radio.Button value={RoomTypeFilter.all}>
|
||||||
|
{RoomTypeFilter.all}
|
||||||
<span className="text-gray-300 hover:text-white hover:cursor-pointer">
|
</Radio.Button>
|
||||||
Me
|
<Radio.Button value={RoomTypeFilter.me}>
|
||||||
</span>
|
{RoomTypeFilter.me}
|
||||||
|
</Radio.Button>
|
||||||
<span className="text-gray-300 hover:text-white hover:cursor-pointer">
|
<Radio.Button value={RoomTypeFilter.now}>
|
||||||
Now
|
{RoomTypeFilter.now}
|
||||||
</span>
|
</Radio.Button>
|
||||||
|
<Radio.Button value={RoomTypeFilter.scheduled}>
|
||||||
<span className="text-gray-300 hover:text-white hover:cursor-pointer">
|
{RoomTypeFilter.scheduled}
|
||||||
Scheduled
|
</Radio.Button>
|
||||||
</span>
|
<Radio.Button value={RoomTypeFilter.recurring}>
|
||||||
|
{RoomTypeFilter.recurring}
|
||||||
<span className="text-gray-300 hover:text-white hover:cursor-pointer">
|
</Radio.Button>
|
||||||
Recurring
|
<Radio.Button value={RoomTypeFilter.archived}>
|
||||||
</span>
|
{RoomTypeFilter.archived}
|
||||||
|
</Radio.Button>
|
||||||
<span className="text-gray-300 hover:text-white hover:cursor-pointer">
|
</Radio.Group>
|
||||||
Archive
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span className="text-sm text-gray-300 flex flex-row items-center uppercase">
|
<span className="text-sm text-gray-300 flex flex-row items-center uppercase">
|
||||||
Week <FaAngleDown />
|
Week <FaAngleDown />
|
||||||
@@ -99,347 +238,9 @@ export default function DashboardRoom() {
|
|||||||
|
|
||||||
{/* all rooms */}
|
{/* all rooms */}
|
||||||
<span className="flex flex-row flex-wrap max-h-96 overflow-auto">
|
<span className="flex flex-row flex-wrap max-h-96 overflow-auto">
|
||||||
{/* spontaneous bugs room */}
|
{getRoomContent().map((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">
|
return <RoomCard key={room.id} room={room} />;
|
||||||
{/* 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>
|
|
||||||
</span>
|
</span>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ const roomService = new RoomService();
|
|||||||
|
|
||||||
export default function CreateRoomModal() {
|
export default function CreateRoomModal() {
|
||||||
const { currUser } = useAuth();
|
const { currUser } = useAuth();
|
||||||
const { teamUsers } = useTeamDashboardContext();
|
const { teamUsers, team } = useTeamDashboardContext();
|
||||||
const { pastedLink, handleModalType, showModalType } = useKeyboardContext();
|
const { pastedLink, handleModalType, showModalType } = useKeyboardContext();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -53,6 +53,7 @@ export default function CreateRoomModal() {
|
|||||||
newRoom.description = roomDescription;
|
newRoom.description = roomDescription;
|
||||||
newRoom.name = roomName;
|
newRoom.name = roomName;
|
||||||
newRoom.createdByUserId = currUser.uid;
|
newRoom.createdByUserId = currUser.uid;
|
||||||
|
newRoom.teamId = team.id;
|
||||||
|
|
||||||
await roomService.createRoom(newRoom);
|
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 Loading from "../components/Loading";
|
||||||
import { compareStatus } from "../helpers/userHelper";
|
import { compareStatus } from "../helpers/userHelper";
|
||||||
import { Message } from "../models/message";
|
import { Message } from "../models/message";
|
||||||
|
import Room from "../models/room";
|
||||||
import { Team } from "../models/team";
|
import { Team } from "../models/team";
|
||||||
import { TeamMember, TeamMemberStatus } from "../models/teamMember";
|
import { TeamMember, TeamMemberStatus } from "../models/teamMember";
|
||||||
import { User } from "../models/user";
|
import { User } from "../models/user";
|
||||||
@@ -225,7 +226,7 @@ export function TeamDashboardContextProvider({ children }) {
|
|||||||
const [allMessages, setAllMessages] = useState<Message[]>([]);
|
const [allMessages, setAllMessages] = useState<Message[]>([]);
|
||||||
const [messagesByTeamMate, setMessagesByTeamMate] = useState<{}>({});
|
const [messagesByTeamMate, setMessagesByTeamMate] = useState<{}>({});
|
||||||
|
|
||||||
// listener for all incoming messages
|
// SECTION: REALTIME listener for all incoming messages
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// todo for new messages, change document.title
|
// todo for new messages, change document.title
|
||||||
|
|
||||||
@@ -249,7 +250,6 @@ export function TeamDashboardContextProvider({ children }) {
|
|||||||
// messages won't be deleted or updated really
|
// messages won't be deleted or updated really
|
||||||
if (change.type === "added") {
|
if (change.type === "added") {
|
||||||
let newMessage = change.doc.data() as Message;
|
let newMessage = change.doc.data() as Message;
|
||||||
console.log("New message: ", newMessage);
|
|
||||||
|
|
||||||
// update all messages array
|
// update all messages array
|
||||||
setAllMessages((prevMessages) => [newMessage, ...prevMessages]);
|
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
|
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
|
attachments: string[]; // the links themselves (NOT Ids)...there will be duplicate entries in the attachments table which will be created
|
||||||
|
|
||||||
type: RoomType;
|
type: RoomType;
|
||||||
@@ -18,10 +20,13 @@ export default class Room {
|
|||||||
|
|
||||||
createdDate: Timestamp;
|
createdDate: Timestamp;
|
||||||
createdByUserId: string;
|
createdByUserId: string;
|
||||||
|
|
||||||
|
teamId: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export enum RoomType {
|
export enum RoomType {
|
||||||
now = "now",
|
now = "now",
|
||||||
scheduled = "scheduled", // one time sort of standard meeting
|
scheduled = "scheduled", // one time sort of standard meeting
|
||||||
recurring = "recurring", //daily standup
|
recurring = "recurring", //daily standup
|
||||||
|
archived = "archived", // this room is dead or over
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -78,8 +78,6 @@ function TeamDashboard() {
|
|||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
console.log(teamDashboardContext);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto py-10 px-10 flex flex-col space-y-5">
|
<div className="container mx-auto py-10 px-10 flex flex-col space-y-5">
|
||||||
<Header />
|
<Header />
|
||||||
|
|||||||
@@ -621,8 +621,9 @@ export default function Dashboard() {
|
|||||||
<FaBell className='text-sm text-orange-500' />
|
<FaBell className='text-sm text-orange-500' />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<BsThreeDots className='text-white ml-2 hover:cursor-pointer' /> </span>
|
<BsThreeDots className='text-white ml-2 hover:cursor-pointer' />
|
||||||
</span>
|
</span>
|
||||||
|
</span>
|
||||||
|
|
||||||
{/* recurring room - wine wednesdays */}
|
{/* 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'>
|
<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;
|
@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 */
|
/* scrollbar customization */
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 5px;
|
width: 5px;
|
||||||
|
|||||||
Reference in New Issue
Block a user