diff --git a/components/Dashboard/TeamVoiceLine.tsx b/components/Dashboard/TeamVoiceLine.tsx index a6f1efb..f122ecb 100644 --- a/components/Dashboard/TeamVoiceLine.tsx +++ b/components/Dashboard/TeamVoiceLine.tsx @@ -28,13 +28,9 @@ import UserStatusBubble, { UserPulse } from "../UserStatusBubble"; import { useAuth } from "../../contexts/authContext"; import { Message } from "../../models/message"; -const db = getFirestore(); - const maxNumberOfKeyboardMappings: number = 9; -// date of yesterday to check if messages are after yesterday -const yesterday = new Date(); -yesterday.setDate(yesterday.getDate() - 1); +const db = getFirestore(); export default function TeamVoiceLine() { const { currUser } = useAuth(); @@ -96,73 +92,6 @@ export default function TeamVoiceLine() { }; }, []); - const [allMessages, setAllMessages] = useState([]); - const [messagesByTeamMate, setMessagesByTeamMate] = useState<{}>({}); - - // listener for all incoming messages - useEffect(() => { - var unsubscribe: Unsubscribe; - - (async function () { - // todo for new messages, change document.title - - /** - * QUERY: - * - last 24 hours only - * - any message that I have sent or received: relevant messages - * - order by: date desc - */ - const q = query( - collection(db, Collections.audioMessages), - where("senderReceiver", "array-contains", currUser.uid), - where("createdDate", ">", yesterday), - orderBy("createdDate", "asc") - ); - unsubscribe = onSnapshot(q, (snapshot) => { - snapshot.docChanges().forEach((change) => { - // no need to process results again, just append to arrays instead - // 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]); - - // update map of teammate to relevant messages - setMessagesByTeamMate((prevMap) => { - console.log("settting state"); - // if the map contains the teammate userid already, then cool, just unshift to that array - const newMap = { ...prevMap }; - if (newMessage.receiverUserId in prevMap) { - newMap[newMessage.receiverUserId] = [ - newMessage, - ...prevMap[newMessage.receiverUserId], - ]; - } // if this is the first relevant message linked to this receiver, - //then create a new array - else { - newMap[newMessage.receiverUserId] = [newMessage]; - } - - return newMap; - }); - } - if (change.type === "modified") { - console.log("Modified message: ", change.doc.data()); - } - if (change.type === "removed") { - console.log("Removed message: ", change.doc.data()); - } - }); - }); - })(); - - return () => unsubscribe(); - }, []); - - console.log(messagesByTeamMate); - // set up shortcuts for each teammate useEffect(() => { teamUsers.forEach((tmUser, i) => { diff --git a/contexts/audioContext.tsx b/contexts/audioContext.tsx index c4585ae..12c27d6 100644 --- a/contexts/audioContext.tsx +++ b/contexts/audioContext.tsx @@ -358,7 +358,7 @@ export default function AudioContextProvider({ children }) { {children} {/* mega power mode viewer */} - + {/* */} {/* player for audio messages */} {startPlaying ? ( diff --git a/contexts/teamDashboardContext.tsx b/contexts/teamDashboardContext.tsx index 0f31487..0f6e80a 100644 --- a/contexts/teamDashboardContext.tsx +++ b/contexts/teamDashboardContext.tsx @@ -1,7 +1,17 @@ -import { doc, getFirestore, onSnapshot, Unsubscribe } from "firebase/firestore"; +import { + collection, + doc, + getFirestore, + onSnapshot, + orderBy, + query, + Unsubscribe, + where, +} from "firebase/firestore"; import { useRouter } from "next/router"; import React, { useContext, useEffect, useState } from "react"; import Loading from "../components/Loading"; +import { Message } from "../models/message"; import { Team } from "../models/team"; import { TeamMember, TeamMemberStatus } from "../models/teamMember"; import { User } from "../models/user"; @@ -15,11 +25,17 @@ interface TeamDashboardContextInterface { teamMembers: TeamMember[]; userTeamMember: TeamMember; user: User; + messagesByTeamMate: {}; // string of teammate userid and array of messages + allMessages: Message[]; } const TeamDashboardContext = React.createContext(null); +// date of yesterday to check if messages are after yesterday +const yesterday = new Date(); +yesterday.setDate(yesterday.getDate() - 1); + const teamService = new TeamService(); const userService = new UserService(); const db = getFirestore(); @@ -40,6 +56,7 @@ export function TeamDashboardContextProvider({ children }) { {} as TeamDashboardContextInterface ); + // all data useEffect(() => { var userListener: Unsubscribe; @@ -154,6 +171,69 @@ export function TeamDashboardContextProvider({ children }) { }; }, []); + const [allMessages, setAllMessages] = useState([]); + const [messagesByTeamMate, setMessagesByTeamMate] = useState<{}>({}); + + // listener for all incoming messages + useEffect(() => { + console.log("first only"); + + // todo for new messages, change document.title + + /** + * QUERY: + * - last 24 hours only + * - any message that I have sent or received: relevant messages + * - order by: date desc + */ + const q = query( + collection(db, Collections.audioMessages), + where("senderReceiver", "array-contains", currUser.uid), + where("createdDate", ">", yesterday), + orderBy("createdDate", "asc") + ); + + // return unsubscribe + return onSnapshot(q, (snapshot) => { + snapshot.docChanges().forEach((change) => { + // no need to process results again, just append to arrays instead + // 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]); + + // update map of teammate to relevant messages + setMessagesByTeamMate((prevMap) => { + console.log("settting state"); + // if the map contains the teammate userid already, then cool, just unshift to that array + const newMap = { ...prevMap }; + if (newMessage.receiverUserId in prevMap) { + newMap[newMessage.receiverUserId] = [ + newMessage, + ...prevMap[newMessage.receiverUserId], + ]; + } // if this is the first relevant message linked to this receiver, + //then create a new array + else { + newMap[newMessage.receiverUserId] = [newMessage]; + } + + return newMap; + }); + } + if (change.type === "modified") { + console.log("Modified message: ", change.doc.data()); + } + if (change.type === "removed") { + console.log("Removed message: ", change.doc.data()); + } + }); + }); + }, []); + if (loading) { return ; }