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..." /> ) }