From 8f094fd6158054c5e73b3b97d7c4c25f75f47b7b Mon Sep 17 00:00:00 2001 From: Arjun Patel Date: Mon, 17 Jan 2022 14:09:10 -0800 Subject: [PATCH] adding a lot of ui changes and dynamic all --- components/Dashboard/Rooms.tsx | 541 ++++++++++-------------------- components/Modals/CreateRoom.tsx | 3 +- components/RoomCard.tsx | 119 +++++++ components/RoomTypeTag.tsx | 38 +++ contexts/teamDashboardContext.tsx | 4 +- models/room.ts | 5 + pages/teams/[teamid].tsx | 2 - pages/teams/dashboard.tsx | 5 +- styles/globals.css | 10 + 9 files changed, 350 insertions(+), 377 deletions(-) create mode 100644 components/RoomCard.tsx create mode 100644 components/RoomTypeTag.tsx diff --git a/components/Dashboard/Rooms.tsx b/components/Dashboard/Rooms.tsx index 862b39b..146f45c 100644 --- a/components/Dashboard/Rooms.tsx +++ b/components/Dashboard/Rooms.tsx @@ -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>( + new Map() + ); // 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( + RoomTypeFilter.all + ); + + // tab pane ui from scratch + // function renderTabPane() { + // return ( + // + // setSelectedTabPane(RoomTypeFilter.all)} + // className={`${ + // selectedTabPane == RoomTypeFilter.all + // } underline underline-offset-8 decoration-white text-white hover:text-white hover:cursor-pointer`} + // > + // All + // + + // setSelectedTabPane(RoomTypeFilter.me)} + // className="text-gray-300 hover:text-white hover:cursor-pointer" + // > + // Me + // + + // setSelectedTabPane(RoomTypeFilter.now)} + // className="text-gray-300 hover:text-white hover:cursor-pointer" + // > + // Now + // + + // setSelectedTabPane(RoomTypeFilter.scheduled)} + // className="text-gray-300 hover:text-white hover:cursor-pointer" + // > + // Scheduled + // + + // setSelectedTabPane(RoomTypeFilter.recurring)} + // className="text-gray-300 hover:text-white hover:cursor-pointer" + // > + // Recurring + // + + // setSelectedTabPane(RoomTypeFilter.archived)} + // className="text-gray-300 hover:text-white hover:cursor-pointer" + // > + // Archive + // + // + // ); + // } + + 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 (
{/* modal for creating room */} @@ -56,32 +198,29 @@ export default function DashboardRoom() { - {/* tab pane */} - - - All - - - - Me - - - - Now - - - - Scheduled - - - - Recurring - - - - Archive - - + setSelectedTabPane(e.target.value)} + > + + {RoomTypeFilter.all} + + + {RoomTypeFilter.me} + + + {RoomTypeFilter.now} + + + {RoomTypeFilter.scheduled} + + + {RoomTypeFilter.recurring} + + + {RoomTypeFilter.archived} + + Week @@ -99,347 +238,9 @@ export default function DashboardRoom() { {/* all rooms */} - {/* spontaneous bugs room */} - - {/* header */} - - {/* meeting details */} - - - bug fixing - - - were just fixing that jsx bug thats a paiiinnnn - - - {/* badges and tags */} - - - blockers - - - - engineering - - - - - {/* room status */} - - - - live - - - {/* room attachments */} - - - - - - - - - {/* footer */} - - - - - profile - - - - profile - - - Arjun and Liam - - {" "} - - - - {/* live room - design meeting */} - - {/* header */} - - {/* meeting details */} - - - Shopping Cart Experience - - - lets finish the mockups @josh, @mark, and @arjun please step in - for feedback - - - {/* badges and tags */} - - - design - - - - - {/* room status */} - - - - live - - - on and off all day - - - {/* room attachments */} - - - - - - - - - {/* footer */} - - - - - profile - - - - Adriana - - - - - - - - {/* scheduled room - one on one */} - - {/* header */} - - {/* meeting details */} - - - Arjun and Paul - One on one - - - performance review - - - {/* badges and tags */} - - - private - - - - - {/* room status */} - - - - scheduled - - - - 3ish? Ill ping you Arjun - - - - - {/* footer */} - - - {" "} - - - - {/* recurring room - dsu */} - - {/* header */} - - {/* meeting details */} - - - Daily Standup - - - - {/* badges and tags */} - - - scrum - - - - engineering - - - - - {/* room status */} - - - - recurring - - - 10am daily - - - - {/* footer */} - - - - {" "} - - - - {/* recurring room - demo */} - - {/* header */} - - {/* meeting details */} - - - Sprint Demo - - - all hands on deck...lets have fun :) - - - {/* badges and tags */} - - - scrum - - - - - {/* room status */} - - - - recurring - - - - biweekly fridays! - - - - - {/* footer */} - - - - {" "} - - - - {/* recurring room - wine wednesdays */} - - {/* header */} - - {/* meeting details */} - - - Wine Wednesdays - - - @JOSH YOU BETTER COME - - - {/* badges and tags */} - - - party 🎉 - - - - - {/* room status */} - - - - recurring - - - - wednesdays 7-9pm - - - - - {/* footer */} - - - - - - - - + {getRoomContent().map((room) => { + return ; + })}
); diff --git a/components/Modals/CreateRoom.tsx b/components/Modals/CreateRoom.tsx index cb0391e..718a65f 100644 --- a/components/Modals/CreateRoom.tsx +++ b/components/Modals/CreateRoom.tsx @@ -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); diff --git a/components/RoomCard.tsx b/components/RoomCard.tsx new file mode 100644 index 0000000..efe6f69 --- /dev/null +++ b/components/RoomCard.tsx @@ -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 = ( + + + + + profile + + + + profile + + + + ); + + return ( + + {/* header */} + + {/* meeting details */} + + + {props.room.name} + + + {props.room.description} + + + {/* badges and tags */} + {/* + + scrum + + */} + + + {/* room status and link(s) */} + + + + {/* room attachments */} + + {props.room.attachments && props.room.attachments.length > 0 && ( + + )} + + + + + {/* footer */} + + {membersInRoom} + + {" "} + + + ); +} diff --git a/components/RoomTypeTag.tsx b/components/RoomTypeTag.tsx new file mode 100644 index 0000000..b1aad24 --- /dev/null +++ b/components/RoomTypeTag.tsx @@ -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 ( + + + live + + ); + + case RoomType.scheduled: + return ( + + + scheduled + + ); + + case RoomType.recurring: + return ( + + + recurring + + ); + } +} diff --git a/contexts/teamDashboardContext.tsx b/contexts/teamDashboardContext.tsx index 1ac5597..9d603fc 100644 --- a/contexts/teamDashboardContext.tsx +++ b/contexts/teamDashboardContext.tsx @@ -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([]); 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]); diff --git a/models/room.ts b/models/room.ts index 3096890..8936c52 100644 --- a/models/room.ts +++ b/models/room.ts @@ -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 } diff --git a/pages/teams/[teamid].tsx b/pages/teams/[teamid].tsx index 80a174d..5a2bbfd 100644 --- a/pages/teams/[teamid].tsx +++ b/pages/teams/[teamid].tsx @@ -78,8 +78,6 @@ function TeamDashboard() { }; }, []); - console.log(teamDashboardContext); - return (
diff --git a/pages/teams/dashboard.tsx b/pages/teams/dashboard.tsx index adc66c4..d909960 100644 --- a/pages/teams/dashboard.tsx +++ b/pages/teams/dashboard.tsx @@ -621,8 +621,9 @@ export default function Dashboard() { - - + + + {/* recurring room - wine wednesdays */} diff --git a/styles/globals.css b/styles/globals.css index 9471b25..8e31149 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -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;