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)}
     >

contexts/keyboardContext.tsx

@@ -12,8 +12,9 @@ import { Message } from "../models/message";
 import { useAuth } from "./authContext";
 import { SendService } from "../services/sendService";
 import { useTeamDashboardContext } from "./teamDashboardContext";
+import CreateRoom from "../helpers/CreateRoom";
 
-interface AudioContextInterface {
+interface KeyboardContextInterface {
   selectedTeammate: string; // can only have one selected
   selectTeamMember: Function;
 
@@ -43,9 +44,13 @@ interface AudioContextInterface {
   outputDevices: MediaDeviceInfo[];
 
   ctrlDown: boolean;
+
+  createRoom: CreateRoom;
 }
 
-const AudioContext = React.createContext<AudioContextInterface | null>(null);
+const KeyboardContext = React.createContext<KeyboardContextInterface | null>(
+  null
+);
 
 function stopBothVideoAndAudio(stream) {
   stream.getTracks().forEach(function (track) {
@@ -60,7 +65,7 @@ function stopBothVideoAndAudio(stream) {
 const cloudStorageService = new CloudStorageService();
 const sendService = new SendService();
 
-export default function AudioContextProvider({ children }) {
+export default function KeyboardContextProvider({ children }) {
   const { currUser } = useAuth();
 
   // SECTION: set up for shortcuts and recording and such
@@ -80,6 +85,8 @@ export default function AudioContextProvider({ children }) {
   const [isMuted, setIsMuted] = useState<Boolean>(false);
   const [isSilenceMode, setIseSilenceMode] = useState<Boolean>(false);
 
+  const [createRoom, setCreateRoom] = useState<CreateRoom>(new CreateRoom());
+
   const [recorder, setRecorder] = useState<MicRecorder>(
     new MicRecorder({ bitRate: 128 })
   );
@@ -107,7 +114,7 @@ export default function AudioContextProvider({ children }) {
     }
   }, [allMessages]);
 
-  const value: AudioContextInterface = {
+  const value: KeyboardContextInterface = {
     selectedTeammate,
     selectTeamMember,
     addTeamShortcutBinding,
@@ -130,6 +137,7 @@ export default function AudioContextProvider({ children }) {
     outputDevices,
 
     ctrlDown,
+    createRoom,
   };
 
   function muteOrUnmute() {
@@ -413,7 +421,7 @@ export default function AudioContextProvider({ children }) {
   const [playerSrc, setPlayerSrc] = useState<string>(null);
 
   return (
-    <AudioContext.Provider value={value}>
+    <KeyboardContext.Provider value={value}>
       {children}
 
       {/* mega power mode viewer */}
@@ -430,10 +438,10 @@ export default function AudioContextProvider({ children }) {
           className="w-screen flex flex-row"
         />
       )}
-    </AudioContext.Provider>
+    </KeyboardContext.Provider>
   );
 }
 
-export function useAudioContext() {
-  return useContext(AudioContext);
+export function useKeyboardContext() {
+  return useContext(KeyboardContext);
 }

helpers/CreateRoom.tsx

@@ -0,0 +1,11 @@
+export default class CreateRoom {
+  showModal: boolean;
+
+  meetLink?: string;
+
+  constructor() {
+    this.showModal = true;
+
+    this.meetLink = "";
+  }
+}

pages/teams/[teamid].tsx

@@ -6,7 +6,7 @@ import Rooms from "../../components/Dashboard/Rooms";
 import TeamVoiceLine from "../../components/Dashboard/TeamVoiceLine";
 import BackgroundLayout from "../../components/Layouts/BackgroundLayout";
 import Loading from "../../components/Loading";
-import AudioContextProvider from "../../contexts/audioContext";
+import AudioContextProvider from "../../contexts/keyboardContext";
 import { useAuth } from "../../contexts/authContext";
 import {
   TeamDashboardContextProvider,