From 39aa1dfa9b9f0cbc1273f6299953d28dd94076f2 Mon Sep 17 00:00:00 2001 From: Arjun Patel Date: Sun, 16 Jan 2022 12:11:04 -0800 Subject: [PATCH] getting messagess and stuff --- components/Dashboard/TeamVoiceLine.tsx | 78 ++++++++++++++++++++++++++ pages/teams/[teamid]/admin.tsx | 2 +- services/firebaseService.js | 23 ++++---- 3 files changed, 92 insertions(+), 11 deletions(-) diff --git a/components/Dashboard/TeamVoiceLine.tsx b/components/Dashboard/TeamVoiceLine.tsx index 2d21675..36aa053 100644 --- a/components/Dashboard/TeamVoiceLine.tsx +++ b/components/Dashboard/TeamVoiceLine.tsx @@ -10,23 +10,34 @@ import { toast } from "react-hot-toast"; import { TeamMemberRole, TeamMemberStatus } from "../../models/teamMember"; import UserService from "../../services/userService"; import { + collection, doc, DocumentSnapshot, getFirestore, onSnapshot, + orderBy, + query, Unsubscribe, + where, } from "firebase/firestore"; import { Collections } from "../../services/collections"; import { KeyCode } from "../../globals/keycode"; import { Tooltip } from "antd"; import { useAudioContext } from "../../contexts/audioContext"; 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); + export default function TeamVoiceLine() { + const { currUser } = useAuth(); const audioContext = useAudioContext(); const router = useRouter(); const { teamid } = router.query; @@ -35,6 +46,7 @@ export default function TeamVoiceLine() { const [teamUsers, setTeamUsers] = useState([]); + // setup listeners for each teammate or their status changes useEffect(() => { const unsubs: Unsubscribe[] = []; @@ -79,6 +91,72 @@ 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) => { + // if the map contains the teammate userid already, then cool, just unshift to that array + if (newMessage.receiverUserId in prevMap) { + prevMap[newMessage.receiverUserId] = [ + newMessage, + ...prevMap[newMessage.receiverUserId], + ]; + } // if this is the first relevant message linked to this receiver, + //then create a new array + else { + prevMap[newMessage.receiverUserId] = [newMessage]; + } + + return prevMap + }); + } + 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(allMessages); + + // set up shortcuts for each teammate useEffect(() => { teamUsers.forEach((tmUser, i) => { // make sure we don't map a user if they are past the max allowed diff --git a/pages/teams/[teamid]/admin.tsx b/pages/teams/[teamid]/admin.tsx index 04c4633..954a951 100644 --- a/pages/teams/[teamid]/admin.tsx +++ b/pages/teams/[teamid]/admin.tsx @@ -273,7 +273,7 @@ function TeamAdmin() { Please email{" "} {" "} to open more spots for your team. diff --git a/services/firebaseService.js b/services/firebaseService.js index af290dd..7baf5ea 100644 --- a/services/firebaseService.js +++ b/services/firebaseService.js @@ -1,4 +1,3 @@ - // const firebaseConfig = { // apiKey: process.env.NEXT_PUBLIC_FIREBASE_APIKEY, // authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, @@ -9,12 +8,15 @@ // measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID // }; - // Import the functions you need from the SDKs you need -import * as firebase from 'firebase/app'; +import * as firebase from "firebase/app"; import { getAnalytics } from "firebase/analytics"; import { getFirestore } from "firebase/firestore"; -import { browserSessionPersistence, getAuth, setPersistence } from 'firebase/auth'; +import { + browserSessionPersistence, + getAuth, + setPersistence, +} from "firebase/auth"; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries @@ -28,17 +30,18 @@ const firebaseConfig = { storageBucket: "nirvana-for-business.appspot.com", messagingSenderId: "825654222284", appId: "1:825654222284:web:0778c8883de21917b51169", - measurementId: "G-MB5G7G09MR" + measurementId: "G-MB5G7G09MR", }; // Initialize Firebase -const app = firebase.initializeApp(firebaseConfig); -const analytics = getAnalytics(app); +if (typeof window !== "undefined") { + const app = firebase.initializeApp(firebaseConfig); + const analytics = getAnalytics(app); -console.log('initialized firebase') - -setPersistence(getAuth(), browserSessionPersistence) + console.log("initialized firebase"); + setPersistence(getAuth(), browserSessionPersistence); +} // import { credential } from 'firebase-admin'; // import { initializeApp } from 'firebase-admin/app';