fix: file download redirects to bee node, upload limited to 1 file (#62)

* fix: file download redirects to bee node, upload limited to 1 file, error handling

* fix: upload error handling

* chore: altered naming as per PR review

* chore: renamed retrieve and browse to download

src/pages/files/index.tsx

@@ -2,14 +2,15 @@ import { ReactElement, useState } from 'react'
 import { beeApi } from '../../services/bee'
 
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
-import { Paper, InputBase, IconButton, Button, Container, CircularProgress } from '@material-ui/core'
+import { Paper, InputBase, IconButton, Button, Container, CircularProgress, FormHelperText } from '@material-ui/core'
 import { Search } from '@material-ui/icons'
 import { DropzoneArea } from 'material-ui-dropzone'
 import ClipboardCopy from '../../components/ClipboardCopy'
 
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import { Data, FileData } from '@ethersphere/bee-js'
 import { useApiHealth, useDebugApiHealth } from '../../hooks/apiHooks'
+import { apiHost } from '../../constants'
+import { Utils } from '@ethersphere/bee-js'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -17,7 +18,6 @@ const useStyles = makeStyles((theme: Theme) =>
       padding: '2px 4px',
       display: 'flex',
       alignItems: 'center',
-      width: 400,
     },
     input: {
       marginLeft: theme.spacing(1),
@@ -36,133 +36,114 @@ const useStyles = makeStyles((theme: Theme) =>
 export default function Files(): ReactElement {
   const classes = useStyles()
 
-  const [inputMode, setInputMode] = useState<'browse' | 'upload'>('browse')
-  const [searchInput, setSearchInput] = useState('')
-  const [searchResult, setSearchResult] = useState<FileData<Data> | null>(null)
-  const [loadingSearch, setLoadingSearch] = useState(false)
+  const [inputMode, setInputMode] = useState<'download' | 'upload'>('download')
+  const [referenceInput, setReferenceInput] = useState('')
+  const [referenceError, setReferenceError] = useState<Error | null>(null)
   const { health, isLoadingHealth } = useApiHealth()
   const { nodeHealth, isLoadingNodeHealth } = useDebugApiHealth()
 
-  const [files, setFiles] = useState<File[]>([])
+  const [file, setFile] = useState<File | null>(null)
   const [uploadReference, setUploadReference] = useState('')
-  const [uploadingFile, setUploadingFile] = useState(false)
-
-  const getFile = () => {
-    setLoadingSearch(true)
-    beeApi.files
-      .downloadFile(searchInput)
-      .then(res => {
-        setSearchResult(res)
-
-        const downloadUrl = window.URL.createObjectURL(new Blob([res.data]))
-        const link = document.createElement('a')
-        link.href = downloadUrl
-        link.setAttribute('download', 'file.zip') //any other extension
-        document.body.appendChild(link)
-        link.click()
-        link.remove()
-      })
-      .catch(() => {
-        // FIXME: handle the error
-      })
-      .finally(() => {
-        setLoadingSearch(false)
-      })
-  }
+  const [uploadError, setUploadError] = useState<Error | null>(null)
+  const [isUploadingFile, setIsUploadingFile] = useState(false)
 
   const uploadFile = () => {
-    setUploadingFile(true)
+    if (file === null) return
+    setIsUploadingFile(true)
+    setUploadError(null)
     beeApi.files
-      .uploadFile(files[0])
+      .uploadFile(file)
       .then(hash => {
         setUploadReference(hash)
-        setFiles([])
-      })
-      .catch(() => {
-        // FIXME: handle the error
+        setFile(null)
       })
+      .catch(setUploadError)
       .finally(() => {
-        setUploadingFile(false)
+        setIsUploadingFile(false)
       })
   }
 
   const handleChange = (files?: File[]) => {
     if (files) {
-      setFiles(files)
+      setFile(files[0])
+      setUploadReference('')
     }
   }
 
+  const handleReferenceChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setReferenceInput(e.target.value)
+
+    if (Utils.Hex.isHexString(e.target.value, 64)) setReferenceError(null)
+    else setReferenceError(new Error('Incorrect format of swarm hash'))
+  }
+
+  if (isLoadingHealth || isLoadingNodeHealth) {
+    return (
+      <Container style={{ textAlign: 'center', padding: '50px' }}>
+        <CircularProgress />
+      </Container>
+    )
+  }
+
+  if (!health || nodeHealth?.status !== 'ok') return <TroubleshootConnectionCard />
+
   return (
-    <div>
-      {
-        // FIXME: this should be broken up
-        /* eslint-disable no-nested-ternary */
-        nodeHealth?.status === 'ok' && health ? (
-          <Container maxWidth="sm">
-            <div style={{ marginBottom: '7px' }}>
-              <Button color="primary" style={{ marginRight: '7px' }} onClick={() => setInputMode('browse')}>
-                Browse
-              </Button>
-              <Button color="primary" onClick={() => setInputMode('upload')}>
+    <Container maxWidth="sm">
+      <div style={{ marginBottom: '7px' }}>
+        <Button color="primary" style={{ marginRight: '7px' }} onClick={() => setInputMode('download')}>
+          Download
+        </Button>
+        <Button color="primary" onClick={() => setInputMode('upload')}>
+          Upload
+        </Button>
+      </div>
+      {inputMode === 'download' && (
+        <>
+          <Paper className={classes.root}>
+            <InputBase
+              className={classes.input}
+              placeholder="Enter swarm reference e.g. 0773a91efd6547c754fc1d95fb1c62c7d1b47f959c2caa685dfec8736da95c1c"
+              inputProps={{ 'aria-label': 'retriefe file from swarm' }}
+              value={referenceInput}
+              onChange={handleReferenceChange}
+            />
+            <IconButton
+              href={`${apiHost}/files/${referenceInput}`}
+              target="_blank"
+              disabled={referenceError !== null || !referenceInput}
+              className={classes.iconButton}
+              aria-label="download"
+            >
+              <Search />
+            </IconButton>
+          </Paper>
+          {referenceError && <FormHelperText error>{referenceError.message}</FormHelperText>}
+        </>
+      )}
+      {inputMode === 'upload' && (
+        <div>
+          <div>
+            <DropzoneArea onChange={handleChange} filesLimit={1} />
+            <div style={{ marginTop: '15px' }}>
+              <Button disabled={!file && isUploadingFile} onClick={() => uploadFile()} className={classes.iconButton}>
                 Upload
               </Button>
+              {isUploadingFile && (
+                <Container style={{ textAlign: 'center', padding: '50px' }}>
+                  <CircularProgress />
+                </Container>
+              )}
+              {uploadReference && (
+                <div style={{ marginBottom: '15px', display: 'flex' }}>
+                  <span>{uploadReference}</span>
+                  <ClipboardCopy value={uploadReference} />
+                </div>
+              )}
+              {uploadError && <FormHelperText error>{uploadError.message}</FormHelperText>}
             </div>
-            {inputMode === 'browse' ? (
-              <Paper component="form" className={classes.root}>
-                <InputBase
-                  className={classes.input}
-                  placeholder="Enter hash e.g. 0773a91efd6547c754fc1d95fb1c62c7d1b47f959c2caa685dfec8736da95c1c"
-                  inputProps={{ 'aria-label': 'search swarm nodes' }}
-                  onChange={e => setSearchInput(e.target.value)}
-                />
-                <IconButton onClick={() => getFile()} className={classes.iconButton} aria-label="search">
-                  <Search />
-                </IconButton>
-              </Paper>
-            ) : (
-              <div>
-                {uploadingFile ? (
-                  <Container style={{ textAlign: 'center', padding: '50px' }}>
-                    <CircularProgress />
-                  </Container>
-                ) : (
-                  <div>
-                    {uploadReference ? (
-                      <Paper
-                        component="form"
-                        className={classes.root}
-                        style={{ marginBottom: '15px', display: 'flex' }}
-                      >
-                        <span>{uploadReference}</span>
-                        <ClipboardCopy value={uploadReference} />
-                      </Paper>
-                    ) : null}
-                    <DropzoneArea onChange={handleChange} />
-                    <div style={{ marginTop: '15px' }}>
-                      <Button onClick={() => uploadFile()} className={classes.iconButton}>
-                        Upload
-                      </Button>
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-            {loadingSearch ? (
-              <Container style={{ textAlign: 'center', padding: '50px' }}>
-                <CircularProgress />
-              </Container>
-            ) : (
-              <div style={{ padding: '20px' }}>{searchResult}</div>
-            )}
-          </Container>
-        ) : isLoadingHealth || isLoadingNodeHealth ? (
-          <Container style={{ textAlign: 'center', padding: '50px' }}>
-            <CircularProgress />
-          </Container>
-        ) : (
-          <TroubleshootConnectionCard />
-        ) /* eslint-enable no-nested-ternary */
-      }
-    </div>
+          </div>
+        </div>
+      )}
+    </Container>
   )
 }