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

* 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
+60 -66
View File
@@ -1,98 +1,92 @@
import React from 'react';
import Button from '@material-ui/core/Button';
import Input from '@material-ui/core/Input';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import { Snackbar, Container, CircularProgress } from '@material-ui/core';
import { ReactElement, useState } from 'react'
import Button from '@material-ui/core/Button'
import Input from '@material-ui/core/Input'
import Dialog from '@material-ui/core/Dialog'
import DialogActions from '@material-ui/core/DialogActions'
import DialogContent from '@material-ui/core/DialogContent'
import DialogContentText from '@material-ui/core/DialogContentText'
import DialogTitle from '@material-ui/core/DialogTitle'
import { Snackbar, Container, CircularProgress } from '@material-ui/core'
import { beeDebugApi } from '../services/bee';
import { beeDebugApi } from '../services/bee'
import EthereumAddress from './EthereumAddress';
import EthereumAddress from './EthereumAddress'
export default function DepositModal() {
const [open, setOpen] = React.useState<boolean>(false);
const [peerId, setPeerId] = React.useState('');
const [loadingCashout, setLoadingCashout] = React.useState<boolean>(false);
const [showToast, setToastVisibility] = React.useState<boolean>(false);
const [toastContent, setToastContent] = React.useState<JSX.Element | null>(null);
export default function DepositModal(): ReactElement {
const [open, setOpen] = useState<boolean>(false)
const [peerId, setPeerId] = useState('')
const [loadingCashout, setLoadingCashout] = useState<boolean>(false)
const [showToast, setToastVisibility] = useState<boolean>(false)
const [toastContent, setToastContent] = useState<JSX.Element | null>(null)
const handleClickOpen = () => {
setOpen(true);
};
setOpen(true)
}
const handleClose = () => {
setOpen(false);
};
setOpen(false)
}
const handleCashout = () => {
if (peerId) {
setLoadingCashout(true)
beeDebugApi.chequebook.peerCashout(peerId)
setLoadingCashout(true)
beeDebugApi.chequebook
.peerCashout(peerId)
.then(res => {
setOpen(false);
handleToast(<span>Successfully cashed out cheque. Transaction
<EthereumAddress
hideBlockie
transaction
address={res.transactionHash}
network={'goerli'}
/>
</span>)
setOpen(false)
handleToast(
<span>
Successfully cashed out cheque. Transaction
<EthereumAddress hideBlockie transaction address={res.transactionHash} network={'goerli'} />
</span>,
)
})
.catch(error => {
.catch(() => {
// FIXME: handle errors more gracefully
handleToast(<span>Error with cashout</span>)
})
.finally(() => {
setLoadingCashout(false)
})
} else {
handleToast(<span>Peer Id invalid</span>)
handleToast(<span>Peer Id invalid</span>)
}
};
}
const handleToast = (text: JSX.Element) => {
setToastContent(text)
setToastVisibility(true);
setTimeout(
() => setToastVisibility(false),
7000
);
};
setToastVisibility(true)
setTimeout(() => setToastVisibility(false), 7000)
}
return (
<div>
<Button variant="contained" color="primary" onClick={handleClickOpen} style={{marginLeft:'7px'}}>
<Button variant="contained" color="primary" onClick={handleClickOpen} style={{ marginLeft: '7px' }}>
Cashout
</Button>
<Snackbar
anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
open={showToast}
message={toastContent}
/>
<Snackbar anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={showToast} message={toastContent} />
<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Cashout Cheque</DialogTitle>
{loadingCashout ?
<Container style={{textAlign:'center', padding:'50px'}}>
<CircularProgress />
{loadingCashout ? (
<Container style={{ textAlign: 'center', padding: '50px' }}>
<CircularProgress />
</Container>
:
<DialogContent>
<DialogContentText style={{marginTop: '20px'}}>
Specify the peer Id of the peer you would like to cashout.
</DialogContentText>
<Input
autoFocus
margin="dense"
id="peerId"
type="text"
placeholder='Peer Id'
fullWidth
onChange={(e) => setPeerId(e.target.value)}
/>
</DialogContent>}
) : (
<DialogContent>
<DialogContentText style={{ marginTop: '20px' }}>
Specify the peer Id of the peer you would like to cashout.
</DialogContentText>
<Input
autoFocus
margin="dense"
id="peerId"
type="text"
placeholder="Peer Id"
fullWidth
onChange={e => setPeerId(e.target.value)}
/>
</DialogContent>
)}
<DialogActions>
<Button onClick={handleClose} color="primary">
Cancel
@@ -103,5 +97,5 @@ export default function DepositModal() {
</DialogActions>
</Dialog>
</div>
);
)
}