Improvments

src/components/File.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import {
   List,
   Button,
@@ -8,16 +8,18 @@ import {
   SyncOutlined,
   IssuesCloseOutlined,
   LockOutlined,
+  DownloadOutlined,
+  ShareAltOutlined,
 } from '@ant-design/icons';
 import { FileType } from '../contexts/Encryption';
-import { CheckCircle, XCircle, Download, Trash, Loader } from 'react-feather';
 
 interface Props {
   remove: () => void;
   file: FileType;
 }
 
-const downloadLink = (name: string, url: string) => {
+const downloadLink = (name: string, blob: Blob) => {
+  const url = URL.createObjectURL(blob);
   const downloadLink = document.createElement('a');
   downloadLink.href = url;
   downloadLink.download = name;
@@ -32,6 +34,17 @@ const icons: {[name: string]: any} = {
   encrypted: <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}
@@ -46,24 +59,47 @@ const FileView: React.FC<Props> = ({
   remove,
 }) => {
   const icon = icons[file.status];
+  const fileData = useMemo(() => [new File([file.link || ''], file.name, {
+    type: 'text/plain',
+  })], [file]);
 
-  return (
+  const actions = [];
-    <List.Item
+
-      actions={file.link ? [(
+  if (file.link) {
+    actions.push(
       <IconText
         icon={DeleteOutlined}
         danger
         text="Delete"
         onClick={remove}
       />
-      ), (
+    );
+  }
+
+  if (!!navigator.share && (navigator as any).canSare && (navigator as any).canShare({ files: fileData })) {
+    actions.push(
       <IconText
-          icon={DeleteOutlined}
+        icon={ShareAltOutlined}
+        text="Share"
+        onClick={() => share(file, fileData)}
+      />
+    );
+  }
+
+  if (file.link) {
+    actions.push(
+      <IconText
+        icon={DownloadOutlined}
         type="primary"
         text="Download"
         onClick={() => downloadLink(file.name, file.link!)}
       />
-      )]: []}
+    );
+  }
+
+  return (
+    <List.Item
+      actions={actions}
     >
       <List.Item.Meta
         avatar={icon}

src/contexts/Encryption.tsx

@@ -9,7 +9,7 @@ export interface FileType {
   reciever: string;
   status: 'encrypting' | 'failed' | 'encrypted';
   error?: any;
-  link?: string;
+  link?: Blob;
 }
 
 interface EncryptionContextType {
@@ -39,8 +39,8 @@ const encrypt = async (keys: string[], content: string) => {
   const blob = new Blob([data], {
     type: 'text/text',
   });
-  const url = URL.createObjectURL(blob);
+  //const url = URL.createObjectURL(blob);
-  return url;
+  return blob;
 };
 
 const EncryptionProvider: React.FC = ({

src/contexts/Github.tsx

@@ -33,6 +33,10 @@ const GithubContext = createContext<GithubContextType>({
   state: 'failed',
 });
 
+const headers = {
+  authorization: "token 22924bb3da8465e7e8575740f2fc0a4971c908db",
+};
+
 const GithubProvider: React.FC<Props> = ({
   username,
   children,
@@ -45,8 +49,8 @@ const GithubProvider: React.FC<Props> = ({
   useEffect(() => {
     const run = async () => {
       try {
-        const keysRes = await fetch(`https://api.github.com/users/${username}/gpg_keys`);
+        const keysRes = await fetch(`https://api.github.com/users/${username}/gpg_keys`, { headers });
-        const userRes = await fetch(`https://api.github.com/users/${username}`);
+        const userRes = await fetch(`https://api.github.com/users/${username}`, { headers });
         const keys = await keysRes.json();
         const user = await userRes.json();
         setState('ready');