trying to take out the create room object

components/Dashboard/Header.tsx

@@ -30,7 +30,7 @@ import { useEffect, useState } from "react";
 import TeamService from "../../services/teamService";
 import { Team } from "../../models/team";
 import Loading from "../Loading";
-import { useAudioContext } from "../../contexts/audioContext";
+import { useKeyboardContext } from "../../contexts/keyboardContext";
 import UserStatusBubble from "../UserStatusBubble";
 
 const teamService = new TeamService();
@@ -54,7 +54,7 @@ export default function Header() {
     isSilenceMode,
     muteOrUnmute,
     silenceOrLivenMode,
-  } = useAudioContext();
+  } = useKeyboardContext();
 
   const [usersTeams, setUserTeams] = useState<Team[]>(null);
 

components/Dashboard/Rooms.tsx

@@ -36,7 +36,7 @@ export default function DashboardRoom() {
   return (
     <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md">
       {/*  modal for creating room */}
-      <CreateRoom show={true} />
+      <CreateRoom />
 
       {/* header */}
       <span className="flex flex-row justify-end space-x-3 pb-5 items-center">

components/Dashboard/TeamVoiceLine.tsx

@@ -23,7 +23,7 @@ import {
 import { Collections } from "../../services/collections";
 import { KeyCode } from "../../globals/keycode";
 import { Tooltip } from "antd";
-import { useAudioContext } from "../../contexts/audioContext";
+import { useKeyboardContext } from "../../contexts/keyboardContext";
 import UserStatusBubble, { UserPulse } from "../UserStatusBubble";
 import { useAuth } from "../../contexts/authContext";
 import { Message } from "../../models/message";
@@ -40,7 +40,7 @@ export default function TeamVoiceLine() {
     selectTeamMember,
     selectedTeammate,
     isRecording,
-  } = useAudioContext();
+  } = useKeyboardContext();
   const router = useRouter();
   const { teamid } = router.query;
   const { team, user, userTeamMember, teamMembers } = useTeamDashboardContext();

components/Modals/CreateRoom.tsx

@@ -1,11 +1,16 @@
 import { Modal } from "antd";
+import { useKeyboardContext } from "../../contexts/keyboardContext";
+
+export default function CreateRoom() {
+  const { createRoom } = useKeyboardContext();
+
+  console.log(createRoom);
 
-export default function CreateRoom({ show }) {
   return (
     <Modal
       title="Create Room"
       centered
-      visible={show}
+      visible={createRoom.showModal}
       // onOk={() => this.setModal2Visible(false)}
       // onCancel={() => this.setModal2Visible(false)}
     >