diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 2626e67..9dd1ce9 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -22,6 +22,7 @@ const navBarItems = [
label: 'Files',
path: ROUTES.UPLOAD,
icon: FileText,
+ pathMatcherSubstring: '/files/',
},
{
label: 'Account',
diff --git a/src/components/SwarmSelect.tsx b/src/components/SwarmSelect.tsx
index 4108fab..f374e0a 100644
--- a/src/components/SwarmSelect.tsx
+++ b/src/components/SwarmSelect.tsx
@@ -1,13 +1,27 @@
-import { createStyles, FormHelperText, makeStyles, MenuItem, Select as SimpleSelect, Theme } from '@material-ui/core'
+import { createStyles, FormHelperText, makeStyles, MenuItem, Select as MuiSelect, Theme } from '@material-ui/core'
import { Field } from 'formik'
import { Select } from 'formik-material-ui'
-import { ReactElement } from 'react'
+import { ReactElement, ReactNode } from 'react'
export type SelectEvent = React.ChangeEvent<{
name?: string | undefined
value: unknown
}>
+function renderValue(value: unknown): ReactNode {
+ if (typeof value === 'string') {
+ return value
+ }
+
+ const label = Reflect.get(value as object, 'label')
+
+ if (label) {
+ return label
+ }
+
+ return value as ReactNode
+}
+
interface Props {
label?: string
name?: string
@@ -15,6 +29,7 @@ interface Props {
onChange?: (event: SelectEvent) => void
formik?: boolean
defaultValue?: string
+ placeholder?: string
}
const useStyles = makeStyles((theme: Theme) =>
@@ -37,7 +52,15 @@ const useStyles = makeStyles((theme: Theme) =>
}),
)
-export function SwarmSelect({ defaultValue, formik, name, options, onChange, label }: Props): ReactElement {
+export function SwarmSelect({
+ defaultValue,
+ formik,
+ name,
+ options,
+ onChange,
+ label,
+ placeholder,
+}: Props): ReactElement {
const classes = useStyles()
if (formik) {
@@ -50,9 +73,10 @@ export function SwarmSelect({ defaultValue, formik, name, options, onChange, lab
name={name}
fullWidth
variant="outlined"
- defaultValue={defaultValue || ''}
+ defaultValue={defaultValue}
className={classes.select}
- placeholder={label}
+ displayEmpty
+ renderValue={(value: unknown) => (value ? renderValue(value) : placeholder)}
MenuProps={{ MenuListProps: { disablePadding: true }, PaperProps: { square: true } }}
>
{options.map((x, i) => (
@@ -68,15 +92,16 @@ export function SwarmSelect({ defaultValue, formik, name, options, onChange, lab
return (
<>
{label && {label}}
- (value ? renderValue(value) : placeholder)}
MenuProps={{ MenuListProps: { disablePadding: true }, PaperProps: { square: true } }}
>
{options.map((x, i) => (
@@ -84,7 +109,7 @@ export function SwarmSelect({ defaultValue, formik, name, options, onChange, lab
{x.label}
))}
-
+
>
)
}
diff --git a/src/pages/files/Upload.tsx b/src/pages/files/Upload.tsx
index 94f920f..28c6bdd 100644
--- a/src/pages/files/Upload.tsx
+++ b/src/pages/files/Upload.tsx
@@ -31,7 +31,7 @@ export function Upload(): ReactElement {
const [isUploading, setUploading] = useState(false)
const [showPasswordPrompt, setShowPasswordPrompt] = useState(false)
- const { refresh } = useContext(StampsContext)
+ const { stamps, refresh } = useContext(StampsContext)
const { beeApi, beeDebugApi } = useContext(SettingsContext)
const { files, setFiles, uploadOrigin, metadata, previewUri, previewBlob } = useContext(FileContext)
const { identities, setIdentities } = useContext(IdentityContext)
@@ -40,6 +40,8 @@ export function Upload(): ReactElement {
const { enqueueSnackbar } = useSnackbar()
const navigate = useNavigate()
+ const hasAnyStamps = stamps !== null && stamps.length > 0
+
useEffect(() => {
refresh()
}, []) // eslint-disable-line react-hooks/exhaustive-deps
@@ -180,7 +182,7 @@ export function Upload(): ReactElement {
{step === 1 && (
<>
- {stampMode === 'SELECT' ? (
+ {hasAnyStamps && stampMode === 'SELECT' ? (
setStamp(stamp)} defaultValue={stamp?.batchID} />
) : (
setStampMode('SELECT')} />
@@ -210,6 +212,7 @@ export function Upload(): ReactElement {
onUpload={onUpload}
isUploading={isUploading}
hasStamp={Boolean(stamp)}
+ hasAnyStamps={hasAnyStamps}
uploadLabel={identity ? 'Update Feed' : 'Upload To Your Node'}
stampMode={stampMode}
setStampMode={setStampMode}
diff --git a/src/pages/files/UploadActionBar.tsx b/src/pages/files/UploadActionBar.tsx
index 45bdb39..8856c01 100644
--- a/src/pages/files/UploadActionBar.tsx
+++ b/src/pages/files/UploadActionBar.tsx
@@ -13,6 +13,7 @@ interface Props {
onProceed: () => void
isUploading: boolean
hasStamp: boolean
+ hasAnyStamps: boolean
uploadLabel: string
stampMode: 'BUY' | 'SELECT'
setStampMode: (mode: 'BUY' | 'SELECT') => void
@@ -26,6 +27,7 @@ export function UploadActionBar({
onProceed,
isUploading,
hasStamp,
+ hasAnyStamps,
uploadLabel,
stampMode,
setStampMode,
@@ -62,6 +64,7 @@ export function UploadActionBar({
setStampMode(stampMode === 'BUY' ? 'SELECT' : 'BUY')}
iconType={stampMode === 'BUY' ? Layers : PlusSquare}
>
diff --git a/src/pages/stamps/PostageStampSelector.tsx b/src/pages/stamps/PostageStampSelector.tsx
index ad68a4f..0c45289 100644
--- a/src/pages/stamps/PostageStampSelector.tsx
+++ b/src/pages/stamps/PostageStampSelector.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, useContext } from 'react'
+import { ReactElement, useContext } from 'react'
import { SwarmSelect } from '../../components/SwarmSelect'
import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
@@ -26,6 +26,7 @@ export function PostageStampSelector({ onSelect, defaultValue }: Props): ReactEl
options={(stamps || []).map(x => ({ label: x.batchID.slice(0, 8), value: x.batchID }))}
onChange={event => onChange(event.target.value as string)}
defaultValue={defaultValue}
+ placeholder="Please select a postage stamp..."
/>
)
}