cleanup

src/screens/Debug.tsx

@@ -0,0 +1,37 @@
+import React, { useMemo } from 'react';
+import {
+  Table,
+} from 'antd';
+import config from '../config';
+
+const columns = [{
+  title: 'Name',
+  dataIndex: 'name',
+  key: 'name',
+}, {
+  title: 'Value',
+  dataIndex: 'value',
+  key: 'value',
+}];
+
+const Debug: React.FC = () => {
+  const data = useMemo(() => {
+    const vals = {
+      'Repository': config.repo,
+      'User': config.user,
+      'Is Production': config.isProd,
+    };
+
+    return Object.entries(vals).map(([name, value]) => ({
+      key: name,
+      name,
+      value: value.toString(),
+    }));
+  }, []);
+
+  return (
+    <Table dataSource={data} columns={columns} />
+  );
+};
+
+export default Debug;

src/screens/Encrypt.tsx

@@ -1,16 +1,33 @@
 import React, { useContext } from 'react';
+import { Collapse, Badge } from 'antd';
+import Profile from '../components/Profile';
 import Add from '../components/Add';
 import FileList from '../components/FileList';
-import GithubContext from '../contexts/Github';
+import EncryptionContext from '../contexts/Encryption';
 
 const Encrypt: React.FC = () => {
-  const { username } = useContext(GithubContext);
+  const { files } = useContext(EncryptionContext);
   return (
-    <div>
-      <div>To: {username}</div>
-      <Add />
-      <FileList />
-    </div>
+    <>
+      <Collapse ghost defaultActiveKey={[2, 3]}>
+        <Collapse.Panel key={2} header="Encrypt">
+          <Add />
+        </Collapse.Panel>
+        <Collapse.Panel
+          key={3}
+          header={(
+            <Badge count={Object.keys(files).length} offset={[20, 7]}>
+              Files
+            </Badge>
+          )}
+        >
+          <FileList />
+        </Collapse.Panel>
+        <Collapse.Panel key={1} header="Profile">
+          <Profile />
+        </Collapse.Panel>
+      </Collapse>
+    </>
   );
 };