diff --git a/components/Dashboard/Header.tsx b/components/Dashboard/Header.tsx index 1d7f386..7e16a22 100644 --- a/components/Dashboard/Header.tsx +++ b/components/Dashboard/Header.tsx @@ -35,6 +35,8 @@ import UserStatusBubble from "../UserStatusBubble"; const teamService = new TeamService(); +const today = new Date(); + export default function Header() { const { currUser, logOut } = useAuth(); const { team, user, userTeamMember } = useTeamDashboardContext(); @@ -278,7 +280,6 @@ export default function Header() { ); } - const today = new Date(); const periodOfDay = generateGreetings(); return ( diff --git a/components/Dashboard/Rooms.tsx b/components/Dashboard/Rooms.tsx index 111add7..24a2cae 100644 --- a/components/Dashboard/Rooms.tsx +++ b/components/Dashboard/Rooms.tsx @@ -25,6 +25,7 @@ import { Divider, Dropdown, Menu, Radio, Tooltip } from "antd"; import RoomCard from "../RoomCard"; import toast from "react-hot-toast"; import RoomTypeTag from "../RoomTypeTag"; +import moment from "moment"; enum RoomTypeFilter { team = "team", @@ -41,6 +42,7 @@ enum RoomTimeFilter { const db = getFirestore(); +const today = new Date(); const lastWeek = new Date(); lastWeek.setDate(lastWeek.getDate() - 7); const nextWeek = new Date(); @@ -74,7 +76,7 @@ export default function DashboardRoom() { }); }, []); - // get scheduled rooms data realtime + // get scheduled rooms data realtime: the ones with the date range useEffect(() => { /** * QUERY: @@ -209,10 +211,6 @@ export default function DashboardRoom() { roomType={RoomType.scheduled} /> - - Your next room is in{" "} - 20 minutes -
{scheduled.map((room) => ( - {roomType == RoomType.recurring || roomType == RoomType.scheduled ? ( -
- - - Approximate Slot - - Sometimes you don't have a specific time or want to - propose a rough period. - - setRoomAppxDateTime(e.target.value)} - /> + {roomType == RoomType.recurring ? ( + + + Approximate Slot + + Sometimes you don't have a specific time or want to + propose a rough period. - - {roomType == RoomType.scheduled ? ( - <> - OR - - Specific Time - {/* setRoomAppxDateTime(e.target.value)} + /> + + + ) : ( + <> + )} + + {roomType == RoomType.scheduled ? ( + + Specific Time + {/* */} - - - - ) : ( - <> - )} -
+ + ) : ( <> )} diff --git a/components/RoomCard.tsx b/components/RoomCard.tsx index 3f0b929..a14945c 100644 --- a/components/RoomCard.tsx +++ b/components/RoomCard.tsx @@ -1,7 +1,7 @@ import { BsThreeDots } from "react-icons/bs"; -import { FaBell, FaClock, FaLink, FaPlus } from "react-icons/fa"; +import { FaBell, FaCalendarDay, FaClock, FaLink, FaPlus } from "react-icons/fa"; import { IoTimer } from "react-icons/io5"; -import Room, { RoomStatus } from "../models/room"; +import Room, { RoomStatus, RoomType } from "../models/room"; import RoomTypeTag from "./RoomTypeTag"; import Image from "next/image"; import { useAuth } from "../contexts/authContext"; @@ -15,6 +15,8 @@ import { useState } from "react"; import SkeletonLoader from "./Loading/skeletonLoader"; import { useKeyboardContext } from "../contexts/keyboardContext"; import UserService from "../services/userService"; +import Moment from "react-moment"; +import moment from "moment"; interface IRoomCardProps { room: Room; @@ -221,20 +223,43 @@ export default function RoomCard(props: IRoomCardProps) {
); + var dateTimeScheduled = null; + if (props.room.type == RoomType.scheduled) { + dateTimeScheduled = props.room.scheduledDateTime.toDate(); + } + + function renderTopRightCardInfo() { + if (props.room.type == RoomType.scheduled && props.room.scheduledDateTime) { + return ( + <> + + + + + + + + + + + ); + } + } + return ( {/* header */} - + {/* meeting details */} - + {props.room.name} @@ -260,11 +285,9 @@ export default function RoomCard(props: IRoomCardProps) { {/* room status and link(s) */} - - + + {renderTopRightCardInfo()} +