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/layout/Dashboard.tsx
+42 -41
View File
@@ -1,12 +1,12 @@
import React, { useState, useEffect } from 'react'
import React, { useState, useEffect, ReactElement } from 'react'
import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
import SideBar from '../components/SideBar';
import NavBar from '../components/NavBar';
import { useApiHealth, useDebugApiHealth } from '../hooks/apiHooks';
import SideBar from '../components/SideBar'
import NavBar from '../components/NavBar'
import { useApiHealth, useDebugApiHealth } from '../hooks/apiHooks'
import { RouteComponentProps } from 'react-router'
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@@ -16,7 +16,7 @@ const useStyles = makeStyles((theme: Theme) =>
flexGrow: 1,
backgroundColor: theme.palette.background.default,
padding: theme.spacing(3),
paddingBottom:'65px',
paddingBottom: '65px',
},
footer: {
marginLeft: '240px',
@@ -24,55 +24,56 @@ const useStyles = makeStyles((theme: Theme) =>
position: 'fixed',
bottom: 0,
flexGrow: 1,
width:'-webkit-fill-available',
width: '-webkit-fill-available',
padding: theme.spacing(2),
textAlign:'center'
textAlign: 'center',
},
logo: {
height: '20px',
marginRight: '7px',
}
},
}),
);
)
interface Props extends RouteComponentProps {
children?: ReactElement
}
const Dashboard = (props: any) => {
const classes = useStyles();
const Dashboard = (props: Props): ReactElement => {
const classes = useStyles()
const [themeMode, toggleThemeMode] = useState('light');
const [themeMode, toggleThemeMode] = useState('light')
const { health, isLoadingHealth } = useApiHealth()
const { nodeHealth, isLoadingNodeHealth } = useDebugApiHealth()
// FIXME: handle errrors and loading
const { health } = useApiHealth()
const { nodeHealth } = useDebugApiHealth()
useEffect(() => {
let theme = localStorage.getItem('theme')
useEffect(() => {
const theme = localStorage.getItem('theme')
if (theme) {
toggleThemeMode(String(localStorage.getItem('theme')))
} else if (window?.matchMedia('(prefers-color-scheme: dark)')?.matches) {
toggleThemeMode('dark')
}
window?.matchMedia('(prefers-color-scheme: dark)')?.addEventListener('change', e => {
toggleThemeMode(e?.matches ? "dark" : "light")
});
if (theme) {
toggleThemeMode(String(localStorage.getItem('theme')))
} else if (window?.matchMedia('(prefers-color-scheme: dark)')?.matches) {
toggleThemeMode('dark')
}
return () => window?.matchMedia('(prefers-color-scheme: dark)')?.removeEventListener('change', e => {
toggleThemeMode(e?.matches ? "dark" : "light")
window?.matchMedia('(prefers-color-scheme: dark)')?.addEventListener('change', e => {
toggleThemeMode(e?.matches ? 'dark' : 'light')
})
return () =>
window?.matchMedia('(prefers-color-scheme: dark)')?.removeEventListener('change', e => {
toggleThemeMode(e?.matches ? 'dark' : 'light')
})
}, [])
}, [])
let childrenInjectedWithProps = React.cloneElement(props.children, { health, nodeHealth, isLoadingHealth, isLoadingNodeHealth })
return (
<div>
<SideBar {...props} themeMode={themeMode} health={health} nodeHealth={nodeHealth} />
<NavBar themeMode={themeMode} />
<main className={classes.content} >
{childrenInjectedWithProps}
</main>
</div>
)
return (
<div>
<SideBar {...props} themeMode={themeMode} health={health} nodeHealth={nodeHealth} />
<NavBar themeMode={themeMode} />
<main className={classes.content}>{props.children}</main>
</div>
)
}
export default Dashboard