Download INI file, closes: #869

src/components/TopBar.tsx

@@ -58,6 +58,8 @@ import { logOutSuccessful } from '../pages/auth/notifications';
 import { TuneDataState } from '../types/state';
 import { removeFilenameSuffix } from '../pocketbase';
 import useServerStorage from '../hooks/useServerStorage';
+import useDb from '../hooks/useDb';
+import { Collections } from '../@types/pocketbase-types';
 
 const { Header } = Layout;
 const { useBreakpoint } = Grid;
@@ -88,6 +90,7 @@ const TopBar = ({
   const uploadMatch = useMatch(Routes.UPLOAD);
   const hubMatch = useMatch(Routes.HUB);
   const { downloadFile } = useServerStorage();
+  const { getIni } = useDb();
   const downloadAnchorRef = useRef<HTMLAnchorElement | null>(null);
   const logoutClick = useCallback(() => {
     logout();
@@ -112,7 +115,7 @@ const TopBar = ({
       key: filename,
       label: removeFilenameSuffix(filename),
       icon: logsExtensionsIcons[filename.slice(-3)],
-      onClick: () => downloadFile(tuneData!.id, filename, downloadAnchorRef.current!),
+      onClick: () => downloadFile(Collections.Tunes, tuneData!.id, filename, downloadAnchorRef.current!),
     })),
   };
 
@@ -124,7 +127,7 @@ const TopBar = ({
       key: filename,
       label: removeFilenameSuffix(filename),
       icon: logsExtensionsIcons[filename.slice(-3)],
-      onClick: () => downloadFile(tuneData!.id, filename, downloadAnchorRef.current!),
+      onClick: () => downloadFile(Collections.Tunes, tuneData!.id, filename, downloadAnchorRef.current!),
     })),
   };
 
@@ -138,7 +141,7 @@ const TopBar = ({
           label: 'Download',
           icon: <FileTextOutlined />,
           key: 'download',
-          onClick: () => downloadFile(tuneData!.id, tuneData!.tuneFile, downloadAnchorRef.current!),
+          onClick: () => downloadFile(Collections.Tunes, tuneData!.id, tuneData!.tuneFile, downloadAnchorRef.current!),
         },
         {
           label: 'Open in app',
@@ -149,6 +152,19 @@ const TopBar = ({
         },
       ],
     },
+    {
+      label: 'INI',
+      icon: <FileTextOutlined />,
+      key: 'ini',
+      onClick: async () => {
+        if (tuneData?.customIniFile) {
+          downloadFile(Collections.Tunes, tuneData!.id, tuneData!.customIniFile, downloadAnchorRef.current!);
+        } else {
+          const ini = await getIni(tuneData!.signature);
+          downloadFile(Collections.IniFiles, ini!.id, ini!.file, downloadAnchorRef.current!);
+        }
+      },
+    },
     (tuneData?.logFiles || []).length > 0 ? { ...downloadLogsItems } : null,
     (tuneData?.toothLogFiles || []).length > 0 ? { ...downloadToothLogsItems } : null,
   ];

src/hooks/useServerStorage.ts

@@ -47,10 +47,10 @@ const useServerStorage = () => {
       signal,
     ).then((response) => response);
 
-  const downloadFile = async (recordId: string, filename: string, anchorRef: HTMLAnchorElement) => {
+  const downloadFile = async (collection: Collections, recordId: string, filename: string, anchorRef: HTMLAnchorElement) => {
     downloading();
 
-    const response = await fetch(buildFileUrl(Collections.Tunes, recordId, filename));
+    const response = await fetch(buildFileUrl(collection, recordId, filename));
     const data = Pako.inflate(new Uint8Array(await response.arrayBuffer()));
     const url = window.URL.createObjectURL(new Blob([data]));
 
@@ -68,7 +68,7 @@ const useServerStorage = () => {
     fetchTuneFile: (recordId: string, filename: string): Promise<ArrayBuffer> => fetchTuneFile(recordId, filename),
     fetchINIFile: (signature: string): Promise<ArrayBuffer> => fetchINIFile(signature),
     fetchLogFileWithProgress: (recordId: string, filename: string, onProgress?: OnProgress, signal?: AbortSignal): Promise<ArrayBuffer> => fetchLogFileWithProgress(recordId, filename, onProgress, signal),
-    downloadFile: (recordId: string, filename: string, anchorRef: HTMLAnchorElement): Promise<void> => downloadFile(recordId, filename, anchorRef),
+    downloadFile: (collection: Collections, recordId: string, filename: string, anchorRef: HTMLAnchorElement): Promise<void> => downloadFile(collection, recordId, filename, anchorRef),
   };
 };