feat: add website and folder upload and download (#260)

* feat: add website and folder upload and download

* feat: download-share-upload navigation

* fix: check for files length in hasIndexDocument

* fix: change router dependency

* refactor: switch to @ethersphere/manfest-js

* fix: hide previews on dropzone, fix spinner align, hide 0 size display

* feat: add upload and download history

* refactor: change drag and drop text

* feat: make history ux better

* refactor: improve code based on review

* build: add missing react-router dependency

* ci: remove beeload

* revert(ci): remove beeload

This reverts commit 4ce6cb0045a2d9aea3047ab395d214d8d368c532.

src/pages/files/Upload.tsx

@@ -1,32 +1,20 @@
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
+import { useHistory } from 'react-router-dom'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { Context as FileContext } from '../../providers/File'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
-import { detectIndexHtml } from '../../utils/file'
-import { SwarmFile } from '../../utils/SwarmFile'
+import { ROUTES } from '../../routes'
+import { detectIndexHtml, getAssetNameFromFiles } from '../../utils/file'
+import { HISTORY_KEYS, putHistory } from '../../utils/local-storage'
 import { CreatePostageStampModal } from '../stamps/CreatePostageStampModal'
 import { SelectPostageStampModal } from '../stamps/SelectPostageStampModal'
 import { AssetPreview } from './AssetPreview'
-import { PostUploadSummary } from './PostUploadSummary'
 import { StampPreview } from './StampPreview'
 import { UploadActionBar } from './UploadActionBar'
-import { UploadArea } from './UploadArea'
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    content: { marginTop: theme.spacing(2) },
-    loadingProgress: { textAlign: 'center', padding: '50px' },
-  }),
-)
-
-const MAX_FILE_SIZE = 1_000_000_000 // 1 gigabyte
-
-export default function Files(): ReactElement {
-  const classes = useStyles()
-  const [dropzoneKey, setDropzoneKey] = useState(0)
-  const [files, setFiles] = useState<SwarmFile[]>([])
-  const [uploadReference, setUploadReference] = useState('')
+export function Upload(): ReactElement {
   const [isBuyingStamp, setBuyingStamp] = useState(false)
   const [isSelectingStamp, setSelectingStamp] = useState(false)
   const [stamp, setStamp] = useState<EnrichedPostageBatch | null>(null)
@@ -34,7 +22,14 @@ export default function Files(): ReactElement {
 
   const { stamps, refresh } = useContext(Context)
   const { beeApi } = useContext(SettingsContext)
+  const { files, setFiles } = useContext(FileContext)
   const { enqueueSnackbar } = useSnackbar()
+  const history = useHistory()
+
+  if (!files.length) {
+    setFiles([])
+    history.replace(ROUTES.UPLOAD)
+  }
 
   useEffect(() => {
     refresh()
@@ -51,9 +46,14 @@ export default function Files(): ReactElement {
 
     beeApi
       .uploadFiles(stamp.batchID, files as unknown as File[], { indexDocument })
-      .then(hash => setUploadReference(hash.reference))
-      .catch(e => enqueueSnackbar(`Error uploading: ${e.message}`, { variant: 'error' }))
-      .finally(() => setUploading(false))
+      .then(hash => {
+        putHistory(HISTORY_KEYS.UPLOAD_HISTORY, hash.reference, getAssetNameFromFiles(files))
+        history.replace(ROUTES.HASH.replace(':hash', hash.reference))
+      })
+      .catch(e => {
+        enqueueSnackbar(`Error uploading: ${e.message}`, { variant: 'error' })
+        setUploading(false)
+      })
   }
 
   const reset = () => {
@@ -62,23 +62,12 @@ export default function Files(): ReactElement {
     setUploading(false)
   }
 
-  const uploadNew = () => {
-    setTimeout(() => {
-      reset()
-      setDropzoneKey(dropzoneKey + 1)
-      setUploadReference('')
-    }, 0)
-  }
-
   return (
     <>
-      {files.length ? (
-        <AssetPreview files={files} />
-      ) : (
-        <UploadArea maximumSizeInBytes={MAX_FILE_SIZE} setFiles={setFiles} />
-      )}
-      {stamp !== null && !uploadReference ? <StampPreview stamp={stamp} /> : null}
-      {files.length && !uploadReference ? (
+      <HistoryHeader>Upload</HistoryHeader>
+      {files.length && <AssetPreview files={files} />}
+      {stamp !== null ? <StampPreview stamp={stamp} /> : null}
+      {files.length && (
         <UploadActionBar
           canSelectStamp={stamps !== null && stamps.length > 0}
           hasSelectedStamp={stamp !== null}
@@ -89,12 +78,7 @@ export default function Files(): ReactElement {
           onClearStamp={() => setStamp(null)}
           isUploading={isUploading}
         />
-      ) : null}
-      <div className={classes.content}>
-        {uploadReference && (
-          <PostUploadSummary onUploadNewClick={() => uploadNew()} uploadReference={uploadReference} />
-        )}
-      </div>
+      )}
       {isBuyingStamp ? <CreatePostageStampModal onClose={() => setBuyingStamp(false)} /> : null}
       {stamps && isSelectingStamp ? (
         <SelectPostageStampModal