update

src/components/File.tsx

@@ -14,22 +14,13 @@ import {
   ShareAltOutlined,
 } from '@ant-design/icons';
 import { FileType } from '../contexts/Encryption';
+import { downloadLink } from '../helpers/files';
 
 interface Props {
   remove: () => void;
   file: FileType;
 }
 
-const downloadLink = (name: string, blob: Blob) => {
-  const url = URL.createObjectURL(blob);
-  const downloadLink = document.createElement('a');
-  downloadLink.href = url;
-  downloadLink.download = name;
-  document.body.appendChild(downloadLink);
-  downloadLink.click();
-  document.body.removeChild(downloadLink);
-};
-
 const icons: {[name: string]: any} = {
   encrypting: <SyncOutlined spin />,
   failed: <IssuesCloseOutlined />,

src/components/FileList.tsx

@@ -1,25 +1,39 @@
 import React, { useContext } from 'react';
-import { List, Empty } from 'antd';
+import { Space, List, Empty, Button } from 'antd';
+import { DownloadOutlined } from '@ant-design/icons';
 import EncryptionContext from '../contexts/Encryption';
+import useDownloadAll from '../hooks/useDownloadAll';
 import File from './File';
 
 const Encrypt: React.FC = () => {
   const { files, deleteFile } = useContext(EncryptionContext);
+  const { status, downloadAll } = useDownloadAll();
 
   if (Object.keys(files).length === 0) {
     return <Empty />
   }
 
   return (
-    <List>
-      {Object.entries(files).map(([id, file]) => (
-        <File
-          key={id}
-          file={file}
-          remove={() => deleteFile(id)}
-        />
-      ))}
-    </List>
+    <Space direction="vertical" style={{width: '100%' }}>
+      <List>
+        {Object.entries(files).map(([id, file]) => (
+          <File
+            key={id}
+            file={file}
+            remove={() => deleteFile(id)}
+          />
+        ))}
+      </List>
+      {downloadAll && (
+        <Button
+          icon={<DownloadOutlined />}
+          disabled={status !== 'ready'}
+          onClick={downloadAll}
+        >
+          Download all
+        </Button>
+      )}
+    </Space>
   );
 };