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

style: add eslint configuration and fixed linter issues (#35)

Browse Source 
* style: add eslint configuration as per bee-js

* chore: add `plugin:react/reocommended` in `.eslintrc`

Co-authored-by: nugaon <50576770+nugaon@users.noreply.github.com>

* chore: add `consistent` to `array-bracket-newline` as per review

* style: after automatic fixes with `npm run lint`

* style: fixed all linter errors

* refactor: fixed all linter warnings

* chore: added missing new line at end of `.prettierrc` file

Co-authored-by: nugaon <50576770+nugaon@users.noreply.github.com>
This commit is contained in:
Vojtech Simetka
2021-04-03 14:04:37 +02:00
committed by GitHub
parent 9838aa70c8
commit bc01d60728
54 changed files with 3454 additions and 2782 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SideBar.tsx
+75 -53
View File
@@ -1,46 +1,47 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { ReactElement } from 'react'
import { Link, RouteComponentProps } from 'react-router-dom'
import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
import { ListItemText, ListItemIcon, ListItem, Divider, List, Drawer, Link as MUILink } from '@material-ui/core';
import { OpenInNewSharp } from '@material-ui/icons';
import { Activity, FileText, DollarSign, Share2, Settings } from 'react-feather';
import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
import { ListItemText, ListItemIcon, ListItem, Divider, List, Drawer, Link as MUILink } from '@material-ui/core'
import { OpenInNewSharp } from '@material-ui/icons'
import { Activity, FileText, DollarSign, Share2, Settings } from 'react-feather'
import SwarmLogoOrange from '../assets/swarm-logo-orange.svg'
import { Health } from '@ethersphere/bee-js'
const drawerWidth = 240;
const drawerWidth = 240
const navBarItems = [
{
'label': 'Status',
'id': 'status',
'path': '/',
'icon': 'activity'
label: 'Status',
id: 'status',
path: '/',
icon: Activity,
},
{
'label': 'Files',
'id': 'files',
'path': '/files/',
'icon': 'file-text'
label: 'Files',
id: 'files',
path: '/files/',
icon: FileText,
},
{
'label': 'Accounting',
'id': 'accounting',
'path': '/accounting/',
'icon': 'dollar-sign'
label: 'Accounting',
id: 'accounting',
path: '/accounting/',
icon: DollarSign,
},
{
'label': 'Peers',
'id': 'peers',
'path': '/peers/',
'icon': 'share-2'
label: 'Peers',
id: 'peers',
path: '/peers/',
icon: Share2,
},
{
'label': 'Settings',
'id': 'settings',
'path': '/settings/',
'icon': 'settings'
}
label: 'Settings',
id: 'settings',
path: '/settings/',
icon: Settings,
},
]
const useStyles = makeStyles((theme: Theme) =>
@@ -68,29 +69,20 @@ const useStyles = makeStyles((theme: Theme) =>
},
activeSideBarItem: {
borderLeft: '4px solid #dd7700',
backgroundColor: 'inherit !important'
backgroundColor: 'inherit !important',
},
toolbar: theme.mixins.toolbar,
}),
);
)
const getIcon = (iconPath: string) => {
switch (iconPath) {
case 'activity':
return <Activity style={{ height: '20px' }} />
case 'file-text':
return <FileText style={{ height: '20px' }} />
case 'dollar-sign':
return <DollarSign style={{ height: '20px' }} />
case 'share-2':
return <Share2 style={{ height: '20px' }} />
case 'settings':
return <Settings style={{ height: '20px' }} />
}
interface Props extends RouteComponentProps {
themeMode: string
health: boolean
nodeHealth: Health | null
}
export default function SideBar(props: any) {
const classes = useStyles();
export default function SideBar(props: Props): ReactElement {
const classes = useStyles()
return (
<div className={classes.root}>
@@ -103,18 +95,30 @@ export default function SideBar(props: any) {
anchor="left"
>
<div className={classes.toolbar} style={{ textAlign: 'left', marginLeft: 20 }}>
<Link to='/'>
<img alt='swarm' className={classes.logo} src={props.themeMode === 'light' ? SwarmLogoOrange : SwarmLogoOrange} style={{ maxHeight: '30px', alignItems: 'center' }} />
<Link to="/">
<img
alt="swarm"
className={classes.logo}
src={props.themeMode === 'light' ? SwarmLogoOrange : SwarmLogoOrange}
style={{ maxHeight: '30px', alignItems: 'center' }}
/>
</Link>
</div>
<List>
{navBarItems.map(item => (
<Link to={item.path} key={item.id} style={{ color: 'inherit', textDecoration: 'none' }}>
<ListItem button selected={props.location.pathname === item.path} className={props.location.pathname === item.path ? classes.activeSideBarItem : ''}>
<ListItem
button
selected={props.location.pathname === item.path}
className={props.location.pathname === item.path ? classes.activeSideBarItem : ''}
>
<ListItemIcon className={props.location.pathname === item.path ? classes.activeSideBar : ''}>
{getIcon(item.icon)}
<item.icon style={{ height: '20px' }} />
</ListItemIcon>
<ListItemText primary={item.label} className={props.location.pathname === item.path ? classes.activeSideBar : ''} />
<ListItemText
primary={item.label}
className={props.location.pathname === item.path ? classes.activeSideBar : ''}
/>
</ListItem>
</Link>
))}
@@ -131,16 +135,34 @@ export default function SideBar(props: any) {
<div style={{ position: 'fixed', bottom: 0, width: 'inherit', padding: '10px' }}>
<ListItem>
<div style={{ marginRight: '30px' }}>
<div style={{ backgroundColor: props.health ? '#32c48d' : '#c9201f', marginRight: '7px', height: '10px', width: '10px', borderRadius: '50%', display: 'inline-block' }} />
<div
style={{
backgroundColor: props.health ? '#32c48d' : '#c9201f',
marginRight: '7px',
height: '10px',
width: '10px',
borderRadius: '50%',
display: 'inline-block',
}}
/>
<span>API</span>
</div>
<div>
<div style={{ backgroundColor: props.nodeHealth?.status === 'ok' ? '#32c48d' : '#c9201f', marginRight: '7px', height: '10px', width: '10px', borderRadius: '50%', display: 'inline-block' }} />
<div
style={{
backgroundColor: props.nodeHealth?.status === 'ok' ? '#32c48d' : '#c9201f',
marginRight: '7px',
height: '10px',
width: '10px',
borderRadius: '50%',
display: 'inline-block',
}}
/>
<span>Debug API</span>
</div>
</ListItem>
</div>
</Drawer>
</div>
);
)
}