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
This commit is contained in:
Cafe137
GitHub
+58
-113
@@ -1,19 +1,17 @@
|
||||
import { Button, CircularProgress, Container, Avatar, Chip, Typography } from '@material-ui/core'
|
||||
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
|
||||
import { DropzoneArea } from 'material-ui-dropzone'
|
||||
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
|
||||
import { useSnackbar } from 'notistack'
|
||||
import { RotateCcw, Check } from 'react-feather'
|
||||
import { ReactElement, useContext, useEffect, useState } from 'react'
|
||||
import UploadSizeAlert from '../../components/AlertUploadSize'
|
||||
import ClipboardCopy from '../../components/ClipboardCopy'
|
||||
import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
|
||||
import { Context as SettingsContext } from '../../providers/Settings'
|
||||
import CreatePostageStamp from '../stamps/CreatePostageStampModal'
|
||||
import SelectStamp from './SelectStamp'
|
||||
import ExpandableListItem from '../../components/ExpandableListItem'
|
||||
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
|
||||
import ExpandableListItemNote from '../../components/ExpandableListItemNote'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
|
||||
import { detectIndexHtml } from '../../utils/file'
|
||||
import { SwarmFile } from '../../utils/SwarmFile'
|
||||
import { CreatePostageStampModal } from '../stamps/CreatePostageStampModal'
|
||||
import { SelectPostageStampModal } from '../stamps/SelectPostageStampModal'
|
||||
import { AssetPreview } from './AssetPreview'
|
||||
import { PostUploadSummary } from './PostUploadSummary'
|
||||
import { StampPreview } from './StampPreview'
|
||||
import { UploadActionBar } from './UploadActionBar'
|
||||
import { UploadArea } from './UploadArea'
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
@@ -27,13 +25,14 @@ const MAX_FILE_SIZE = 1_000_000_000 // 1 gigabyte
|
||||
export default function Files(): ReactElement {
|
||||
const classes = useStyles()
|
||||
const [dropzoneKey, setDropzoneKey] = useState(0)
|
||||
const [file, setFile] = useState<File | null>(null)
|
||||
const [files, setFiles] = useState<SwarmFile[]>([])
|
||||
const [uploadReference, setUploadReference] = useState('')
|
||||
const [isUploadingFile, setIsUploadingFile] = useState(false)
|
||||
const [isBuyingStamp, setBuyingStamp] = useState(false)
|
||||
const [isSelectingStamp, setSelectingStamp] = useState(false)
|
||||
const [stamp, setStamp] = useState<EnrichedPostageBatch | null>(null)
|
||||
const [isUploading, setUploading] = useState(false)
|
||||
|
||||
const [selectedStamp, setSelectedStamp] = useState<EnrichedPostageBatch | null>(null)
|
||||
|
||||
const { isLoading, error, stamps, refresh } = useContext(Context)
|
||||
const { stamps, refresh } = useContext(Context)
|
||||
const { beeApi } = useContext(SettingsContext)
|
||||
const { enqueueSnackbar } = useSnackbar()
|
||||
|
||||
@@ -41,123 +40,69 @@ export default function Files(): ReactElement {
|
||||
refresh()
|
||||
}, []) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
// Choose a postage stamp that has the lowest usage
|
||||
useEffect(() => {
|
||||
if (!selectedStamp && stamps && stamps.length > 0) {
|
||||
const stamp = stamps.reduce((prev, curr) => {
|
||||
if (curr.usage < prev.usage) return curr
|
||||
|
||||
return prev
|
||||
}, stamps[0])
|
||||
|
||||
setSelectedStamp(stamp)
|
||||
const uploadFiles = () => {
|
||||
if (!beeApi || !files.length || !stamp) {
|
||||
return
|
||||
}
|
||||
}, [isLoading, error, stamps, selectedStamp])
|
||||
|
||||
const uploadFile = () => {
|
||||
if (file === null || selectedStamp === null) return
|
||||
const indexDocument = files.length === 1 ? files[0].name : detectIndexHtml(files) || undefined
|
||||
|
||||
if (!beeApi) return
|
||||
setUploading(true)
|
||||
|
||||
setIsUploadingFile(true)
|
||||
beeApi
|
||||
.uploadFile(selectedStamp.batchID, file)
|
||||
.uploadFiles(stamp.batchID, files as unknown as File[], { indexDocument })
|
||||
.then(hash => setUploadReference(hash.reference))
|
||||
.catch(e => enqueueSnackbar(`Error uploading: ${e.message}`, { variant: 'error' }))
|
||||
.finally(() => setIsUploadingFile(false))
|
||||
.finally(() => setUploading(false))
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
setFiles([])
|
||||
setStamp(null)
|
||||
setUploading(false)
|
||||
}
|
||||
|
||||
const uploadNew = () => {
|
||||
setTimeout(() => {
|
||||
setFile(null)
|
||||
reset()
|
||||
setDropzoneKey(dropzoneKey + 1)
|
||||
setUploadReference('')
|
||||
}, 0)
|
||||
}
|
||||
|
||||
const handleChange = (files?: File[]) => {
|
||||
setUploadReference('')
|
||||
|
||||
if (files) {
|
||||
setFile(files[0])
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DropzoneArea
|
||||
key={'dropzone-' + dropzoneKey}
|
||||
onChange={handleChange}
|
||||
filesLimit={1}
|
||||
maxFileSize={MAX_FILE_SIZE}
|
||||
/>
|
||||
{files.length ? (
|
||||
<AssetPreview files={files} />
|
||||
) : (
|
||||
<UploadArea maximumSizeInBytes={MAX_FILE_SIZE} setFiles={setFiles} />
|
||||
)}
|
||||
{stamp !== null && !uploadReference ? <StampPreview stamp={stamp} /> : null}
|
||||
{files.length && !uploadReference ? (
|
||||
<UploadActionBar
|
||||
canSelectStamp={stamps !== null && stamps.length > 0}
|
||||
hasSelectedStamp={stamp !== null}
|
||||
onCancel={reset}
|
||||
onBuy={() => setBuyingStamp(true)}
|
||||
onSelect={() => setSelectingStamp(true)}
|
||||
onUpload={uploadFiles}
|
||||
onClearStamp={() => setStamp(null)}
|
||||
isUploading={isUploading}
|
||||
/>
|
||||
) : null}
|
||||
<div className={classes.content}>
|
||||
{/* We have file and can upload display stamp selection */}
|
||||
{file && !isUploadingFile && !uploadReference && (
|
||||
<>
|
||||
<ExpandableListItemNote>
|
||||
To upload this file to your node, you need a postage stamp. You can buy a new one or you can use an
|
||||
existing stamp (providing it’s sufficient for this file).
|
||||
</ExpandableListItemNote>
|
||||
{selectedStamp && (
|
||||
<ExpandableListItem
|
||||
label={
|
||||
<>
|
||||
Upload with Postage Stamp{' '}
|
||||
<Chip
|
||||
avatar={<Avatar>{selectedStamp.usageText}</Avatar>}
|
||||
label={<Typography variant="body2">{selectedStamp.batchID.substr(0, 8)}[…]</Typography>}
|
||||
deleteIcon={<ClipboardCopy value={selectedStamp.batchID} />}
|
||||
onDelete={() => {} /* eslint-disable-line*/}
|
||||
variant="outlined"
|
||||
/>
|
||||
</>
|
||||
}
|
||||
value={<SelectStamp stamps={stamps} selectedStamp={selectedStamp} setSelected={setSelectedStamp} />}
|
||||
/>
|
||||
)}
|
||||
{!selectedStamp && (
|
||||
<ExpandableListItemActions>
|
||||
<CreatePostageStamp />
|
||||
</ExpandableListItemActions>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* We have file and can upload display upload button */}
|
||||
{file && !uploadReference && (
|
||||
<>
|
||||
<ExpandableListItemActions>
|
||||
<Button
|
||||
variant="contained"
|
||||
disabled={!file && isUploadingFile && !selectedStamp}
|
||||
onClick={() => uploadFile()}
|
||||
startIcon={<Check size="1rem" />}
|
||||
>
|
||||
Upload
|
||||
</Button>
|
||||
{isUploadingFile && (
|
||||
<Container className={classes.loadingProgress}>
|
||||
<CircularProgress />
|
||||
</Container>
|
||||
)}
|
||||
</ExpandableListItemActions>
|
||||
<UploadSizeAlert file={file} />
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* File has already been uploaded */}
|
||||
{uploadReference && (
|
||||
<>
|
||||
<ExpandableListItemKey label="Swarm Reference" value={uploadReference} />
|
||||
<ExpandableListItemActions>
|
||||
<Button variant="contained" onClick={uploadNew} startIcon={<RotateCcw size="1rem" />}>
|
||||
Upload New File
|
||||
</Button>
|
||||
</ExpandableListItemActions>
|
||||
</>
|
||||
<PostUploadSummary onUploadNewClick={() => uploadNew()} uploadReference={uploadReference} />
|
||||
)}
|
||||
</div>
|
||||
{isBuyingStamp ? <CreatePostageStampModal onClose={() => setBuyingStamp(false)} /> : null}
|
||||
{stamps && isSelectingStamp ? (
|
||||
<SelectPostageStampModal
|
||||
stamps={stamps}
|
||||
onClose={() => setSelectingStamp(false)}
|
||||
onSelect={stamp => setStamp(stamp)}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user