Fix voice recorder

app/src/features/chats/ChatInput.tsx

@@ -80,7 +80,7 @@ function ChatInput() {
     isEmojiSelectorOpen,
     handleSubmit,
     showForwardUsers,
-    handleClose,
+    handleClose
   } = useContext(ChatInputContext);
 
   const chats = useAppSelector((state) => state.chats.chats);
@@ -133,7 +133,7 @@ function ChatInput() {
                   data-testid="send-button"
                 />
               ) : (
-                <VoiceRecorder chatId={chatId} />
+                <VoiceRecorder />
               )}
             </Input>
           ) : (

app/src/features/chats/ChatInputIcons.tsx

@@ -20,19 +20,25 @@ function ChatInputIcons() {
     setInput,
     file,
     setFile,
-    setIsFilePreviewOpen,
+    setIsFilePreviewOpen
   } = useContext(ChatInputContext);
 
   const toggleShowEmojies = () => {
     setIsEmojiSelectorOpen((show: boolean) => !show);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    setIsEmojiSelectorOpen(false);
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       handleSubmit(e as unknown as Event);
     }
   };
+  const handleSetFile = (file: File) => {
+    setIsEmojiSelectorOpen(false);
+    setFile(file);
+    setIsFilePreviewOpen(true);
+  };
 
   return (
     <>
@@ -50,7 +56,7 @@ function ChatInputIcons() {
 
       <MediaUploadComponent
         file={file}
-        setFile={setFile}
+        setFile={handleSetFile}
         setIsFilePreviewOpen={setIsFilePreviewOpen}
       />
     </>

app/src/features/chats/ChatItem.tsx

@@ -59,7 +59,7 @@ type ChatItemProps = {
 
 const ChatItem = ({
   chat: { _id, lastMessage, name, photo },
-  onClick,
+  onClick
 }: ChatItemProps) => {
   const navigate = useNavigate();
 
@@ -86,7 +86,7 @@ const ChatItem = ({
           <Timestamp data-testid="chat-timestamp">
             {new Date(timestamp).toLocaleTimeString("en-US", {
               hour: "2-digit",
-              minute: "2-digit",
+              minute: "2-digit"
             }) || "No messages"}
           </Timestamp>
         </ChatHeader>

app/src/features/chats/Topbar.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useState } from "react";
-import { useCallback, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import styled from "styled-components";
 

app/src/features/chats/media/MediaUploadComponent.tsx

@@ -10,7 +10,7 @@ const InvisibleButton = styled.div`
 `;
 interface ChildProps {
   file: File | null;
-  setFile: React.Dispatch<React.SetStateAction<File | null>>;
+  setFile: (file: File) => void;
   setIsFilePreviewOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }