fix: Removed unnecessary rendering of microphone permission warning info.

src/Components/Patient/FileUpload.tsx

@@ -232,6 +232,26 @@ export const FileUpload = (props: FileUploadProps) => {
     { name: "Unarchived Files", value: "UNARCHIVED" },
     { name: "Archived Files", value: "ARCHIVED" },
   ]);
+  const [isMicPermission, setIsMicPermission] = useState(true);
+
+  useEffect(() => {
+    const checkMicPermission = async () => {
+      try {
+        const permissions = await navigator.permissions.query({
+          name: "microphone" as PermissionName,
+        });
+        setIsMicPermission(permissions.state === "granted");
+      } catch (error) {
+        setIsMicPermission(false);
+      }
+    };
+
+    checkMicPermission();
+
+    return () => {
+      setIsMicPermission(true);
+    };
+  }, []);
 
   const { data: patient } = useQuery(routes.getPatient, {
     pathParams: { id: patientId },
@@ -1510,8 +1530,9 @@ export const FileUpload = (props: FileUploadProps) => {
                         confirmAudioBlobExists={confirmAudioBlobExists}
                         reset={resetRecording}
                         setResetRecording={setResetRecording}
+                        handleSetMicPermission={setIsMicPermission}
                       />
-                      {!audioBlobExists && (
+                      {!audioBlobExists && !isMicPermission && (
                         <span className="text-sm font-medium text-warning-500">
                           <CareIcon
                             icon="l-exclamation-triangle"

src/Utils/VoiceRecorder.tsx

@@ -7,16 +7,21 @@ import { useTranslation } from "react-i18next";
 
 export const VoiceRecorder = (props: any) => {
   const { t } = useTranslation();
-  const { createAudioBlob, confirmAudioBlobExists, reset, setResetRecording } =
-    props;
+  const {
+    createAudioBlob,
+    confirmAudioBlobExists,
+    reset,
+    setResetRecording,
+    handleSetMicPermission,
+  } = props;
   const [
     audioURL,
     isRecording,
     startRecording,
     stopRecording,
     newBlob,
     resetRecording,
-  ] = useRecorder();
+  ] = useRecorder(handleSetMicPermission);
   const [time, setTime] = useState(0);
   createAudioBlob(newBlob);
   useEffect(() => {

src/Utils/useRecorder.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { Error } from "./Notifications";
 
-const useRecorder = () => {
+const useRecorder = (handleMicPermission) => {
   const [audioURL, setAudioURL] = useState("");
   const [isRecording, setIsRecording] = useState(false);
   const [recorder, setRecorder] = useState(null);
@@ -11,10 +11,19 @@ const useRecorder = () => {
     // Lazily obtain recorder first time we're recording.
     if (recorder === null) {
       if (isRecording) {
-        requestRecorder().then(setRecorder, () => {
-          Error({ msg: "Please grant microphone permission to record audio." });
-          setIsRecording(false);
-        });
+        requestRecorder().then(
+          (fetchedRecorder) => {
+            setRecorder(fetchedRecorder);
+            handleMicPermission(true);
+          },
+          () => {
+            Error({
+              msg: "Please grant microphone permission to record audio.",
+            });
+            setIsRecording(false);
+            handleMicPermission(false);
+          }
+        );
       }
       return;
     }