feat: improve upload flow (#240)

* feat: separate flow for folder and file uploads

* feat: add basic index document detection

* feat(wip): separate preview step

* fix: fix kb and mb units

* feat: add post upload summary, add some styling

* feat: upload flow

* fix: change element order and add conditional rendering

* refactor: remove unused variables for now

* fix: put back stamp creation to stamp page

* refactor: rework postage stamps and grid

* feat: add website and folder icons

* feat: add asset preview to download flow, add file icon

* feat: add basic design to postage stamp selection dialog

* feat: add web icon, shorten stamp in preview

* feat: extract swarm hash in download flow

* fix: extract swarmbutton and solve icon hover and focus color

* fix: always show buy button on stamp page

* refactor: downgrade

* refactor: speed up icon transition

* style: improve download buttons

* style: change [back to upload] icon

* style: add spacing before swarm gateway text

* style: post upload summary spacing

* refactor: drop verticalspacing and use box

* refactor: merge icons to one component

* refactor: use conditions instead of weird assignment

* docs: explain filter(x => x)

* refactor: generalize capacity

* refactor: avoid passing arrow functions

* refactor: get rid of PaperGridContainer and Container

* fix: fix hover color for postage stamps

* feat: add disabled and loading state to buttons

* fix: make drag and drop work for websites

* feat: handle folders and non existing hashes

* fix: provide empty default value to select to avoid console warning

* style: remove body2 font variants

* fix: remove typo

* feat: disable folder upload, add website upload

* fix: disable showPreviews to avoid flickering

* feat(temp): remove folder upload

* fix: remove stuck focus on buttons even after rendering different buttons

* style: merge hover and focus styles, fix safari text wrap issue

* style: remove dropbox outline in safari

src/pages/files/Download.tsx

@@ -1,28 +1,91 @@
-import { ReactElement, useState, useContext } from 'react'
-import { Context as SettingsContext } from '../../providers/Settings'
-import ExpandableListItemInput from '../../components/ExpandableListItemInput'
 import { Utils } from '@ethersphere/bee-js'
+import { Box } from '@material-ui/core'
+import { useSnackbar } from 'notistack'
+import { ReactElement, useContext, useState } from 'react'
+import ExpandableListItemInput from '../../components/ExpandableListItemInput'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { extractSwarmHash } from '../../utils'
+import { convertBeeFileToBrowserFile } from '../../utils/file'
+import { SwarmFile } from '../../utils/SwarmFile'
+import { AssetPreview } from './AssetPreview'
+import { DownloadActionBar } from './DownloadActionBar'
 
 export default function Files(): ReactElement {
-  const { apiUrl } = useContext(SettingsContext)
+  const { apiUrl, beeApi } = useContext(SettingsContext)
 
+  const [reference, setReference] = useState('')
   const [referenceError, setReferenceError] = useState<string | undefined>(undefined)
+  const [downloadedFile, setDownloadedFile] = useState<Partial<File> | null>(null)
+
+  const { enqueueSnackbar } = useSnackbar()
 
   const validateChange = (value: string) => {
     if (Utils.isHexString(value, 64) || Utils.isHexString(value, 128)) setReferenceError(undefined)
     else setReferenceError('Incorrect format of swarm hash. Expected 64 or 128 hexstring characters.')
   }
 
+  function onDownload() {
+    window.open(`${apiUrl}/bzz/${reference}/`, '_blank')
+  }
+
+  async function onSwarmIdentifier(identifier: string) {
+    if (!beeApi) {
+      return
+    }
+    setReference(identifier)
+    try {
+      const response = await beeApi.downloadFile(identifier)
+      setDownloadedFile(convertBeeFileToBrowserFile(response))
+    } catch (error: unknown) {
+      let message = typeof error === 'object' && error !== null && Reflect.get(error, 'message')
+
+      if (message.includes('path address not found')) {
+        message = 'The specified hash does not have an index document set.'
+      }
+
+      if (message.includes('Not Found: Not Found')) {
+        message = 'The specified hash was not found.'
+      }
+      enqueueSnackbar(<span>Error: {message || 'Unknown'}</span>, { variant: 'error' })
+    }
+  }
+
+  if (downloadedFile) {
+    return (
+      <>
+        <Box mb={4}>
+          <AssetPreview files={[new SwarmFile(downloadedFile as File)]} />
+        </Box>
+        <DownloadActionBar onCancel={() => setDownloadedFile(null)} onDownload={onDownload} />
+      </>
+    )
+  }
+
+  function recognizeSwarmHash(value: string) {
+    if (value.length < 64) {
+      return value
+    }
+
+    const hash = extractSwarmHash(value)
+
+    if (hash) {
+      return hash
+    }
+
+    return value
+  }
+
   return (
     <ExpandableListItemInput
       label="Swarm Hash"
-      onConfirm={value => window.open(`${apiUrl}/bzz/${value}`, '_blank')}
+      onConfirm={value => onSwarmIdentifier(value)}
       onChange={validateChange}
       helperText={referenceError}
-      confirmLabel={'Download'}
+      confirmLabel={'Search'}
       confirmLabelDisabled={Boolean(referenceError)}
       placeholder="e.g. 31fb0362b1a42536134c86bc58b97ac0244e5c6630beec3e27c2d1cecb38c605"
       expandedOnly
+      mapperFn={value => recognizeSwarmHash(value)}
     />
   )
 }