From 5c931211b2ed052c49dea825a5db4a52a2533a4a Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Mon, 17 Jan 2022 16:43:11 -0800
Subject: [PATCH] update modal initial setup

---
 components/Dashboard/Rooms.tsx                | 36 ++++++++++++++++---
 ...{CreateRoom.tsx => CreateOrUpdateRoom.tsx} | 11 +++---
 components/RoomCard.tsx                       |  8 ++---
 3 files changed, 43 insertions(+), 12 deletions(-)
 rename components/Modals/{CreateRoom.tsx => CreateOrUpdateRoom.tsx} (97%)

diff --git a/components/Dashboard/Rooms.tsx b/components/Dashboard/Rooms.tsx
index 6095ae9..b7e0027 100644
--- a/components/Dashboard/Rooms.tsx
+++ b/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>
diff --git a/components/Modals/CreateRoom.tsx b/components/Modals/CreateOrUpdateRoom.tsx
similarity index 97%
rename from components/Modals/CreateRoom.tsx
rename to components/Modals/CreateOrUpdateRoom.tsx
index 23d3742..eb79b78 100644
--- a/components/Modals/CreateRoom.tsx
+++ b/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}
     >
diff --git a/components/RoomCard.tsx b/components/RoomCard.tsx
index 0e0d692..663406c 100644
--- a/components/RoomCard.tsx
+++ b/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 = (