woggioni/bee-dashboard
1
0
Fork 0
Code Actions Packages Releases Activity

feat: reviewed and simplified the node status check (#63)

Browse Source 
* refactor: status page nested ternary logic

* refactor: move the fetch latest bee release to a hook

* refactor: solved node status rerendering, improved performance and clarity

* refactor: step components now use unified hooks interface

* style: removed component margins, layout should be handled by pages
This commit is contained in:
Vojtech Simetka
2021-04-09 15:09:17 +02:00
committed by GitHub
parent 5608b91966
commit 9e4e58f160
14 changed files with 656 additions and 764 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/status/SetupSteps/PeerConnection.tsx
+37 -45
View File
@@ -1,53 +1,45 @@
import React, { ReactElement } from 'react'
import type { ReactElement } from 'react'
import { Typography } from '@material-ui/core/'
import { CheckCircle, Warning } from '@material-ui/icons/'
import { Topology } from '@ethersphere/bee-js'
interface Props {
nodeTopology: Topology | null
isLoadingNodeTopology: boolean
}
type Props = StatusTopologyHook
export default function PeerConnection(props: Props): ReactElement {
return (
<div>
<p>Connect to Peers</p>
<div style={{ marginBottom: '10px' }}>
html_url
{
// FIXME: this should be broken up
/* eslint-disable no-nested-ternary */
props.nodeTopology?.connected && props.nodeTopology?.connected > 0 ? (
<div>
<CheckCircle style={{ color: '#32c48d', marginRight: '7px', height: '18px' }} />
<span>Your connected to {props.nodeTopology.connected} peers!</span>
</div>
) : props.isLoadingNodeTopology ? null : (
<div>
<Warning style={{ color: '#ff9800', marginRight: '7px', height: '18px' }} />
<span>Your node is not connected to any peers</span>
</div>
) /* eslint-enable no-nested-ternary */
}
export default function PeerConnection({ isLoading, isOk, topology }: Props): ReactElement | null {
if (isLoading) return null
const peers = (
<div style={{ display: 'flex', marginTop: '15px' }}>
<div style={{ marginRight: '30px' }}>
<Typography component="div" variant="subtitle1" gutterBottom color="textSecondary">
<span>Connected Peers</span>
</Typography>
<Typography component="h2" variant="h5">
{topology?.connected ? topology.connected : '-'}
</Typography>
</div>
<div style={{ display: 'flex' }}>
<div style={{ marginRight: '30px' }}>
<Typography component="div" variant="subtitle1" gutterBottom color="textSecondary">
<span>Connected Peers</span>
</Typography>
<Typography component="h2" variant="h5">
{props.nodeTopology?.connected}
</Typography>
</div>
<div>
<Typography component="div" variant="subtitle1" gutterBottom color="textSecondary">
<span>Discovered Nodes</span>
</Typography>
<Typography component="h2" variant="h5">
{props.nodeTopology?.population}
</Typography>
</div>
<div>
<Typography component="div" variant="subtitle1" gutterBottom color="textSecondary">
<span>Discovered Nodes</span>
</Typography>
<Typography component="h2" variant="h5">
{topology?.population ? topology.population : '-'}
</Typography>
</div>
</div>
)
if (isOk) {
return (
<>
<span>You are connected to peers!</span>
{peers}
</>
)
}
return (
<>
<span>Your node is not connected to any peers</span>
{peers}
</>
)
}