From 9c64e80b082a77ac0caa7dd1f516693e5a067d53 Mon Sep 17 00:00:00 2001 From: Arjun Patel Date: Sat, 22 Jan 2022 14:39:01 -0800 Subject: [PATCH] seeding initial office rooms and showing them --- components/Dashboard/Announcements.tsx | 2 - components/Dashboard/Office.tsx | 100 +++++++++++++++++++++++++ components/Dashboard/TeamVoiceLine.tsx | 2 +- components/OfficeCard.tsx | 41 ++++++++++ models/officeRoom.ts | 37 +++++++++ pages/teams/[teamid].tsx | 3 + services/collections.tsx | 2 + services/officeRoomService.tsx | 88 ++++++++++++++++++++++ 8 files changed, 272 insertions(+), 3 deletions(-) create mode 100644 components/Dashboard/Office.tsx create mode 100644 components/OfficeCard.tsx create mode 100644 models/officeRoom.ts create mode 100644 services/officeRoomService.tsx diff --git a/components/Dashboard/Announcements.tsx b/components/Dashboard/Announcements.tsx index d78bebe..db6d9fd 100644 --- a/components/Dashboard/Announcements.tsx +++ b/components/Dashboard/Announcements.tsx @@ -55,8 +55,6 @@ export default function Announcements() { 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)); diff --git a/components/Dashboard/Office.tsx b/components/Dashboard/Office.tsx new file mode 100644 index 0000000..8032c9f --- /dev/null +++ b/components/Dashboard/Office.tsx @@ -0,0 +1,100 @@ +import { + collection, + getFirestore, + onSnapshot, + query, + where, +} from "firebase/firestore"; +import { useEffect, useState } from "react"; +import { useAuth } from "../../contexts/authContext"; +import { useTeamDashboardContext } from "../../contexts/teamDashboardContext"; +import OfficeRoom from "../../models/officeRoom"; +import { Collections } from "../../services/collections"; +import OfficeRoomService from "../../services/officeRoomService"; +import OfficeCard from "../OfficeCard"; + +const db = getFirestore(); + +const officeRoomService = new OfficeRoomService(); + +export default function Office() { + const { currUser } = useAuth(); + const { team } = useTeamDashboardContext(); + + const [officeRoomsMap, setOfficeRoomsMap] = useState>( + new Map() + ); + + // get all offices for this team : realtime + useEffect(() => { + /** + * QUERY: + * all offices for this team + * + */ + const q = query( + collection(db, Collections.officeRooms), + where("teamId", "==", team.id) + ); + + // return unsubscribe + return onSnapshot(q, (snapshot) => { + if (snapshot.empty) { + // seed data and create the initial rooms + console.log("seeding office rooms for this team"); + officeRoomService.createInitialOfficeRooms(currUser.uid, team.id); + return; + } + + snapshot.docChanges().forEach((change) => { + let updatedOfficeRoom = change.doc.data() as OfficeRoom; + updatedOfficeRoom.id = change.doc.id; + + if (change.type === "added" || change.type === "modified") { + // update office rooms map on change of the room + setOfficeRoomsMap((prevMap) => { + return new Map( + prevMap.set(updatedOfficeRoom.id, updatedOfficeRoom) + ); + }); + } + if (change.type === "removed") { + console.log("Removed office room: ", updatedOfficeRoom); + } + }); + }); + }, []); + + const allOfficeRooms = Array.from(officeRoomsMap.values()); + + allOfficeRooms.sort((a, b) => { + if (a.name < b.name) { + return 1; + } + + if (a.name > b.name) { + return 1; + } + return 0; + }); + + // if there are none, then show user button to create initial office rooms and then create them + + return ( +
+ + + Office + + + + {/* all office rooms */} + + {allOfficeRooms.map((officeRoom) => ( + + ))} + {/* */} + +
+ ); +} diff --git a/components/Dashboard/TeamVoiceLine.tsx b/components/Dashboard/TeamVoiceLine.tsx index 9fd76f2..e190c26 100644 --- a/components/Dashboard/TeamVoiceLine.tsx +++ b/components/Dashboard/TeamVoiceLine.tsx @@ -204,7 +204,7 @@ export default function TeamVoiceLine() { } return ( -
+
TEAM diff --git a/components/OfficeCard.tsx b/components/OfficeCard.tsx new file mode 100644 index 0000000..99fd813 --- /dev/null +++ b/components/OfficeCard.tsx @@ -0,0 +1,41 @@ +import { Avatar } from "antd"; +import OfficeRoom, { OfficeRoomState } from "../models/officeRoom"; + +interface IOfficeCard { + officeRoom: OfficeRoom; +} + +export default function OfficeCard(props: IOfficeCard) { + return ( + + + {renderOfficePulse(OfficeRoomState.active)} + + {/* office location name */} + + {props.officeRoom.name} + + + {/* all members in room */} + + + {props.officeRoom.members.map((officeLocation) => { + + {officeLocation[0]} + ; + })} + + + + + ); +} + +function renderOfficePulse(officeRoomState: OfficeRoomState) { + return ( + + ); +} diff --git a/models/officeRoom.ts b/models/officeRoom.ts new file mode 100644 index 0000000..2a26d5c --- /dev/null +++ b/models/officeRoom.ts @@ -0,0 +1,37 @@ +import { Timestamp } from "firebase/firestore"; +import { v4 as uuidv4 } from "uuid"; + +export default class OfficeRoom { + id: string = uuidv4(); + + teamId: string; + + name: string; // entrance, kitchen, etc. + + createdDate: Timestamp; + createdByUserId: string; + + lastUpdatedDate: Timestamp; + + members: string[] = []; // id's of users in the office room + + state: OfficeRoomState; + + constructor( + _name: string, + _teamId: string, + _createdBy: string, + _state: OfficeRoomState = OfficeRoomState.idle + ) { + this.name = _name; + this.teamId = _teamId; + this.createdByUserId = _createdBy; + this.state = _state; + } +} + +export enum OfficeRoomState { + active = "active", + idle = "idle", + archived = "archived", +} diff --git a/pages/teams/[teamid].tsx b/pages/teams/[teamid].tsx index 722d826..8872263 100644 --- a/pages/teams/[teamid].tsx +++ b/pages/teams/[teamid].tsx @@ -19,6 +19,7 @@ import TeamService from "../../services/teamService"; import UserService from "../../services/userService"; import Announcements from "../../components/Dashboard/Announcements"; import Links from "../../components/Dashboard/Links"; +import Office from "../../components/Dashboard/Office"; // User has switched back to the tab const onFocus = () => { @@ -87,6 +88,8 @@ function TeamDashboard() {
+ +
diff --git a/services/collections.tsx b/services/collections.tsx index b224ee6..ff4015a 100644 --- a/services/collections.tsx +++ b/services/collections.tsx @@ -8,4 +8,6 @@ export enum Collections { rooms = "rooms", announcements = "announcements", links = "links", + + officeRooms = "officeRooms", } diff --git a/services/officeRoomService.tsx b/services/officeRoomService.tsx new file mode 100644 index 0000000..c32f115 --- /dev/null +++ b/services/officeRoomService.tsx @@ -0,0 +1,88 @@ +import { + addDoc, + collection, + doc, + FieldValue, + Firestore, + getFirestore, + serverTimestamp, + setDoc, + writeBatch, +} from "firebase/firestore"; +import OfficeRoom from "../models/officeRoom"; +import { Collections } from "./collections"; + +export default class OfficeRoomService { + private db: Firestore = getFirestore(); + private batch = writeBatch(this.db); + + async createInitialOfficeRooms(createdByUserId: string, teamId: string) { + const entrance = new OfficeRoom("Entrance", teamId, createdByUserId); + const kitchen = new OfficeRoom("Kitchen", teamId, createdByUserId); + const hallway = new OfficeRoom("Hallway", teamId, createdByUserId); + const corner = new OfficeRoom("Corner", teamId, createdByUserId); + const main = new OfficeRoom("Team Hub", teamId, createdByUserId); + const handsOnDeck = new OfficeRoom( + "All Hand On Deck", + teamId, + createdByUserId + ); + + const initialORs: OfficeRoom[] = [ + entrance, + kitchen, + hallway, + corner, + main, + handsOnDeck, + ]; + + initialORs.forEach((oR) => { + const oRRef = doc(this.db, Collections.officeRooms, oR.id); + this.batch.set(oRRef, { ...oR, createdDate: serverTimestamp() }); + }); + + await this.batch.commit(); + } + + // async createOrUpdateRoom(room: Room) { + // if (room.id) { + // //update + // await this.updateRoom(room); + // } else { + // //create + // const roomDocRef = await addDoc(collection(this.db, Collections.rooms), { + // ...room, + // createdDate: serverTimestamp(), + // }); + // } + // } + + // async updateMembersInRoom(roomId: string, newMembersInRoom: string[]) { + // // if the room is going to be empty, then change status accordingly + // var status: RoomStatus = RoomStatus.live; + // if (newMembersInRoom.length == 0) { + // status = RoomStatus.empty; + // } + + // const docRef = doc(this.db, Collections.rooms, roomId); + // await setDoc( + // docRef, + // { + // status, + // membersInRoom: newMembersInRoom, + // lastUpdatedDate: serverTimestamp(), + // }, + // { merge: true } + // ); + // } + + // async updateRoom(room: Room) { + // const docRef = doc(this.db, Collections.rooms, room.id); + // await setDoc( + // docRef, + // { ...room, lastUpdatedDate: serverTimestamp() }, + // { merge: true } + // ); + // } +}