status-im
/
embark-area-51
mirror of https://github.com/status-im/embark-area-51.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Adding tab to contract view

This commit is contained in:
Anthony Laibe 2018-10-12 12:33:48 +01:00 committed by Pascal Precht
parent df3bce145d
commit 4b2715421d
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
11 changed files with 93 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
embark-ui/src/components/ContractLayout.js
View File

@ -1,94 +1,75 @@
import PropTypes from "prop-types";
import React from 'react';
import {NavLink, Route, Switch, withRouter} from 'react-router-dom';
import {
Page,
Grid,
List
} from "tabler-react";
import { TabContent, TabPane, Nav, NavItem, NavLink, Card, Button, CardTitle, CardText, Row, Col } from 'reactstrap';
import classnames from 'classnames';
import ContractContainer from '../containers/ContractContainer';
import ContractOverview from '../components/ContractOverview';
import ContractLoggerContainer from '../containers/ContractLoggerContainer';
import ContractFunctionsContainer from '../containers/ContractFunctionsContainer';
import ContractDeploymentContainer from '../containers/ContractDeploymentContainer';
import ContractProfileContainer from '../containers/ContractProfileContainer';
import ContractSourceContainer from '../containers/ContractSourceContainer';
const ContractLayout = ({match, contractIsFiddle = false}) => (
<Grid.Row>
<Grid.Col md={3}>
<Page.Title className="my-5">&nbsp;</Page.Title>
<div>
<List.Group transparent={true}>
<List.GroupItem
className="d-flex align-items-center"
to={`/embark/contracts/${match.params.contractName}/overview`}
icon="corner-left-up"
RootComponent={NavLink}
>
Overview
</List.GroupItem>
{!contractIsFiddle &&
<List.GroupItem
className="d-flex align-items-center"
to={`/embark/contracts/${match.params.contractName}/deployment`}
icon="users"
RootComponent={NavLink}
class ContractLayout extends React.Component {
constructor(props) {
super(props);
this.state = {
activeTab: '1'
};
}
toggle(tab) {
if (this.state.activeTab !== tab) {
this.setState({
activeTab: tab
});
}
}
render() {
return (
<React.Fragment>
<Nav tabs>
<NavItem>
<NavLink
className={classnames({ active: this.state.activeTab === '1' })}
onClick={() => { this.toggle('1'); }}
>
Deployment / Utils
</List.GroupItem>
}
<List.GroupItem
className="d-flex align-items-center"
to={`/embark/contracts/${match.params.contractName}/functions`}
icon="book-open"
RootComponent={NavLink}
>
Functions
</List.GroupItem>
<List.GroupItem
className="d-flex align-items-center"
to={`/embark/contracts/${match.params.contractName}/source`}
icon="activity"
RootComponent={NavLink}
>
Source Code
</List.GroupItem>
<List.GroupItem
className="d-flex align-items-center"
to={`/embark/contracts/${match.params.contractName}/profiler`}
icon="server"
RootComponent={NavLink}
>
Profile
</List.GroupItem>
<List.GroupItem
className="d-flex align-items-center"
to={`/embark/contracts/${match.params.contractName}/logger`}
icon="chevrons-right"
RootComponent={NavLink}
>
Logger
</List.GroupItem>
</List.Group>
</div>
</Grid.Col>
<Grid.Col md={9}>
<Switch>
<Route exact path="/embark/contracts/:contractName/overview" component={ContractContainer} />
<Route exact path="/embark/contracts/:contractName/deployment" component={ContractDeploymentContainer} />
<Route exact path="/embark/contracts/:contractName/functions" component={ContractFunctionsContainer} />
<Route exact path="/embark/contracts/:contractName/source" component={ContractSourceContainer} />
<Route exact path="/embark/contracts/:contractName/profiler" component={ContractProfileContainer} />
<Route exact path="/embark/contracts/:contractName/logger" component={ContractLoggerContainer} />
</Switch>
</Grid.Col>
</Grid.Row>
);
Overview
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.activeTab === '2' })}
onClick={() => { this.toggle('2'); }}
>
Functions
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.activeTab === '3' })}
onClick={() => { this.toggle('3'); }}
>
Logger
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab}>
<TabPane tabId="1">
<ContractOverview contract={this.props.contract} />
</TabPane>
<TabPane tabId="2">
<ContractFunctionsContainer contract={this.props.contract} />
</TabPane>
<TabPane tabId="3">
<ContractLoggerContainer contract={this.props.contract} />
</TabPane>
</TabContent>
</React.Fragment>
)
}
}
ContractLayout.propTypes = {
match: PropTypes.object,
contractIsFiddle: PropTypes.bool
contract: PropTypes.object
};
export default withRouter(ContractLayout);
export default ContractLayout;

8
embark-ui/src/components/Contract.js → embark-ui/src/components/ContractOverview.js
View File

@ -8,12 +8,11 @@ import {
} from "tabler-react";
import JSONTree from 'react-json-tree';
import {formatContractForDisplay} from '../utils/presentation';
import {withRouter} from 'react-router-dom';
const Contract = ({contract, match}) => {
const contractDisplay = formatContractForDisplay(contract);
return (
<Page.Content title={match.params.contractName + " Overview"}>
<Page.Content title={contract.className + " Overview"}>
<Grid.Row>
<Grid.Col>
<Card>
@ -30,7 +29,7 @@ const Contract = ({contract, match}) => {
</Table.Header>
<Table.Body>
<Table.Row className={contractDisplay.stateColor}>
<Table.Col>{(contract.name || contract.className)}</Table.Col>
<Table.Col>{contract.className}</Table.Col>
<Table.Col>{contractDisplay.address}</Table.Col>
<Table.Col>{contractDisplay.state}</Table.Col>
</Table.Row>
@ -61,8 +60,7 @@ const Contract = ({contract, match}) => {
Contract.propTypes = {
contract: PropTypes.object,
match: PropTypes.object
};
export default withRouter(Contract);
export default Contract;

0
embark-ui/src/components/FileContractsLayout.js Normal file
View File

13
embark-ui/src/containers/ContractFunctionsContainer.js
View File

@ -1,7 +1,6 @@
import React, {Component} from 'react';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import {withRouter} from 'react-router-dom';
import {contractProfile as contractProfileAction, contractFunction as contractFunctionAction} from '../actions';
import ContractFunctions from '../components/ContractFunctions';
@ -11,7 +10,7 @@ import {getContractProfile, getContractFunctions} from "../reducers/selectors";
class ContractFunctionsContainer extends Component {
componentDidMount() {
this.props.fetchContractProfile(this.props.match.params.contractName);
this.props.fetchContractProfile(this.props.contract.className);
}
render() {
@ -33,15 +32,15 @@ class ContractFunctionsContainer extends Component {
function mapStateToProps(state, props) {
return {
contractProfile: getContractProfile(state, props.match.params.contractName),
contractFunctions: getContractFunctions(state, props.match.params.contractName),
contractProfile: getContractProfile(state, props.contract.className),
contractFunctions: getContractFunctions(state, props.contract.className),
error: state.errorMessage,
loading: state.loading
};
}
ContractFunctionsContainer.propTypes = {
match: PropTypes.object,
contract: PropTypes.object,
contractProfile: PropTypes.object,
contractFunctions: PropTypes.arrayOf(PropTypes.object),
postContractFunction: PropTypes.func,
@ -49,10 +48,10 @@ ContractFunctionsContainer.propTypes = {
error: PropTypes.string
};
export default withRouter(connect(
export default connect(
mapStateToProps,
{
fetchContractProfile: contractProfileAction.request,
postContractFunction: contractFunctionAction.post
}
)(ContractFunctionsContainer));
)(ContractFunctionsContainer);

2
embark-ui/src/containers/ContractLayoutContainer.js
View File

@ -14,7 +14,7 @@ class ContractLayoutContainer extends Component {
render() {
if (this.props.contract){
return <ContractLayout contractIsFiddle={this.props.contract.isFiddle} />;
return <ContractLayout contract={this.props.contract}/>;
} else {
return <React.Fragment />;
}

11
embark-ui/src/containers/ContractLoggerContainer.js
View File

@ -1,7 +1,6 @@
import React, {Component} from 'react';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import {withRouter} from 'react-router-dom';
import {contractLogs as contractLogsAction, listenToContractLogs} from '../actions';
import ContractLogger from '../components/ContractLogger';
@ -12,14 +11,14 @@ class ContractLoggerContainer extends Component {
componentDidMount() {
if (this.props.contractLogs.length === 0) {
this.props.listenToContractLogs();
this.props.fetchContractLogs(this.props.match.params.contractName);
this.props.fetchContractLogs(this.props.contract.className);
}
}
render() {
return (
<DataWrapper shouldRender={this.props.contractLogs !== undefined } {...this.props} render={() => (
<ContractLogger contractLogs={this.props.contractLogs} contractName={this.props.match.params.contractName}/>
<ContractLogger contractLogs={this.props.contractLogs} contractName={this.props.contract.className}/>
)} />
);
}
@ -27,7 +26,7 @@ class ContractLoggerContainer extends Component {
function mapStateToProps(state, props) {
return {
contractLogs: getContractLogsByContract(state, props.match.params.contractName)
contractLogs: getContractLogsByContract(state, props.contract.className)
};
}
@ -38,10 +37,10 @@ ContractLoggerContainer.propTypes = {
match: PropTypes.object
};
export default withRouter(connect(
export default connect(
mapStateToProps,
{
fetchContractLogs: contractLogsAction.request,
listenToContractLogs: listenToContractLogs
}
)(ContractLoggerContainer));
)(ContractLoggerContainer);

8
embark-ui/src/containers/FileContractsContainer.js
View File

@ -2,13 +2,13 @@ import React, {Component} from 'react';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import {contract as contractAction} from '../actions';
import {contracts as contractsAction} from '../actions';
import ContractLayout from '../components/ContractLayout';
import {getContractsByPath} from "../reducers/selectors";
class FileContractsContainer extends Component {
componentDidMount() {
this.props.fetchContract(this.props.currentFile);
this.props.fetchContracts();
}
render() {
@ -28,7 +28,7 @@ function mapStateToProps(state, props) {
FileContractsContainer.propTypes = {
contracts: PropTypes.arrayOf(PropTypes.object),
fetchFileContracts: PropTypes.func,
fetchContractsByPath: PropTypes.func,
error: PropTypes.string,
loading: PropTypes.bool
};
@ -36,6 +36,6 @@ FileContractsContainer.propTypes = {
export default connect(
mapStateToProps,
{
fetchContract: contractAction.request
fetchContracts: contractsAction.request
}
)(FileContractsContainer);

2
embark-ui/src/containers/TextEditorAsideContainer.js
View File

@ -1,5 +1,3 @@
/* eslint multiline-ternary: "off" */
/* eslint operator-linebreak: "off" */
import React, {Component} from 'react';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';

2
embark-ui/src/containers/TextEditorContainer.js
View File

@ -1,5 +1,3 @@
/* eslint multiline-ternary: "off" */
/* eslint operator-linebreak: "off" */
import React, {Component} from 'react';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';

2
embark-ui/src/services/api.js
View File

@ -68,7 +68,7 @@ export function fetchContracts() {
}
export function fetchContract(payload) {
return get('/contract', ...arguments);
return get(`/contract/${payload.contractName}`, ...arguments);
}
export function postContractFunction(payload) {

19
lib/modules/contracts_manager/index.js
View File

@ -84,16 +84,9 @@ class ContractsManager {
embark.registerAPICall(
'get',
'/embark-api/contract',
'/embark-api/contract/:contractName',
(req, res) => {
const result = [];
self.events.request('contracts:all', null, (contracts) => {
const contractByFilename = contracts.filter((contract) => contract.filename === req.query.filename);
contractByFilename.forEach((contract) => {
self.events.request('contracts:contract', contract.className, (contract) => result.push(contract));
});
});
res.send(result);
self.events.request('contracts:contract', req.params.contractName, res.send.bind(res));
}
);
@ -168,7 +161,13 @@ class ContractsManager {
'get',
'/embark-api/contracts',
(req, res) => {
self.events.request('contracts:all', null, res.send.bind(res));
const result = [];
self.events.request('contracts:all', null, (contracts) => {
contracts.forEach((contract) => {
self.events.request('contracts:contract', contract.className, (contract) => result.push(contract));
});
});
res.send(result);
}
);