fixing some bugs as adding event listeners can't be changed as they put it in memory or something

contexts/audioContext.tsx

@@ -1,6 +1,7 @@
 import React, { useContext, useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { KeyCode } from "../globals/keycode";
+import MicRecorder from "mic-recorder-to-mp3";
 
 interface AudioContextInterface {
   selectedTeammate: string; // can only have one selected
@@ -17,16 +18,34 @@ interface AudioContextInterface {
 
   isMuted: Boolean;
   isSilenceMode: Boolean; // won't automatically listen to notifications or sounds
+
+  hasRecPermit: Boolean; // permission to record or not
 }
 
 const AudioContext = React.createContext<AudioContextInterface | null>(null);
 
+const Mp3Recorder = new MicRecorder({ bitRate: 128 });
+
 export default function AudioContextProvider({ children }) {
   // SECTION: set up for shortcuts and recording and such
   const [selectedTeammate, setSelectedTeamMember] = useState<string>(null); // id of selected teammate
   const [isRecording, setIsRecording] = useState<Boolean>(false);
+  const [hasRecPermit, setHasRecPermit] = useState<Boolean>(false);
 
-  const [teamShortcutMappings, setTeamShortcutMappings] = useState<{}>({});
+  const [teamShortcutMappings, setTeamShortcutMappings] = useState<{}>(null);
+
+  useEffect(() => {
+    navigator.mediaDevices
+      .getUserMedia({ audio: true })
+      .then(() => {
+        console.log("Permission Granted");
+        setHasRecPermit(true);
+      })
+      .catch(() => {
+        console.log("Permission Denied");
+        setHasRecPermit(false);
+      });
+  }, []);
 
   useEffect(() => {
     document.addEventListener("keydown", handleKeyboardShortcut);
@@ -36,16 +55,53 @@ export default function AudioContextProvider({ children }) {
       document.removeEventListener("keydown", handleKeyboardShortcut);
       document.removeEventListener("keyup", handleKeyUp);
     };
-  }, []);
+  }, [teamShortcutMappings]);
+
+  // SECTION: recording
+  function startRecording() {
+    if (!hasRecPermit) {
+      toast.error("You did not allow recording permission!");
+    } else {
+      Mp3Recorder.start()
+        .then(() => {
+          toast.success("started recording");
+        })
+        .catch((e) =>
+          toast.error("there was a problem in starting your recording")
+        );
+    }
+  }
+
+  // everything to do with audio file
+  function stopRecording() {
+    Mp3Recorder.stop()
+      .getMp3()
+      .then(([buffer, blob]) => {
+        const blobURL = URL.createObjectURL(blob);
+
+        const file = new File(buffer, "me-at-thevoice.mp3", {
+          type: blob.type,
+          lastModified: Date.now(),
+        });
+
+        const player = new Audio(URL.createObjectURL(file));
+        player.play();
+
+        toast.success("Audio Clip Sent");
+      })
+      .catch((e) => toast.error("Problem in sending clip"));
+  }
 
   function handleKeyUp(event) {
     console.log("on key up");
 
     // if was recording and released R, then stop recording
-    if (event.keyCode == KeyCode.R) {
+    if (event.keyCode == KeyCode.R && selectedTeammate) {
       console.log("stopped recording");
       setIsRecording(false);
       setSelectedTeamMember(null);
+
+      // stopRecording();
     }
   }
 
@@ -55,11 +111,14 @@ export default function AudioContextProvider({ children }) {
     }
 
     console.log(event.keyCode);
+    console.log(selectedTeammate);
+    console.log(teamShortcutMappings);
 
     // recording
-    if (event.keyCode == KeyCode.R) {
+    if (event.keyCode == KeyCode.R && selectedTeammate) {
       console.log("started recording");
       setIsRecording(true);
+      // startRecording();
     }
     // if we have a valid user for such a shortcut, then go ahead...otherwise
     else if (teamShortcutMappings[event.keyCode]) {
@@ -74,7 +133,7 @@ export default function AudioContextProvider({ children }) {
   }
 
   function addTeamShortcutBinding(keyCode: number, userId: string) {
-    setTeamShortcutMappings((prevMap) => ({ ...prevMap, [keyCode]: [userId] }));
+    setTeamShortcutMappings((prevMap) => ({ ...prevMap, [keyCode]: userId }));
   }
 
   const value: AudioContextInterface = {
@@ -85,8 +144,11 @@ export default function AudioContextProvider({ children }) {
     teamShortcutMappings,
     isMuted: false,
     isSilenceMode: false,
+    hasRecPermit,
   };
 
+  console.log(value);
+
   return (
     <AudioContext.Provider value={value}>{children}</AudioContext.Provider>
   );