From d67900957c2531f46ceace65c371b34863ee45df Mon Sep 17 00:00:00 2001
From: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
Date: Sat, 21 Dec 2024 15:36:39 +0200
Subject: [PATCH] Fix voice recorder (#159)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Feat(profile-picture): set/remove profile picture

feat(profile-picture): set/remove profile picture

* admin mock

* fix: adjust sixing (#158)

fix: voice notes

* fix: voice recoder

---------

Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
---
 app/src/features/admin/components/FilteredList.tsx    |  0
 app/src/features/chats/ChatInput.tsx                  |  4 ++--
 app/src/features/chats/ChatInputIcons.tsx             | 10 ++++++++--
 app/src/features/chats/ChatItem.tsx                   |  4 ++--
 app/src/features/chats/Topbar.tsx                     |  1 -
 app/src/features/chats/media/MediaUploadComponent.tsx |  2 +-
 6 files changed, 13 insertions(+), 8 deletions(-)
 create mode 100644 app/src/features/admin/components/FilteredList.tsx

diff --git a/app/src/features/admin/components/FilteredList.tsx b/app/src/features/admin/components/FilteredList.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index aa139d0e..cc68a711 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/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>
           ) : (
diff --git a/app/src/features/chats/ChatInputIcons.tsx b/app/src/features/chats/ChatInputIcons.tsx
index 4d234f58..85c5ca6e 100644
--- a/app/src/features/chats/ChatInputIcons.tsx
+++ b/app/src/features/chats/ChatInputIcons.tsx
@@ -20,7 +20,7 @@ function ChatInputIcons() {
     setInput,
     file,
     setFile,
-    setIsFilePreviewOpen,
+    setIsFilePreviewOpen
   } = useContext(ChatInputContext);
 
   const toggleShowEmojies = () => {
@@ -28,11 +28,17 @@ function ChatInputIcons() {
   };
 
   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}
       />
     </>
diff --git a/app/src/features/chats/ChatItem.tsx b/app/src/features/chats/ChatItem.tsx
index 960b6ebf..246a515e 100644
--- a/app/src/features/chats/ChatItem.tsx
+++ b/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>
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index 90cfa423..fe6c4599 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/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";
 
diff --git a/app/src/features/chats/media/MediaUploadComponent.tsx b/app/src/features/chats/media/MediaUploadComponent.tsx
index 62693c8c..be0e1e3e 100644
--- a/app/src/features/chats/media/MediaUploadComponent.tsx
+++ b/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>>;
 }