fix linting on the explorer

This commit is contained in:
Jonathan Rainville 2018-10-24 15:09:32 -04:00
parent 9a0c562568
commit 90fafd0158
7 changed files with 79 additions and 76 deletions

View File

@ -3,56 +3,42 @@ import React, {Component} from 'react';
import {
Row,
Col,
FormGroup,
Label,
Input,
Button,
Card,
CardBody,
CardHeader,
CardTitle,
CardFooter,
ListGroup,
ListGroupItem
Button
} from "reactstrap";
import ReactJson from 'react-json-view';
class ContractDebugger extends Component {
constructor(props) {
super(props);
}
handleChange(e) {
this.setState({txHash: e.target.value});
}
debug(e) {
debug(_e) {
this.props.startDebug(this.state.txHash);
}
debugJumpBack(e) {
this.props.debugJumpBack()
debugJumpBack(_e) {
this.props.debugJumpBack();
}
debugJumpForward(e) {
this.props.debugJumpForward()
debugJumpForward(_e) {
this.props.debugJumpForward();
}
debugStepOverForward(e) {
this.props.debugStepOverForward()
debugStepOverForward(_e) {
this.props.debugStepOverForward();
}
debugStepOverBackward(e) {
this.props.debugStepOverBackward()
debugStepOverBackward(_e) {
this.props.debugStepOverBackward();
}
debugStepIntoForward(e) {
this.props.debugStepIntoForward()
debugStepIntoForward(_e) {
this.props.debugStepIntoForward();
}
debugStepIntoBackward(e) {
this.props.debugStepIntoBackward()
debugStepIntoBackward(_e) {
this.props.debugStepIntoBackward();
}
render() {
@ -89,6 +75,14 @@ class ContractDebugger extends Component {
ContractDebugger.propTypes = {
contract: PropTypes.object.isRequired,
startDebug: PropTypes.func,
debugJumpBack: PropTypes.func,
debugJumpForward: PropTypes.func,
debugStepOverForward: PropTypes.func,
debugStepOverBackward: PropTypes.func,
debugStepIntoForward: PropTypes.func,
debugStepIntoBackward: PropTypes.func,
debuggerInfo: PropTypes.object
};
export default ContractDebugger;

View File

@ -16,7 +16,7 @@ let editor;
const initMonaco = (value) => {
let model;
if (editor) {
model = editor.getModel()
model = editor.getModel();
}
editor = monaco.editor.create(document.getElementById(EDITOR_ID), {
glyphMargin: true,
@ -33,7 +33,7 @@ class TextEditor extends React.Component {
}
componentDidMount() {
initMonaco();
editor.onDidChangeModelContent((event) => {
editor.onDidChangeModelContent((_event) => {
const value = editor.getValue();
this.props.onFileContentChange(value);
});
@ -103,15 +103,13 @@ class TextEditor extends React.Component {
));
let debuggerLine = this.props.debuggerLine;
console.dir("debuggerLine")
console.dir(debuggerLine)
newDecorations.push({
range: new monaco.Range(debuggerLine,1,debuggerLine,1),
options: {
isWholeLine: true,
className: 'text-editor__debuggerLine'
}
})
});
const decorations = editor.deltaDecorations(this.state.decorations, newDecorations);
this.setState({decorations: decorations});
}
@ -122,7 +120,7 @@ class TextEditor extends React.Component {
}
this.updateMarkers();
const expectedDecorationsLength = this.props.debuggerLine ? this.props.breakpoints.length + 1 : this.props.breakpoints.length
const expectedDecorationsLength = this.props.debuggerLine ? this.props.breakpoints.length + 1 : this.props.breakpoints.length;
if (expectedDecorationsLength !== this.state.decorations.length || this.props.debuggerLine !== prevProps.debuggerLine) {
this.updateDecorations();
}
@ -135,12 +133,12 @@ class TextEditor extends React.Component {
<ul className="list-inline m-0 p-2">
{this.props.editorTabs.map(file => (
<li key={file.name} className={classNames("list-inline-item", "border-right", "p-2", { 'bg-dark': file.name === this.props.currentFile.name })}>
<a className="text-white no-underline" href='#switch-tab' onClick={() => this.props.addEditorTabs(file)}>{file.name}</a>
<a className="text-white no-underline" href="#switch-tab" onClick={() => this.props.addEditorTabs(file)}>{file.name}</a>
<FontAwesomeIcon onClick={() => this.props.removeEditorTabs(file)} className="mx-1" name="close" />
</li>
))}
</ul>
)
);
}
render() {
@ -149,7 +147,7 @@ class TextEditor extends React.Component {
{this.renderTabs()}
<div style={{height: '100%'}} id={EDITOR_ID} />
</div>
)
);
}
}

View File

@ -1,15 +1,14 @@
import React from 'react';
import PropTypes from 'prop-types';
import {Row, Label, Col, Button, Nav, NavLink} from 'reactstrap';
import {Button, Nav, NavLink} from 'reactstrap';
import FontAwesomeIcon from 'react-fontawesome';
import { AppSwitch } from '@coreui/react'
const TextEditorToolbar = (props) => (
<ol className="breadcrumb">
<li class="breadcrumb-item">
<li className="breadcrumb-item">
{props.currentFile.name}
</li>
<li class="breadcrumb-item">
<li className="breadcrumb-item">
<Button color="success" size="sm" onClick={props.save}>
<FontAwesomeIcon className="mr-2" name="save"/>
Save
@ -49,7 +48,8 @@ TextEditorToolbar.propTypes = {
save: PropTypes.func,
remove: PropTypes.func,
toggleShowHiddenFiles: PropTypes.func,
openAsideTab: PropTypes.func
openAsideTab: PropTypes.func,
currentFile: PropTypes.object
};
export default TextEditorToolbar;

View File

@ -1,24 +1,23 @@
import React, {Component} from 'react';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import {contractLogs as contractLogsAction, listenToContractLogs, startDebug, debugJumpBack, debugJumpForward, debugStepOverForward, debugStepOverBackward, debugStepIntoForward, debugStepIntoBackward} from '../actions';
import {startDebug, debugJumpBack, debugJumpForward, debugStepOverForward, debugStepOverBackward, debugStepIntoForward, debugStepIntoBackward} from '../actions';
import ContractDebugger from '../components/ContractDebugger';
import DataWrapper from "../components/DataWrapper";
import {getContractLogsByContract, debuggerInfo} from "../reducers/selectors";
class ContractDebuggerContainer extends Component {
componentDidMount() {
// if (this.props.contractLogs.length === 0) {
// this.props.listenToContractLogs();
// this.props.fetchContractLogs(this.props.contract.className);
// }
}
render() {
return (
<DataWrapper shouldRender={this.props.contractLogs !== undefined } {...this.props} render={() => (
<ContractDebugger contract={this.props.contract} startDebug={this.props.startDebug} debugJumpBack={this.props.debugJumpBack} debugJumpForward={this.props.debugJumpForward} debugStepOverForward={this.props.debugStepOverForward} debugStepOverBackward={this.props.debugStepOverBackward} debugStepIntoForward={this.props.debugStepIntoForward} debugStepIntoBackward={this.props.debugStepIntoBackward} debuggerInfo={this.props.debuggerInfo}
<ContractDebugger contract={this.props.contract} startDebug={this.props.startDebug}
debugJumpBack={this.props.debugJumpBack} debugJumpForward={this.props.debugJumpForward}
debugStepOverForward={this.props.debugStepOverForward}
debugStepOverBackward={this.props.debugStepOverBackward}
debugStepIntoForward={this.props.debugStepIntoForward}
debugStepIntoBackward={this.props.debugStepIntoBackward}
debuggerInfo={this.props.debuggerInfo}
/>
)} />
);
@ -36,7 +35,16 @@ ContractDebuggerContainer.propTypes = {
contractLogs: PropTypes.array,
fetchContractLogs: PropTypes.func,
listenToContractLogs: PropTypes.func,
match: PropTypes.object
match: PropTypes.object,
contract: PropTypes.object,
startDebug: PropTypes.func,
debugJumpBack: PropTypes.func,
debugJumpForward: PropTypes.func,
debugStepOverBackward: PropTypes.func,
debugStepIntoForward: PropTypes.func,
debugStepIntoBackward: PropTypes.func,
debugStepOverForward: PropTypes.func,
debuggerInfo: PropTypes.object
};
export default connect(

View File

@ -19,51 +19,51 @@ class TextEditorAsideContainer extends Component {
render() {
switch(this.props.currentAsideTab) {
case 'browser':
return <Preview />
return <Preview />;
case 'debugger':
return this.props.contracts.map((contract, index) => {
return (
<Card>
<Card key={'contract-' + index}>
<CardBody>
<CardTitle style={{"font-size": "2em"}}>{contract.className} - Details</CardTitle>
<CardTitle style={{"fontSize": "2em"}}>{contract.className} - Details</CardTitle>
<ContractDebuggerContainer key={index} contract={contract} />
</CardBody>
</Card>
)
})
);
});
case 'detail':
return this.props.contracts.map((contract, index) => {
return (
<Card>
<Card key={'contract-' + index}>
<CardBody>
<CardTitle style={{"font-size": "2em"}}>{contract.className} - Details</CardTitle>
<CardTitle style={{"fontSize": "2em"}}>{contract.className} - Details</CardTitle>
<ContractDetail key={index} contract={contract} />
</CardBody>
</Card>
)
})
);
});
case 'logger':
return this.props.contracts.map((contract, index) => {
return (
<Card>
<Card key={'contract-' + index}>
<CardBody>
<CardTitle style={{"font-size": "2em"}}>{contract.className} - Transactions</CardTitle>
<CardTitle style={{"fontSize": "2em"}}>{contract.className} - Transactions</CardTitle>
<ContractLoggerContainer key={index} contract={contract} />)
</CardBody>
</Card>
)
})
);
});
case 'overview':
return this.props.contracts.map((contract, index) => {
return (
<Card>
<Card key={'contract-' + index}>
<CardBody>
<CardTitle style={{"font-size": "2em"}}>{contract.className} - Overview</CardTitle>
<CardTitle style={{"fontSize": "2em"}}>{contract.className} - Overview</CardTitle>
<ContractOverviewContainer key={index} contract={contract} />
</CardBody>
</Card>
)
})
);
});
default:
return <React.Fragment></React.Fragment>;
}
@ -80,12 +80,13 @@ TextEditorAsideContainer.propTypes = {
currentFile: PropTypes.object,
currentAsideTab: PropTypes.string,
contract: PropTypes.array,
fetchContracts: PropTypes.func
fetchContracts: PropTypes.func,
contracts: PropTypes.array
};
export default connect(
mapStateToProps,
{
fetchContracts: contractsAction.request,
fetchContracts: contractsAction.request
},
)(TextEditorAsideContainer);

View File

@ -6,10 +6,10 @@ import {
addEditorTabs as addEditorTabsAction,
fetchEditorTabs as fetchEditorTabsAction,
removeEditorTabs as removeEditorTabsAction,
toggleBreakpoint,
toggleBreakpoint
} from '../actions';
import {getCurrentFile, getContractCompile, getContractDeploys, getBreakpointsByFilename, getDebuggerLine, getEditorTabs} from '../reducers/selectors';
import {getBreakpointsByFilename, getDebuggerLine, getEditorTabs} from '../reducers/selectors';
class TextEditorContainer extends React.Component {
componentDidMount() {
@ -27,7 +27,7 @@ class TextEditorContainer extends React.Component {
addEditorTabs={this.props.addEditorTabs}
debuggerLine={this.props.debuggerLine}
onFileContentChange={this.props.onFileContentChange} />
)
);
}
}
@ -46,7 +46,9 @@ TextEditorContainer.propTypes = {
toggleBreakpoint: PropTypes.object,
fetchEditorTabs: PropTypes.func,
removeEditorTabs: PropTypes.func,
addEditorTabs: PropTypes.func
addEditorTabs: PropTypes.func,
debuggerLine: PropTypes.number,
editorTabs: PropTypes.array
};
export default connect(

View File

@ -5,7 +5,7 @@ import TextEditorToolbar from '../components/TextEditorToolbar';
import {
saveFile as saveFileAction,
removeFile as removeFileAction,
removeFile as removeFileAction
} from '../actions';
class TextEditorToolbarContainer extends Component {