move routes and links to maincontainer

app/components/FundsManagement.jsx

@@ -1,16 +1,22 @@
 import React from 'react'
+import Divider from '@material-ui/core/Divider'
 import { FundingContext } from '../context'
 import PledgesTable from './PledgesTable'
 import FunderProfilesTable from './FunderProfilesTable'
+import AddFunder from './AddFunder'
+import CreateFunding from './CreateFunding'
 
 const FundsManagement = ({ open }) => {
   const maxWidth = open ? `${window.visualViewport.width - 35}px` : '100vw'
   return (
     <FundingContext.Consumer>
-      {({ allPledges, transferPledgeAmounts, fundProfiles, cancelFundProfile }) =>
+      {({ allPledges, appendPledges, appendFundProfile, transferPledgeAmounts, fundProfiles, cancelFundProfile }) =>
         <div style={{ maxWidth }}>
           {!!allPledges.length && <PledgesTable data={allPledges} transferPledgeAmounts={transferPledgeAmounts} fundProfiles={fundProfiles} />}
           {!!fundProfiles.length && <FunderProfilesTable data={fundProfiles} cancelFundProfile={cancelFundProfile}/>}
+          <AddFunder appendFundProfile={appendFundProfile} />
+          <Divider variant="middle" />
+          <CreateFunding refreshTable={appendPledges} />
         </div>
       }
     </FundingContext.Consumer>

app/components/MainCointainer.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { HashRouter as Router, Route, Link, Switch } from 'react-router-dom'
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
@@ -18,6 +19,7 @@ import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import InboxIcon from '@material-ui/icons/MoveToInbox';
 import FundsManagement from './FundsManagement'
+import ContractAdmin from './ContractAdmin'
 
 const drawerWidth = 240
 
@@ -79,6 +81,9 @@ const styles = theme => ({
     }),
     marginLeft: 0,
   },
+  link: {
+    textDecoration: 'none'
+  }
 });
 
 class PersistentDrawerLeft extends React.Component {
@@ -87,16 +92,16 @@ class PersistentDrawerLeft extends React.Component {
   };
 
   handleDrawerOpen = () => {
-    this.setState({ open: true });
+    this.setState({ open: true })
   };
 
   handleDrawerClose = () => {
-    this.setState({ open: false });
+    this.setState({ open: false })
   };
 
   render() {
-    const { classes, theme } = this.props;
+    const { classes, theme } = this.props
-    const { open } = this.state;
+    const { open } = this.state
 
     return (
       <div className={classes.root}>
@@ -143,10 +148,12 @@ class PersistentDrawerLeft extends React.Component {
             </ListItem>
           </List>
           <List>
+            <Link to="/funds-management/" className={classes.link}>
               <ListItem button>
                 <ListItemIcon><InboxIcon /></ListItemIcon>
                 <ListItemText primary="Funds Management" />
               </ListItem>
+            </Link>
           </List>
           <List>
             <ListItem button>
@@ -155,10 +162,12 @@ class PersistentDrawerLeft extends React.Component {
             </ListItem>
           </List>
           <List>
+            <Link to="/admin/" className={classes.link}>
               <ListItem button>
                 <ListItemIcon><InboxIcon /></ListItemIcon>
                 <ListItemText primary="Contract Admin" />
               </ListItem>
+            </Link>
           </List>
           <Divider />
         </Drawer>
@@ -171,7 +180,8 @@ class PersistentDrawerLeft extends React.Component {
           <div className={classNames(classes.appBar, {
             [classes.childrenShift]: open,
           })}>
-            <FundsManagement open={open} />
+            <Route path="/funds-management" render={() => <FundsManagement open={open} />} />
+            <Route path="/admin" component={ContractAdmin} />
             {this.props.children}
           </div>
         </main>

app/dapp.js

@@ -3,12 +3,7 @@ import { HashRouter as Router, Route, Link, Switch } from 'react-router-dom'
 import EmbarkJS from 'Embark/EmbarkJS';
 import LPVault from 'Embark/contracts/LPVault';
 import LiquidPledgingMock from 'Embark/contracts/LiquidPledgingMock';
-import web3 from "Embark/web3";
+import web3 from 'Embark/web3'
-import Divider from '@material-ui/core/Divider';
-import AddFunder from './components/AddFunder';
-import CreateFunding from './components/CreateFunding';
-import FunderProfilesTable from './components/FunderProfilesTable'
-import PledgesTable from './components/PledgesTable'
 import { initVaultAndLP, vaultPledgingNeedsInit, standardTokenApproval, getLpAllowance } from './utils/initialize'
 import { getAllLPEvents, getAllVaultEvents, getProfileEvents, formatFundProfileEvent, getAuthorizedPayments } from './utils/events'
 import { getAllPledges, appendToExistingPledges, transferBetweenPledges } from './utils/pledges';
@@ -16,7 +11,6 @@ import { FundingContext } from './context'
 import { cancelProfile } from './utils/fundProfiles'
 import TransfersGraph from './components/TransfersGraph'
 import MainCointainer from './components/MainCointainer'
-import ContractAdmin from './components/ContractAdmin'
 
 const { getNetworkType } = web3.eth.net
 
@@ -88,18 +82,12 @@ class App extends React.Component {
   render() {
     const { account, needsInit, lpAllowance, fundProfiles, allPledges, authorizedPayments, transfers, allVaultEvents } = this.state
     const { appendFundProfile, appendPledges, transferPledgeAmounts, cancelFundProfile } = this
-    const fundingContext = { allPledges, account, transferPledgeAmounts, authorizedPayments, cancelFundProfile, fundProfiles, needsInit, initVaultAndLP, standardTokenApproval }
+    const fundingContext = { allPledges, appendPledges, appendFundProfile, account, transferPledgeAmounts, authorizedPayments, cancelFundProfile, fundProfiles, needsInit, initVaultAndLP, standardTokenApproval }
     return (
       <FundingContext.Provider value={fundingContext}>
         <Router>
           <MainCointainer>
             {false &&transfers && <TransfersGraph transfers={transfers} vaultEvents={allVaultEvents} />}
-              {false && !!allPledges.length && <PledgesTable data={allPledges} transferPledgeAmounts={transferPledgeAmounts} fundProfiles={fundProfiles} />}
-              {false && !!fundProfiles.length && <FunderProfilesTable data={fundProfiles} cancelFundProfile={cancelFundProfile}/>}
-            <AddFunder appendFundProfile={appendFundProfile} />
-            <Divider variant="middle" />
-            <CreateFunding refreshTable={appendPledges} />
-            <Route path="/admin" component={ContractAdmin} />
           </MainCointainer>
         </Router>
       </FundingContext.Provider>