Servers API

frontend_reactjs/src/components/FolderViewer.tsx

@@ -1,4 +1,4 @@
-import { useDocuments, useFolders } from '../hooks/swrHooks'
+import { useDocuments, useDownload, useFolders } from '../hooks/swrHooks'
 import { IDocument, IDocumentFolder } from '../interfaces/documents'
 import { Box, Breadcrumbs, Button, Card, CardActionArea, CircularProgress, Divider, IconButton, Input, InputLabel, LinearProgress, Link, List, ListItem, ListItemButton, SxProps } from '@mui/material'
 import { Cancel, Close, Download, Folder, InsertDriveFile, Upload, UploadFile } from '@mui/icons-material'
@@ -45,7 +45,29 @@ function ItemFolder({ folder, index, handleFolderClick, ...props }: FolderProps)
     )
 }
 
+const handleSave = async (file: Blob, filename: string) => {
+    const link = document.createElement('a')
+    link.href = window.URL.createObjectURL(file)
+    link.download = filename
+    link.click()
+    link.remove()
+    window.URL.revokeObjectURL(link.href)
+}
+
 function ItemDocument({ doc, index, handleDocumentClick, ...props }: DocumentProps) {
+    const [shouldFetch, setShouldFetch] = useState(false)
+
+    const { file, isLoading } = useDownload(shouldFetch ? doc?.document_folder_id : null, shouldFetch ? doc?.id : null)
+
+    useEffect(() => {
+        if (shouldFetch) {
+            if (file) {
+                handleSave(file, doc.name)
+                setShouldFetch(false)
+            }
+        }
+    }, [shouldFetch, file])
+
     return (
         <ListItemButton>
             <Box
@@ -59,11 +81,17 @@ function ItemDocument({ doc, index, handleDocumentClick, ...props }: DocumentPro
             <Box>
                 <IconButton
                     onClick={() => {
-                        console.log("TODO: save")
+                        if (!isLoading) {
+                            setShouldFetch(true)
+                        }
                     }}
                     sx={{ ml: 'auto' }}
                 >
-                    <Download />
+                    {isLoading ?
+                        <CircularProgress size={24} variant='indeterminate' />
+                        :
+                        <Download />
+                    }
                 </IconButton>
             </Box>
         </ListItemButton>