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>
   );
 };
 

src/contexts/Github.tsx

@@ -1,7 +1,6 @@
 import React, { createContext } from 'react';
 
 const data = require('../../data.json');
-console.log('d', data);
 
 interface GithubContextType {
   username: string;
@@ -13,7 +12,7 @@ const GithubProvider: React.FC = ({
   children,
 }) => (
   <GithubContext.Provider
-    value={{ data }}
+    value={{ ...data }}
   >
     {children}
   </GithubContext.Provider>

src/helpers/files.ts

@@ -0,0 +1,9 @@
+export 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);
+};

src/hooks/useDownloadAll.ts

@@ -0,0 +1,33 @@
+import { useState, useContext, useCallback } from 'react';
+import EncryptionContext from '../contexts/Encryption';
+import Zip from 'jszip';
+import { downloadLink } from '../helpers/files';
+
+type Statuses = 'packing' | 'ready';
+
+const useDownloadAll = () => {
+  const [status, setStatus] = useState<Statuses>('ready');
+  const { files } = useContext(EncryptionContext);
+  const allFilesReady = Object.values(files).filter(f => f.link).length > 1;
+
+  const downloadAll = useCallback(() => {
+    setStatus('packing');
+    const run = async () => {
+      const zip = new Zip();
+      Object.values(files).map((file) => {
+        zip.file(file.name, file.link!);
+      });
+      const link = await zip.generateAsync({ type: 'blob' });
+      setStatus('ready');
+      downloadLink('all-files.zip', link);
+    };
+    run();
+  }, [files]);
+
+  return {
+    status,
+    downloadAll: allFilesReady ? downloadAll : undefined,
+  };
+};
+
+export default useDownloadAll;

src/index.tsx

@@ -5,26 +5,28 @@ import 'antd/dist/antd.css';
 import { render }  from 'react-dom';
 import App from './App';
 
-OfflinePluginRuntime.install({
-  onUpdating: () => {
-    console.log('SW Event:', 'onUpdating');
-  },
-  onUpdateReady: () => {
-    console.log('SW Event:', 'onUpdateReady');
-    OfflinePluginRuntime.applyUpdate();
-  },
-  onUpdated: () => {
-    notification.success({
-      message: 'Your app has been updated',
-    });
-  },
-  onUpdateFailed: () => {
-    notification.warn({
-      message: 'Could not update to the latest version',
-    });
-    console.log('SW Event:', 'onUpdateFailed');
-  }
-});
+if (!__DEV__) {
+  OfflinePluginRuntime.install({
+    onUpdating: () => {
+      console.log('SW Event:', 'onUpdating');
+    },
+    onUpdateReady: () => {
+      console.log('SW Event:', 'onUpdateReady');
+      OfflinePluginRuntime.applyUpdate();
+    },
+    onUpdated: () => {
+      notification.success({
+        message: 'Your app has been updated',
+      });
+    },
+    onUpdateFailed: () => {
+      notification.warn({
+        message: 'Could not update to the latest version',
+      });
+      console.log('SW Event:', 'onUpdateFailed');
+    }
+  });
+}
 
 const root = document.createElement('div');
 root.style.height = '100%';

src/screens/Encrypt.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect } from 'react';
-import { Divider, PageHeader } from 'antd';
+import { Divider } from 'antd';
 import { useHistory } from 'react-router';
 import Add from '../components/Add';
 import FileList from '../components/FileList';