feat: upload files with postage stamps (#126)

* chore: release 0.3.0 * feat: added postage stamp table to list all stamps * feat: postage stamp modal to purchase stamps * feat: postage stamps provider * chore: added formik * chore: proper form state handling * chore: revert accidental release inclusion * chore: polishing identified when developing the upload functionality * feat: upload files with postage stamps * style: tabs styles are defined in theme now, addressed other PR comments * style: removed unused styles * fix: enable encrypted hashes to download Co-authored-by: bee-worker <70210089+bee-worker@users.noreply.github.com>
2021-06-02 13:25:49 +02:00
parent 4074a9de5d
commit 92c727e5f5
7 changed files with 365 additions and 74 deletions
@@ -0,0 +1,65 @@
+import { ReactElement, useState } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Paper, InputBase, IconButton, FormHelperText } from '@material-ui/core'
+import { Search } from '@material-ui/icons'
+import { apiHost } from '../../constants'
+import { Utils } from '@ethersphere/bee-js'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      padding: theme.spacing(0.25),
+      display: 'flex',
+      alignItems: 'center',
+    },
+    input: {
+      marginLeft: theme.spacing(1),
+      flex: 1,
+    },
+    iconButton: {
+      padding: 10,
+    },
+    divider: {
+      height: 28,
+      margin: 4,
+    },
+  }),
+)
+
+export default function Files(): ReactElement {
+  const classes = useStyles()
+
+  const [referenceInput, setReferenceInput] = useState('')
+  const [referenceError, setReferenceError] = useState<Error | null>(null)
+
+  const handleReferenceChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setReferenceInput(e.target.value)
+
+    if (Utils.Hex.isHexString(e.target.value, 64) || Utils.Hex.isHexString(e.target.value, 128)) setReferenceError(null)
+    else setReferenceError(new Error('Incorrect format of swarm hash'))
+  }
+
+  return (
+    <>
+      <Paper className={classes.root}>
+        <InputBase
+          className={classes.input}
+          placeholder="Enter swarm reference e.g. 0773a91efd6547c754fc1d95fb1c62c7d1b47f959c2caa685dfec8736da95c1c"
+          inputProps={{ 'aria-label': 'retrieve file from swarm' }}
+          value={referenceInput}
+          onChange={handleReferenceChange}
+        />
+        <IconButton
+          href={`${apiHost}/bzz/${referenceInput}`}
+          target="_blank"
+          disabled={referenceError !== null || !referenceInput}
+          className={classes.iconButton}
+          aria-label="download"
+        >
+          <Search />
+        </IconButton>
+      </Paper>
+      {referenceError && <FormHelperText error>{referenceError.message}</FormHelperText>}
+    </>
+  )
+}