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
2021-11-25 09:54:03 +01:00
parent 82cf6d9c01
commit 635621b04a
31 changed files with 1187 additions and 183 deletions
@@ -0,0 +1,69 @@
+import { Button, Typography } from '@material-ui/core'
+import { Clear } from '@material-ui/icons'
+import { ReactElement } from 'react'
+import { Check, Layers, PlusSquare, RefreshCcw } from 'react-feather'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import { SwarmButton } from '../../components/SwarmButton'
+
+interface Props {
+  canSelectStamp: boolean
+  hasSelectedStamp: boolean
+  onUpload: () => void
+  onBuy: () => void
+  onSelect: () => void
+  onCancel: () => void
+  onClearStamp: () => void
+  isUploading: boolean
+}
+
+export function UploadActionBar({
+  canSelectStamp,
+  hasSelectedStamp,
+  onUpload,
+  onBuy,
+  onSelect,
+  onCancel,
+  onClearStamp,
+  isUploading,
+}: Props): ReactElement {
+  const showBuy = !hasSelectedStamp
+  const showSelect = canSelectStamp && !hasSelectedStamp
+  const showUpload = hasSelectedStamp
+  const showChange = canSelectStamp && hasSelectedStamp
+
+  return (
+    <>
+      <ExpandableListItemActions>
+        {showBuy ? (
+          <SwarmButton onClick={onBuy} iconType={PlusSquare}>
+            Buy New Postage Stamp
+          </SwarmButton>
+        ) : null}
+        {showSelect ? (
+          <SwarmButton onClick={onSelect} iconType={Layers}>
+            Use Existing Postage Stamp
+          </SwarmButton>
+        ) : null}
+        {showUpload ? (
+          <SwarmButton onClick={onUpload} iconType={Check} disabled={isUploading} loading={isUploading}>
+            Upload To Your Node
+          </SwarmButton>
+        ) : null}
+        {showChange ? (
+          <SwarmButton onClick={onClearStamp} iconType={RefreshCcw} disabled={isUploading}>
+            Change Postage Stamp
+          </SwarmButton>
+        ) : null}
+        <Button onClick={onCancel} variant="contained" startIcon={<Clear />}>
+          Cancel
+        </Button>
+      </ExpandableListItemActions>
+      {showSelect ? (
+        <Typography>
+          You need a postage stamp to upload. Please refer to the official Bee documentation to understand how postage
+          stamps work.
+        </Typography>
+      ) : null}
+    </>
+  )
+}