@@ -20,18 +19,20 @@ const App = (): ReactElement => (
-
-
-
- <>
-
-
-
-
-
-
-
-
+
+
+
+
+ <>
+
+
+
+
+
+
+
+
+
diff --git a/src/components/ExpandableListItemLink.tsx b/src/components/ExpandableListItemLink.tsx
index 706472f..5c46679 100644
--- a/src/components/ExpandableListItemLink.tsx
+++ b/src/components/ExpandableListItemLink.tsx
@@ -1,8 +1,9 @@
import { Grid, IconButton, ListItem, Tooltip, Typography } from '@material-ui/core'
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { OpenInNewSharp } from '@material-ui/icons'
+import { ArrowForward, OpenInNewSharp } from '@material-ui/icons'
import { ReactElement, useState } from 'react'
import CopyToClipboard from 'react-copy-to-clipboard'
+import { useHistory } from 'react-router'
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@@ -46,15 +47,35 @@ const useStyles = makeStyles((theme: Theme) =>
interface Props {
label: string
value: string
+ link?: string
+ navigationType?: 'NEW_WINDOW' | 'HISTORY_PUSH'
+ allowClipboard?: boolean
}
-export default function ExpandableListItemLink({ label, value }: Props): ReactElement | null {
+export default function ExpandableListItemLink({
+ label,
+ value,
+ link,
+ navigationType = 'NEW_WINDOW',
+ allowClipboard = true,
+}: Props): ReactElement | null {
const classes = useStyles()
const [copied, setCopied] = useState(false)
+ const history = useHistory()
const tooltipClickHandler = () => setCopied(true)
const tooltipCloseHandler = () => setCopied(false)
+ const displayValue = value.length > 22 ? value.slice(0, 19) + '...' : value
+
+ function onNavigation() {
+ if (navigationType === 'NEW_WINDOW') {
+ window.open(link || value)
+ } else {
+ history.push(link || value)
+ }
+ }
+
return (
@@ -62,15 +83,19 @@ export default function ExpandableListItemLink({ label, value }: Props): ReactEl
{label && {label}}
-
-
-
- {value.slice(0, 19)}...
-
-
-
+ {allowClipboard && (
+
+
+
+ {displayValue}
+
+
+
+ )}
+ {!allowClipboard &&
{displayValue}}
- window.open(value)} strokeWidth={1} />
+ {navigationType === 'NEW_WINDOW' && }
+ {navigationType === 'HISTORY_PUSH' && }
+
+
+
+
+
+ )
+}
diff --git a/src/pages/files/PostUploadSummary.tsx b/src/pages/files/PostUploadSummary.tsx
deleted file mode 100644
index 09fbddd..0000000
--- a/src/pages/files/PostUploadSummary.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Box, Typography } from '@material-ui/core'
-import { ReactElement } from 'react'
-import { CornerUpLeft } from 'react-feather'
-import ExpandableListItemActions from '../../components/ExpandableListItemActions'
-import ExpandableListItemKey from '../../components/ExpandableListItemKey'
-import ExpandableListItemLink from '../../components/ExpandableListItemLink'
-import { SwarmButton } from '../../components/SwarmButton'
-
-interface Props {
- uploadReference: string
- onUploadNewClick: () => void
-}
-
-export function PostUploadSummary({ uploadReference, onUploadNewClick }: Props): ReactElement {
- return (
- <>
-
-
-
-
-
-
-
- Back to Upload
-
-
-
-
- The Swarm Gateway is graciously provided by the Swarm Foundation. This service is under development and provided
- for testing purposes only. Learn more at{' '}
- https://gateway.ethswarm.org/.
-
-
- )
-}
diff --git a/src/pages/files/Share.tsx b/src/pages/files/Share.tsx
new file mode 100644
index 0000000..7d97687
--- /dev/null
+++ b/src/pages/files/Share.tsx
@@ -0,0 +1,121 @@
+import { ManifestJs } from '@ethersphere/manifest-js'
+import { Box } from '@material-ui/core'
+import { saveAs } from 'file-saver'
+import JSZip from 'jszip'
+import { ReactElement, useContext, useEffect, useState } from 'react'
+import { RouteComponentProps, useHistory } from 'react-router-dom'
+import { Loading } from '../../components/Loading'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { ROUTES } from '../../routes'
+import { convertBeeFileToBrowserFile, convertManifestToFiles } from '../../utils/file'
+import { shortenHash } from '../../utils/hash'
+import { determineHistoryName, HISTORY_KEYS, putHistory } from '../../utils/local-storage'
+import { SwarmFile } from '../../utils/SwarmFile'
+import { AssetPreview } from './AssetPreview'
+import { AssetSummary } from './AssetSummary'
+import { DownloadActionBar } from './DownloadActionBar'
+
+interface MatchParams {
+ hash: string
+}
+
+export function Share(props: RouteComponentProps): ReactElement {
+ const { apiUrl, beeApi } = useContext(SettingsContext)
+ const reference = props.match.params.hash
+ const history = useHistory()
+
+ const [loading, setLoading] = useState(true)
+ const [downloading, setDownloading] = useState(false)
+ const [files, setFiles] = useState([])
+ const [swarmEntries, setSwarmEntries] = useState>({})
+ const [indexDocument, setIndexDocument] = useState(null)
+
+ async function prepare() {
+ if (!beeApi) {
+ return
+ }
+
+ const manifestJs = new ManifestJs(beeApi)
+ const isManifest = await manifestJs.isManifest(reference)
+
+ if (!isManifest) {
+ throw Error('The specified hash does not contain valid content.')
+ }
+ const entries = await manifestJs.getHashes(reference)
+ setSwarmEntries(entries)
+ const indexDocument = await manifestJs.getIndexDocumentPath(reference)
+ setIndexDocument(indexDocument)
+
+ if (Object.keys(entries).length === 1) {
+ const response = await beeApi.downloadFile(reference)
+ setFiles([new SwarmFile(convertBeeFileToBrowserFile(response) as File)])
+ } else {
+ setFiles(convertManifestToFiles(entries))
+ }
+ }
+
+ function onOpen() {
+ window.open(`${apiUrl}/bzz/${reference}/`, '_blank')
+ }
+
+ function onClose() {
+ // POP means there is no history - nowhere to go back yet
+ if (history.action === 'POP') {
+ history.push(ROUTES.UPLOAD)
+ } else {
+ history.goBack()
+ }
+ }
+
+ useEffect(() => {
+ setLoading(true)
+ prepare().then(() => {
+ setLoading(false)
+ })
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [reference])
+
+ async function onDownload() {
+ if (!beeApi) {
+ return
+ }
+ putHistory(HISTORY_KEYS.DOWNLOAD_HISTORY, reference, determineHistoryName(reference, indexDocument))
+ setDownloading(true)
+
+ if (Object.keys(swarmEntries).length === 1) {
+ window.open(`${apiUrl}/bzz/${reference}/`, '_blank')
+ } else {
+ const zip = new JSZip()
+ for (const [path, hash] of Object.entries(swarmEntries)) {
+ zip.file(path, await beeApi.downloadData(hash))
+ }
+ const content = await zip.generateAsync({ type: 'blob' })
+ saveAs(content, reference + '.zip')
+ }
+ setDownloading(false)
+ }
+
+ const assetName = shortenHash(reference)
+
+ if (loading) {
+ return
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+ 1)}
+ loading={downloading}
+ />
+
+ )
+}
diff --git a/src/pages/files/Upload.tsx b/src/pages/files/Upload.tsx
index fd4f57b..773157b 100644
--- a/src/pages/files/Upload.tsx
+++ b/src/pages/files/Upload.tsx
@@ -1,32 +1,20 @@
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
import { useSnackbar } from 'notistack'
import { ReactElement, useContext, useEffect, useState } from 'react'
+import { useHistory } from 'react-router-dom'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { Context as FileContext } from '../../providers/File'
import { Context as SettingsContext } from '../../providers/Settings'
import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
-import { detectIndexHtml } from '../../utils/file'
-import { SwarmFile } from '../../utils/SwarmFile'
+import { ROUTES } from '../../routes'
+import { detectIndexHtml, getAssetNameFromFiles } from '../../utils/file'
+import { HISTORY_KEYS, putHistory } from '../../utils/local-storage'
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({
- content: { marginTop: theme.spacing(2) },
- loadingProgress: { textAlign: 'center', padding: '50px' },
- }),
-)
-
-const MAX_FILE_SIZE = 1_000_000_000 // 1 gigabyte
-
-export default function Files(): ReactElement {
- const classes = useStyles()
- const [dropzoneKey, setDropzoneKey] = useState(0)
- const [files, setFiles] = useState([])
- const [uploadReference, setUploadReference] = useState('')
+export function Upload(): ReactElement {
const [isBuyingStamp, setBuyingStamp] = useState(false)
const [isSelectingStamp, setSelectingStamp] = useState(false)
const [stamp, setStamp] = useState(null)
@@ -34,7 +22,14 @@ export default function Files(): ReactElement {
const { stamps, refresh } = useContext(Context)
const { beeApi } = useContext(SettingsContext)
+ const { files, setFiles } = useContext(FileContext)
const { enqueueSnackbar } = useSnackbar()
+ const history = useHistory()
+
+ if (!files.length) {
+ setFiles([])
+ history.replace(ROUTES.UPLOAD)
+ }
useEffect(() => {
refresh()
@@ -51,9 +46,14 @@ export default function Files(): ReactElement {
beeApi
.uploadFiles(stamp.batchID, files as unknown as File[], { indexDocument })
- .then(hash => setUploadReference(hash.reference))
- .catch(e => enqueueSnackbar(`Error uploading: ${e.message}`, { variant: 'error' }))
- .finally(() => setUploading(false))
+ .then(hash => {
+ putHistory(HISTORY_KEYS.UPLOAD_HISTORY, hash.reference, getAssetNameFromFiles(files))
+ history.replace(ROUTES.HASH.replace(':hash', hash.reference))
+ })
+ .catch(e => {
+ enqueueSnackbar(`Error uploading: ${e.message}`, { variant: 'error' })
+ setUploading(false)
+ })
}
const reset = () => {
@@ -62,23 +62,12 @@ export default function Files(): ReactElement {
setUploading(false)
}
- const uploadNew = () => {
- setTimeout(() => {
- reset()
- setDropzoneKey(dropzoneKey + 1)
- setUploadReference('')
- }, 0)
- }
-
return (
<>
- {files.length ? (
-
- ) : (
-
- )}
- {stamp !== null && !uploadReference ? : null}
- {files.length && !uploadReference ? (
+ Upload
+ {files.length && }
+ {stamp !== null ? : null}
+ {files.length && (
0}
hasSelectedStamp={stamp !== null}
@@ -89,12 +78,7 @@ export default function Files(): ReactElement {
onClearStamp={() => setStamp(null)}
isUploading={isUploading}
/>
- ) : null}
-
- {uploadReference && (
-
uploadNew()} uploadReference={uploadReference} />
- )}
-
@@ -111,9 +130,18 @@ export function UploadArea({ setFiles, maximumSizeInBytes }: Props): ReactElemen
Add File
+
+ Add Folder
+
+
+ Add Website
+