feat: make download recording

src/pages/Recording/Recording.tsx

@@ -6,7 +6,7 @@ import CButton from "../../components/CButton";
 import { useTranslation } from "react-i18next";
 import { FaMicrophoneLines } from "react-icons/fa6";
 import { FaImage } from "react-icons/fa";
-import { IoCloudDownloadOutline, IoPlay } from "react-icons/io5";
+import { IoCloudDownloadOutline } from "react-icons/io5";
 import {
   useAppDispatch,
   useAppSelector,
@@ -15,10 +15,12 @@ import {
 import { fetchAudioFiles } from "../../stores/slices/deviceSlice";
 import { AiOutlineAudio } from "react-icons/ai";
 import { APPS, type IApp } from "../../constants/apps";
+import type { IAudioList } from "../../types/device.types";
 
 const Recording: React.FC = () => {
   const [selectedApp, setSelectedApp] = useState<IApp>(APPS[0]);
   const [selectedTab, setSelectedTab] = useState<"audio" | "image">("audio");
+  const [downloaded, setDownloaded] = useState<Set<number>>(new Set());
   const today = new Date().toISOString().split("T")[0];
   const [fromDate, setFromDate] = useState(today);
   const [toDate, setToDate] = useState(today);
@@ -58,6 +60,17 @@ const Recording: React.FC = () => {
     }
   };
 
+  const handleDownload = (audio: IAudioList, index: number) => {
+    const link = document.createElement("a");
+    link.href = audio.url;
+    link.download = `recording_${index}.${audio.file_ext}`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+
+    setDownloaded((prev) => new Set(prev).add(index));
+  };
+
   useEffect(() => {
     if (selectedDevice?.id) {
       filterAudioHistory();
@@ -83,6 +96,8 @@ const Recording: React.FC = () => {
 
               <div className="recording__audio__list">
                 {audioList.map((audio, index) => {
+                  const isDownloaded = downloaded.has(index);
+
                   return (
                     <div key={index} className="recording__audio__item">
                       <div className="recording__audio__item__info">
@@ -95,8 +110,18 @@ const Recording: React.FC = () => {
                       </div>
 
                       <div className="recording__audio__item__info">
-                        <IoCloudDownloadOutline className="recording__audio__item__icon" />
-                        <IoPlay className="recording__audio__item__icon" />
+                        <IoCloudDownloadOutline
+                          className={`recording__audio__item__icon ${
+                            isDownloaded ? "disabled" : ""
+                          }`}
+                          onClick={() =>
+                            !isDownloaded && handleDownload(audio, index)
+                          }
+                          style={{
+                            cursor: isDownloaded ? "not-allowed" : "pointer",
+                            opacity: isDownloaded ? 0.4 : 1,
+                          }}
+                        />
                       </div>
                     </div>
                   );