feat: files page updated to latest design (#218)

* feat: altered the design of the tabs and redid the download tab

* feat: redesign the upload file

* fix: styles of tabs on hover

* fix: display troubleshoot component when the status of the node is not OK

* fix: when removing the file, remove the reference upload reference as well

* fix: on inputs the label should not be selectable

* feat: add placeholder to inputs and make the label non-selectable

* refactor: improved the readability of the upload file component

* chore: removed PeerDetail component

* fix: replaced "batch" with (postage) "stamp" for clarity

* refactor: address PR review comments

* feat: disable the download button if there is no value

src/pages/files/Download.tsx

@@ -1,66 +1,28 @@
 import { ReactElement, useState, useContext } 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 { Context as SettingsContext } from '../../providers/Settings'
+import ExpandableListItemInput from '../../components/ExpandableListItemInput'
 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 { apiUrl } = useContext(SettingsContext)
 
-  const [referenceInput, setReferenceInput] = useState('')
-  const [referenceError, setReferenceError] = useState<Error | null>(null)
+  const [referenceError, setReferenceError] = useState<string | undefined>(undefined)
 
-  const handleReferenceChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    setReferenceInput(e.target.value)
-
-    if (Utils.isHexString(e.target.value, 64) || Utils.isHexString(e.target.value, 128)) setReferenceError(null)
-    else setReferenceError(new Error('Incorrect format of swarm hash'))
+  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.')
   }
 
   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={`${apiUrl}/bzz/${referenceInput}`}
-          target="_blank"
-          disabled={referenceError !== null || !referenceInput}
-          className={classes.iconButton}
-          aria-label="download"
-        >
-          <Search />
-        </IconButton>
-      </Paper>
-      {referenceError && <FormHelperText error>{referenceError.message}</FormHelperText>}
-    </>
+    <ExpandableListItemInput
+      label="Swarm Hash"
+      onConfirm={value => window.open(`${apiUrl}/bzz/${value}`, '_blank')}
+      onChange={validateChange}
+      helperText={referenceError}
+      confirmLabel={'Download'}
+      confirmLabelDisabled={Boolean(referenceError)}
+      placeholder="e.g. 31fb0362b1a42536134c86bc58b97ac0244e5c6630beec3e27c2d1cecb38c605"
+      expandedOnly
+    />
   )
 }