update modal initial setup

components/Dashboard/Rooms.tsx

@@ -4,7 +4,7 @@ import { FaAngleDown, FaBell, FaClock, FaPlus, FaLink } from "react-icons/fa";
 import { IoTimer } from "react-icons/io5";
 import { BsThreeDots } from "react-icons/bs";
 import Image from "next/image";
-import CreateRoom from "../Modals/CreateRoom";
+import CreateOrUpdateRoom from "../Modals/CreateOrUpdateRoom";
 import {
   ShowModalType,
   useKeyboardContext,
@@ -23,6 +23,7 @@ import Room, { RoomStatus, RoomType } from "../../models/room";
 import { useAuth } from "../../contexts/authContext";
 import { Dropdown, Menu, Radio, Tooltip } from "antd";
 import RoomCard from "../RoomCard";
+import toast from "react-hot-toast";
 
 enum RoomTypeFilter {
   team = "team",
@@ -44,7 +45,7 @@ lastWeek.setDate(lastWeek.getDate() - 7);
 
 export default function DashboardRoom() {
   const { currUser } = useAuth();
-  const { handleModalType } = useKeyboardContext();
+  const { handleModalType, showModalType } = useKeyboardContext();
   const { team } = useTeamDashboardContext();
 
   const [roomsMap, setRoomsMap] = useState<Map<string, Room>>(
@@ -183,10 +184,31 @@ export default function DashboardRoom() {
     </Menu>
   );
 
+  const [selectedUpdateRoom, setSelectedUpdateRoom] = useState<Room>(null);
+
+  async function handleUpdateRoom(roomId: string) {
+    console.log("going to update room");
+
+    // get the room details and pass it into the modal
+    if (!roomsMap.has(roomId)) {
+      toast.error("not a valid room to edit");
+      return;
+    }
+
+    // pass this to the modal for use
+    setSelectedUpdateRoom(roomsMap[roomId]);
+
+    // call the keyboard context to show the modal
+    handleModalType(ShowModalType.createRoom);
+  }
+
   return (
     <section className="p-5 w-full flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md">
       {/*  modal for creating room */}
-      <CreateRoom />
+      <CreateOrUpdateRoom
+        show={showModalType == ShowModalType.createRoom}
+        updateRoom={selectedUpdateRoom}
+      />
 
       {/* header */}
       <Tooltip title={"  archive rooms to keep your team focused"}>
@@ -252,7 +274,13 @@ export default function DashboardRoom() {
       {/* all rooms */}
       <span className="flex flex-row flex-wrap max-h-96 overflow-auto">
         {getRoomContent().map((room) => {
-          return <RoomCard key={room.id} room={room} />;
+          return (
+            <RoomCard
+              key={room.id}
+              room={room}
+              updateRoomHandler={handleUpdateRoom}
+            />
+          );
         })}
       </span>
     </section>

components/Modals/CreateOrUpdateRoom.tsx

@@ -12,11 +12,14 @@ import RoomService from "../../services/roomService";
 
 const { Option } = Select;
 
-const thisModalType = ShowModalType.createRoom;
-
 const roomService = new RoomService();
 
-export default function CreateRoomModal() {
+interface IModalProps {
+  show: boolean;
+  updateRoom: Room;
+}
+
+export default function CreateOrUpdateRoomModal(props: IModalProps) {
   const { currUser } = useAuth();
   const { teamUsers, team } = useTeamDashboardContext();
   const { pastedLink, handleModalType, showModalType } = useKeyboardContext();
@@ -120,7 +123,7 @@ export default function CreateRoomModal() {
     <Modal
       title="Room Details"
       centered
-      visible={showModalType == thisModalType ? true : false}
+      visible={props.show}
       onOk={handleSubmit}
       onCancel={handleCloseModal}
     >

components/RoomCard.tsx

@@ -13,9 +13,11 @@ import RoomService from "../services/roomService";
 import toast from "react-hot-toast";
 import { useState } from "react";
 import SkeletonLoader from "./Loading/skeletonLoader";
+import { useKeyboardContext } from "../contexts/keyboardContext";
 
 interface IRoomCardProps {
   room: Room;
+  updateRoomHandler: Function;
 }
 
 const roomService = new RoomService();
@@ -188,10 +190,8 @@ export default function RoomCard(props: IRoomCardProps) {
     return <SkeletonLoader />;
   }
 
-  async function handleUpdateRoom(e) {
-    e.preventDefault();
-
-    console.log("going to update room");
+  async function handleUpdateRoom() {
+    props.updateRoomHandler(props.room.id);
   }
 
   const RoomOptionsMenu = (