init

src/components/Add.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Theme } from '../theme';
+import AddText from './AddText';
+import AddFile from './AddFile';
+
+const Wrapper = styled.div`
+`;
+
+const Top = styled.div`
+  display: flex;
+`;
+
+const Button = styled.button<{
+  active: boolean;
+  theme: Theme;
+}>`
+  background: ${({ active }) => active ? '#2c3e50' : 'transparent'};
+  padding: ${({ theme }) => theme.margin.medium}px; 
+  border: none;
+  font: inherit;
+  color: inherit;
+`;
+
+const Panel = styled.div<{
+  theme: Theme;
+}>`
+  background: #2c3e50;
+  color: #fff;
+  padding: ${({ theme }) => theme.margin.medium}px; 
+`;
+
+const Add: React.FC = () => {
+  const [type, setType] = useState<'file' | 'text'>('text');
+
+  return (
+    <Wrapper>
+      <Top>
+        <Button active={type==='text'} onClick={() => setType('text')}>Text</Button>
+        <Button active={type==='file'} onClick={() => setType('file')}>File</Button>
+      </Top>
+      <Panel>
+        {type === 'file' && <AddFile />}
+        {type === 'text' && <AddText />}
+      </Panel>
+    </Wrapper>
+  );
+};
+
+export default Add;

src/components/AddFile.tsx

@@ -0,0 +1,32 @@
+import React, { useContext, useCallback } from 'react';
+import styled from 'styled-components';
+import { useDropzone } from 'react-dropzone';
+import EncryptionContext from '../contexts/Encryption';
+import { Upload } from 'react-feather';
+
+const DropWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding: 50px;
+`;
+
+const AddFile: React.FC = () => {
+  const { addFile } = useContext(EncryptionContext);
+  const onDrop = useCallback(acceptedFiles => {
+    acceptedFiles.forEach(addFile);
+  }, [])
+  const {getRootProps, getInputProps} = useDropzone({ onDrop });
+  return (
+    <div>
+    <DropWrapper {...getRootProps()}>
+      <input {...getInputProps()} />
+      <Upload size={200} />
+      <p>Drag 'n' drop some files here, or click to select files</p>
+    </DropWrapper>
+    </div>
+  );
+};
+
+export default AddFile;

src/components/AddText.tsx

@@ -0,0 +1,41 @@
+import React, { useState, useCallback, useContext } from 'react';
+import styled from 'styled-components';
+import EncryptionContext from '../contexts/Encryption';
+import { Theme } from '../theme';
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+
+const Text = styled.textarea<{
+  theme: Theme;
+}>`
+  border: none;
+  height: 200px;
+  background: transparent;
+  color: inherit;
+  padding: ${({ theme }) => theme.margin.medium}px; 
+  font: inherit;
+`;
+
+const AddText : React.FC = () => {
+  const { addText } = useContext(EncryptionContext);
+  const [text, setText] = useState('');
+
+  const add = useCallback(() => {
+    addText(text);
+    setText('');
+  }, [text, addText]);
+
+  return (
+    <Wrapper>
+      <Text placeholder="Enter you message..." value={text} onChange={evt => setText(evt.target.value)} />
+      <button onClick={add}>Save</button>
+    </Wrapper>
+  );
+};
+
+export default AddText;
+

src/components/File.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import styled from 'styled-components';
+import { File } from '../contexts/Encryption';
+import { CheckCircle, XCircle, Download, Trash, Loader } from 'react-feather';
+import Row, { Cell } from './Row';
+
+interface Props {
+  remove: () => void;
+  file: File;
+}
+
+const Button = styled.button`
+  background: none;
+  border: none;
+  color: green;
+`;
+
+const icons: {[name: string]: typeof CheckCircle} = {
+  encrypting: Loader,
+  failed: XCircle,
+  encrypted: CheckCircle,
+};
+
+const FileView: React.FC<Props> = ({
+  file,
+  remove,
+}) => {
+  const Icon = icons[file.status];
+
+  return (
+    <Row
+      left={(
+        <Cell><Icon /></Cell>
+      )}
+      title={file.name}
+      body={`encrypted for ${file.reciever}`}
+      right={!!file.link && (
+        <>
+          <Cell>
+            <a target="_blank" href={file.link}>
+              <Button><Download /></Button>
+            </a>
+          </Cell>
+          <Cell>
+            <Button onClick={remove}><Trash /></Button>
+          </Cell>
+        </>
+      )}
+    />
+  );
+};
+
+export default FileView;

src/components/FileList.tsx

@@ -0,0 +1,21 @@
+import React, { useContext } from 'react';
+import EncryptionContext from '../contexts/Encryption';
+import File from './File';
+
+const Encrypt: React.FC = () => {
+  const { files, deleteFile } = useContext(EncryptionContext);
+
+  return (
+    <div>
+      {Object.entries(files).map(([id, file]) => (
+        <File
+          key={id}
+          file={file}
+          remove={() => deleteFile(id)}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default Encrypt;

src/components/Row.tsx

@@ -0,0 +1,58 @@
+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;