From 6f652b33537f312e68d194702a22be7e3ddb3001 Mon Sep 17 00:00:00 2001 From: Arjun Patel Date: Fri, 21 Jan 2022 18:51:56 -0800 Subject: [PATCH] viewing works but playing stuff is buggy --- components/AnnouncementCard.tsx | 108 +++++++++++++ components/Dashboard/Announcements.tsx | 214 +++++++++++++++++-------- components/Dashboard/Links.tsx | 4 - contexts/keyboardContext.tsx | 1 - 4 files changed, 255 insertions(+), 72 deletions(-) create mode 100644 components/AnnouncementCard.tsx diff --git a/components/AnnouncementCard.tsx b/components/AnnouncementCard.tsx new file mode 100644 index 0000000..dd9ca45 --- /dev/null +++ b/components/AnnouncementCard.tsx @@ -0,0 +1,108 @@ +import moment from "moment"; +import Image from "next/image"; +import { useState } from "react"; +import toast from "react-hot-toast"; +import { FaCheck, FaPlay } from "react-icons/fa"; +import { useAuth } from "../contexts/authContext"; +import { useKeyboardContext } from "../contexts/keyboardContext"; +import { useTeamDashboardContext } from "../contexts/teamDashboardContext"; +import Announcement, { AnnouncementState } from "../models/announcement"; +import { User } from "../models/user"; +import { AnnouncementService } from "../services/announcementService"; +import SkeletonLoader from "./Loading/skeletonLoader"; + +interface IAnnouncementCardProps { + announcement: Announcement; +} + +const announcementService = new AnnouncementService(); + +export default function AnnouncementCard(props: IAnnouncementCardProps) { + const { currUser } = useAuth(); + const { teamUsersMap, user } = useTeamDashboardContext(); + const { handleAddAudioToQueue } = useKeyboardContext(); + const [loading, setLoading] = useState(false); + + function playAnnouncement() { + handleAddAudioToQueue([props.announcement.audioDataUrl]); + } + + async function resolveAnnouncement() { + setLoading(true); + + try { + await announcementService.updateAnnouncementState( + props.announcement.id, + AnnouncementState.resolved + ); + } catch (error) { + toast.error("unable to resolve announcement"); + } + + setLoading(false); + } + + async function deleteAnnouncement() { + try { + await announcementService.updateAnnouncementState( + props.announcement.id, + AnnouncementState.deleted + ); + } catch (error) { + toast.error("unable to resolve announcement"); + } + } + + var announcementUser: User = null; + if (props.announcement.createdByUserId in teamUsersMap) { + announcementUser = teamUsersMap[props.announcement.createdByUserId]; + } else if (currUser.uid == props.announcement.createdByUserId) { + announcementUser = user; + } + + const relativeCreatedDate = moment( + props.announcement.createdDate.toDate() + ).fromNow(); + + if (loading) { + return ; + } + + return ( + + + + + profile + + + + + {announcementUser?.nickName} + + {relativeCreatedDate} + + + {props.announcement.state == AnnouncementState.active && ( + + )} + + + + ); +} diff --git a/components/Dashboard/Announcements.tsx b/components/Dashboard/Announcements.tsx index 636ec03..ba923b1 100644 --- a/components/Dashboard/Announcements.tsx +++ b/components/Dashboard/Announcements.tsx @@ -2,20 +2,135 @@ import { FaAngleDown, FaCheck, FaMicrophoneAlt, FaPlay } from "react-icons/fa"; import { UserStatus } from "../../models/user"; import Image from "next/image"; +import { useEffect, useState } from "react"; +import { + collection, + getFirestore, + onSnapshot, + query, + where, +} from "firebase/firestore"; +import { Collections } from "../../services/collections"; +import { useTeamDashboardContext } from "../../contexts/teamDashboardContext"; +import { useAuth } from "../../contexts/authContext"; +import Announcement, { AnnouncementState } from "../../models/announcement"; +import { getTime } from "../../helpers/dateTime"; +import AnnouncementCard from "../AnnouncementCard"; +import { Dropdown, Menu, Radio, Tooltip } from "antd"; + +// for query +const yesterday = new Date(); +yesterday.setDate(yesterday.getDate() - 1); + +const db = getFirestore(); export default function Announcements() { + const { currUser } = useAuth(); + const { team } = useTeamDashboardContext(); + + const [annMap, setAnnMap] = useState>( + new Map() + ); + + // SECTION: LISTENER for Announcements + useEffect(() => { + /** + * QUERY: + * all announcements for the team in the past 24 hours for now + * order createdDate desc + * + */ + const q = query( + collection(db, Collections.announcements), + where("teamId", "==", team.id), + where("createdDate", ">", yesterday) + ); + + // return unsubscribe + return onSnapshot(q, (snapshot) => { + snapshot.docChanges().forEach((change) => { + let updatedOrNewAnn = change.doc.data() as Announcement; + updatedOrNewAnn.id = change.doc.id; + + if (change.type === "added" || change.type === "modified") { + console.log("New or updated announcement: ", updatedOrNewAnn); + + // update rooms map + setAnnMap((prevMap) => { + return new Map(prevMap.set(updatedOrNewAnn.id, updatedOrNewAnn)); + }); + } + if (change.type === "removed") { + // going to more so be resolved or deleted + console.log("Removed annoncement: ", updatedOrNewAnn); + } + }); + }); + }, []); + + const allAnn = Array.from(annMap.values()); + // sort the announcements + allAnn.sort(function (a, b) { + return getTime(b.createdDate.toDate()) - getTime(a.createdDate.toDate()); + }); + + const activeAnn = allAnn.filter( + (ann) => ann.state == AnnouncementState.active + ); + const resolvedAnn = allAnn.filter( + (ann) => ann.state == AnnouncementState.resolved + ); + + const [selectedTabPane, setSelectedTabPane] = useState( + AnnouncementState.active + ); + + function getTabContent() { + switch (selectedTabPane) { + case AnnouncementState.active: + return ( + <> + {activeAnn.map((ann) => { + return ; + })} + + ); + case AnnouncementState.resolved: + return ( + <> + {resolvedAnn.map((ann) => { + return ; + })} + + ); + } + } + + const TimePeriodFilterMenu = ( + + + Past Week (Coming Soon) + + + This Month (Coming Soon) + + + ); + return (
- + ANNOUNCEMENTS - + > + A + + updates, pep talks, blockers, reminders @@ -23,76 +138,41 @@ export default function Announcements() { {/* tab pane */} - - - Active + + setSelectedTabPane(e.target.value)} + > + + {AnnouncementState.active}{" "} + + {activeAnn.length > 0 ? activeAnn.length : ""} + + + + {AnnouncementState.resolved}{" "} + + {activeAnn.length > 0 ? activeAnn.length : ""} + + + + + + + 24 HRS + - - Resolved - - - - - TODAY - - - + */}
- {/* adriana's announcement */} - - - - - profile - - - - Adriana - 5 minutes ago - - blockers - - - - - {/* arjun's announcement */} - - - - - profile - - - - Arjun - 30 minutes ago - - engineering - - - - - + {getTabContent()}
); diff --git a/components/Dashboard/Links.tsx b/components/Dashboard/Links.tsx index 8ad1757..e0989a4 100644 --- a/components/Dashboard/Links.tsx +++ b/components/Dashboard/Links.tsx @@ -60,15 +60,11 @@ export default function Links() { updatedOrNewLink.id = change.doc.id; if (change.type === "added" || change.type === "modified") { - console.log("New or updated link: ", updatedOrNewLink); - - // update rooms map setLinksMap((prevMap) => { return new Map(prevMap.set(updatedOrNewLink.id, updatedOrNewLink)); }); } if (change.type === "removed") { - // not really going to happen, more so will be archived console.log("Removed link: ", updatedOrNewLink); } }); diff --git a/contexts/keyboardContext.tsx b/contexts/keyboardContext.tsx index 21a4215..3e92d57 100644 --- a/contexts/keyboardContext.tsx +++ b/contexts/keyboardContext.tsx @@ -538,7 +538,6 @@ export default function KeyboardContextProvider({ children }) { } async function sendAnnouncement() { - toast.success("announcement sent to team"); setIsRecordingAnnouncement(false); try {