Fouad
e5f41731ae
* bootstrap next app + add overview page * fix AssetList type * fix up nav stuff * Refactor Nav component and add network components pages * Refactor WorldMap component and update TelegramIcon, GitHubIcon, NymVpnIcon, DiscordIcon, and TwitterIcon components * add service providers page * mixnodes page * delegations page + use material react table for all tables * nodes map page * Refactor StyledLink component and remove unnecessary console.log statements * Refactor ESLint configuration, remove unused dependencies, and update component imports * update deps * Refactor imports and update dependencies * fix dark mode * build single mixnode page * build single gateway page * Refactor handleOnDelegate function to use useCallback in mixnodes page.tsx * Add defaults for constants --------- Co-authored-by: Mark Sinclair <mmsinclair@users.noreply.github.com>
84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
import * as React from 'react'
|
|
import { MenuItem } from '@mui/material'
|
|
import Select from '@mui/material/Select'
|
|
import { SelectChangeEvent } from '@mui/material/Select/SelectInput'
|
|
import { SxProps } from '@mui/system'
|
|
import {
|
|
MixnodeStatus,
|
|
MixnodeStatusWithAll,
|
|
} from '@/app/typeDefs/explorer-api'
|
|
import { useIsMobile } from '@/app/hooks/useIsMobile'
|
|
import { MixNodeStatus } from './Status'
|
|
|
|
// TODO: replace with i18n
|
|
const ALL_NODES = 'All nodes'
|
|
|
|
interface MixNodeStatusDropdownProps {
|
|
status?: MixnodeStatusWithAll
|
|
sx?: SxProps
|
|
onSelectionChanged?: (status?: MixnodeStatusWithAll) => void
|
|
}
|
|
|
|
export const MixNodeStatusDropdown: FCWithChildren<
|
|
MixNodeStatusDropdownProps
|
|
> = ({ status, onSelectionChanged, sx }) => {
|
|
const isMobile = useIsMobile()
|
|
const [statusValue, setStatusValue] = React.useState<MixnodeStatusWithAll>(
|
|
status || MixnodeStatusWithAll.all
|
|
)
|
|
const onChange = React.useCallback(
|
|
(event: SelectChangeEvent) => {
|
|
setStatusValue(event.target.value as MixnodeStatusWithAll)
|
|
if (onSelectionChanged) {
|
|
onSelectionChanged(event.target.value as MixnodeStatusWithAll)
|
|
}
|
|
},
|
|
[onSelectionChanged]
|
|
)
|
|
|
|
return (
|
|
<Select
|
|
labelId="mixnodeStatusSelect_label"
|
|
id="mixnodeStatusSelect"
|
|
value={statusValue}
|
|
onChange={onChange}
|
|
renderValue={(value) => {
|
|
switch (value) {
|
|
case 'active':
|
|
case 'standby':
|
|
case 'inactive':
|
|
return <MixNodeStatus status={value as unknown as MixnodeStatus} />
|
|
default:
|
|
return ALL_NODES
|
|
}
|
|
}}
|
|
sx={{
|
|
width: isMobile ? '50%' : 200,
|
|
...sx,
|
|
}}
|
|
>
|
|
<MenuItem
|
|
value={MixnodeStatus.active}
|
|
data-testid="mixnodeStatusSelectOption_active"
|
|
>
|
|
<MixNodeStatus status={MixnodeStatus.active} />
|
|
</MenuItem>
|
|
<MenuItem
|
|
value={MixnodeStatus.standby}
|
|
data-testid="mixnodeStatusSelectOption_standby"
|
|
>
|
|
<MixNodeStatus status={MixnodeStatus.standby} />
|
|
</MenuItem>
|
|
<MenuItem
|
|
value={MixnodeStatus.inactive}
|
|
data-testid="mixnodeStatusSelectOption_inactive"
|
|
>
|
|
<MixNodeStatus status={MixnodeStatus.inactive} />
|
|
</MenuItem>
|
|
<MenuItem value={'all'} data-testid="mixnodeStatusSelectOption_allNodes">
|
|
{ALL_NODES}
|
|
</MenuItem>
|
|
</Select>
|
|
)
|
|
}
|