sec

src/components/File.tsx

@@ -1,8 +1,7 @@
-import React, {useMemo} from 'react';
+import React from 'react';
 import {
   List,
   Button,
-  Tooltip,
   Popconfirm,
 } from 'antd';
 import {
@@ -11,9 +10,8 @@ import {
   IssuesCloseOutlined,
   LockOutlined,
   DownloadOutlined,
-  ShareAltOutlined,
 } from '@ant-design/icons';
-import { FileType } from '../contexts/Encryption';
+import FileType from '../types/File';
 import { downloadLink } from '../helpers/files';
 
 interface Props {
@@ -22,22 +20,11 @@ interface Props {
 }
 
 const icons: {[name: string]: any} = {
-  encrypting: <SyncOutlined spin />,
+  processing: <SyncOutlined spin />,
   failed: <IssuesCloseOutlined />,
-  encrypted: <LockOutlined />,
+  success: <LockOutlined />,
 };
 
-const share = async (file: FileType, fileData: File[]) => {
-  try {
-    navigator.share({
-      title: file.name,
-      files: fileData,
-    } as any);
-  } catch (err) {
-    alert(err);
-  }
-}
-
 const IconText = ({ icon, text, ...props }) => (
   <Button
     {...props}
@@ -50,13 +37,9 @@ const FileView: React.FC<Props> = ({
   remove,
 }) => {
   const icon = icons[file.status];
-  const fileData = useMemo(() => [new File([file.link || ''], file.name, {
-    type: 'text/plain',
-  })], [file]);
-
   const actions = [];
 
-  if (file.link) {
+  if (file.blob) {
     actions.push(
       <Popconfirm
         title="Are you sure delete this file?"
@@ -73,23 +56,13 @@ const FileView: React.FC<Props> = ({
     );
   }
 
-  if (!!navigator.share && (navigator as any).canSare && (navigator as any).canShare({ files: fileData })) {
-    actions.push(
-      <IconText
-        icon={ShareAltOutlined}
-        text="Share"
-        onClick={() => share(file, fileData)}
-      />
-    );
-  }
-
-  if (file.link) {
+  if (file.blob) {
     actions.push(
       <IconText
         icon={DownloadOutlined}
         type="primary"
         text="Download"
-        onClick={() => downloadLink(file.name, file.link!)}
+        onClick={() => downloadLink(file.name, file.blob!)}
       />
     );
   }
@@ -101,7 +74,6 @@ const FileView: React.FC<Props> = ({
       <List.Item.Meta
         avatar={icon}
         title={file.name}
-        description={`Encrypted for ${file.reciever}`}
       />
     </List.Item>
   );

src/components/FileList.tsx

@@ -1,12 +1,19 @@
-import React, { useContext } from 'react';
+import React from 'react';
 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';
+import FileType from '../types/File';
 
-const Encrypt: React.FC = () => {
-  const { files, deleteFile } = useContext(EncryptionContext);
+interface Props {
+  files: {[id: string]: FileType};
+  deleteFile: (id: string) => void;
+}
+
+const Encrypt: React.FC<Props> = ({
+  files,
+  deleteFile,
+}) => {
   const { status, downloadAll } = useDownloadAll();
 
   if (Object.keys(files).length === 0) {

src/components/Row.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Theme } from '../theme';
-
-interface Props {
-  left?: React.ReactNode;
-  right?: React.ReactNode;
-  title?: string;
-  body?: string;
-  children?: React.ReactNode;
-}
-
-const Cell = styled.div<{ theme: Theme }>`
-  padding: ${({ theme }) => theme.margin.medium / 2}px; 
-  align-items: center;
-`;
-
-const Wrapper = styled(Cell)`
-  display: flex;
-  flex-direction: row;
-  background: #dfe6e9;
-  margin-top: ${({ theme }) => theme.margin.medium}px; 
-`;
-
-const Title = styled.h2`
-  padding: 0px;
-  font-size: 22px;
-  font-weight: bold;
-`
-
-const Main = styled(Cell)`
-  flex: 1;
-  justify-content: flex-start;
-`;
-
-const Row: React.FC<Props> = ({
-  left,
-  right,
-  title,
-  body,
-  children,
-}) => (
-  <Wrapper style={{ display: 'flex' }}>
-    {left}
-    <Main>
-      {title && <Title>{title}</Title>}
-      {body}
-      {children}
-    </Main>
-    {right}
-  </Wrapper>
-);
-
-export {
-  Cell,
-};
-
-export default Row;

src/components/decrypt/AddFile.tsx

@@ -0,0 +1,36 @@
+import React, { useContext, useCallback } from 'react';
+import styled from 'styled-components';
+import { Layout } from 'antd';
+import { FileAddTwoTone } from '@ant-design/icons';
+import { useDropzone } from 'react-dropzone';
+import DecryptionContext from '../../contexts/Decryption';
+
+const Icon = styled(FileAddTwoTone)`
+  font-size: 100px;
+  margin-bottom: 20px;
+`;
+
+const DropWrapper = styled(Layout)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding: 50px;
+`;
+
+const AddFile: React.FC = () => {
+  const { addFile } = useContext(DecryptionContext);
+  const onDrop = useCallback(acceptedFiles => {
+    acceptedFiles.forEach(addFile);
+  }, [])
+  const {getRootProps, getInputProps} = useDropzone({ onDrop });
+  return (
+    <DropWrapper {...getRootProps()}>
+      <input {...getInputProps()} />
+      <Icon />
+      <p>Drag 'n' drop some files here, or click to select files</p>
+    </DropWrapper>
+  );
+};
+
+export default AddFile;

src/components/encrypt/AddFile.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { Layout } from 'antd';
 import { FileAddTwoTone } from '@ant-design/icons';
 import { useDropzone } from 'react-dropzone';
-import EncryptionContext from '../contexts/Encryption';
+import EncryptionContext from '../../contexts/Encryption';
 
 const Icon = styled(FileAddTwoTone)`
   font-size: 100px;

src/components/encrypt/AddText.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useContext } from 'react';
 import { Input, Form, Button } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
-import EncryptionContext from '../contexts/Encryption';
+import EncryptionContext from '../../contexts/Encryption';
 
 const AddText : React.FC = () => {
   const { addText } = useContext(EncryptionContext);