move all routes to maincontainer

This commit is contained in:
Barry Gitarts 2018-12-15 15:31:24 -05:00
parent 53c52dfa69
commit 20de2d202b
3 changed files with 29 additions and 23 deletions

View File

@ -20,6 +20,7 @@ import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox'; import InboxIcon from '@material-ui/icons/MoveToInbox';
import FundsManagement from './FundsManagement' import FundsManagement from './FundsManagement'
import ContractAdmin from './ContractAdmin' import ContractAdmin from './ContractAdmin'
import TransferGraph from './TransfersGraph'
const drawerWidth = 240 const drawerWidth = 240
@ -156,10 +157,12 @@ class PersistentDrawerLeft extends React.Component {
</Link> </Link>
</List> </List>
<List> <List>
<ListItem button> <Link to="/insights/" className={classes.link}>
<ListItemIcon><InboxIcon /></ListItemIcon> <ListItem button>
<ListItemText primary="Insights" /> <ListItemIcon><InboxIcon /></ListItemIcon>
</ListItem> <ListItemText primary="Insights" />
</ListItem>
</Link>
</List> </List>
<List> <List>
<Link to="/admin/" className={classes.link}> <Link to="/admin/" className={classes.link}>
@ -182,6 +185,7 @@ class PersistentDrawerLeft extends React.Component {
})}> })}>
<Route path="/funds-management" render={() => <FundsManagement open={open} />} /> <Route path="/funds-management" render={() => <FundsManagement open={open} />} />
<Route path="/admin" component={ContractAdmin} /> <Route path="/admin" component={ContractAdmin} />
<Route path="/insights" component={TransferGraph} />
{this.props.children} {this.props.children}
</div> </div>
</main> </main>

View File

@ -1,10 +1,11 @@
import Cytoscape from 'cytoscape' import Cytoscape from 'cytoscape'
import dagre from 'cytoscape-dagre' import dagre from 'cytoscape-dagre'
import React, { Fragment, memo } from 'react' import React, { Fragment } from 'react'
import CytoscapeComponent from 'react-cytoscapejs' import CytoscapeComponent from 'react-cytoscapejs'
import { uniq } from 'ramda' import { uniq } from 'ramda'
import { toEther } from '../utils/conversions' import { toEther } from '../utils/conversions'
import { getTokenLabel } from '../utils/currencies' import { getTokenLabel } from '../utils/currencies'
import { FundingContext } from '../context'
Cytoscape.use(dagre) Cytoscape.use(dagre)
const layout = { name: 'dagre' } const layout = { name: 'dagre' }
@ -68,17 +69,21 @@ const createElements = (transfers, vaultEvents) => {
] ]
} }
const TransfersGraph = ({ transfers, vaultEvents }) => { const TransfersGraph = () => {
return ( return (
<Fragment> <FundingContext.Consumer>
<CytoscapeComponent {({ transfers, vaultEvents }) =>
elements={createElements(transfers, vaultEvents)} <Fragment>
style={ { width: '100%', height: '600px', fontSize: '14px' } } <CytoscapeComponent
stylesheet={stylesheet} elements={createElements(transfers, vaultEvents)}
layout={layout} style={ { width: '100%', height: '600px', fontSize: '14px' } }
/> stylesheet={stylesheet}
</Fragment> layout={layout}
/>
</Fragment>
}
</FundingContext.Consumer>
) )
} }
export default memo(TransfersGraph) export default TransfersGraph

View File

@ -9,7 +9,6 @@ import { getAllLPEvents, getAllVaultEvents, getProfileEvents, formatFundProfileE
import { getAllPledges, appendToExistingPledges, transferBetweenPledges } from './utils/pledges'; import { getAllPledges, appendToExistingPledges, transferBetweenPledges } from './utils/pledges';
import { FundingContext } from './context' import { FundingContext } from './context'
import { cancelProfile } from './utils/fundProfiles' import { cancelProfile } from './utils/fundProfiles'
import TransfersGraph from './components/TransfersGraph'
import MainCointainer from './components/MainCointainer' import MainCointainer from './components/MainCointainer'
const { getNetworkType } = web3.eth.net const { getNetworkType } = web3.eth.net
@ -35,7 +34,7 @@ class App extends React.Component {
const authorizedPayments = await getAuthorizedPayments() const authorizedPayments = await getAuthorizedPayments()
const account = await web3.eth.getCoinbase() const account = await web3.eth.getCoinbase()
const allLpEvents = await getAllLPEvents() const allLpEvents = await getAllLPEvents()
const allVaultEvents = await getAllVaultEvents() const vaultEvents = await getAllVaultEvents()
const transfers = allLpEvents.filter(obj => obj.event === 'Transfer') const transfers = allLpEvents.filter(obj => obj.event === 'Transfer')
this.setState({ this.setState({
account, account,
@ -47,7 +46,7 @@ class App extends React.Component {
allPledges, allPledges,
authorizedPayments, authorizedPayments,
allLpEvents, allLpEvents,
allVaultEvents, vaultEvents,
transfers transfers
}) })
} }
@ -80,15 +79,13 @@ class App extends React.Component {
} }
render() { render() {
const { account, needsInit, lpAllowance, fundProfiles, allPledges, authorizedPayments, transfers, allVaultEvents } = this.state const { account, needsInit, lpAllowance, fundProfiles, allPledges, authorizedPayments, transfers, vaultEvents } = this.state
const { appendFundProfile, appendPledges, transferPledgeAmounts, cancelFundProfile } = this const { appendFundProfile, appendPledges, transferPledgeAmounts, cancelFundProfile } = this
const fundingContext = { allPledges, appendPledges, appendFundProfile, account, transferPledgeAmounts, authorizedPayments, cancelFundProfile, fundProfiles, needsInit, initVaultAndLP, standardTokenApproval } const fundingContext = { allPledges, appendPledges, appendFundProfile, account, transferPledgeAmounts, authorizedPayments, cancelFundProfile, fundProfiles, needsInit, initVaultAndLP, standardTokenApproval, transfers, vaultEvents }
return ( return (
<FundingContext.Provider value={fundingContext}> <FundingContext.Provider value={fundingContext}>
<Router> <Router>
<MainCointainer> <MainCointainer />
{false &&transfers && <TransfersGraph transfers={transfers} vaultEvents={allVaultEvents} />}
</MainCointainer>
</Router> </Router>
</FundingContext.Provider> </FundingContext.Provider>
) )