Safe view tabs as routes wip

src/routes/safe/components/Layout.jsx

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react'
 import classNames from 'classnames/bind'
+import { Switch, Redirect, Route } from 'react-router-dom'
 import OpenInNew from '@material-ui/icons/OpenInNew'
 import Tabs from '@material-ui/core/Tabs'
 import Tab from '@material-ui/core/Tab'
@@ -21,9 +22,7 @@ import Receive from './Balances/Receive'
 import NoSafe from '~/components/NoSafe'
 import { type SelectorProps } from '~/routes/safe/container/selector'
 import { getEtherScanLink } from '~/logic/wallets/getWeb3'
-import {
+import { secondary, border } from '~/theme/variables'
-  secondary, border,
-} from '~/theme/variables'
 import { copyToClipboard } from '~/utils/clipboard'
 import { type Actions } from '../container/actions'
 import Balances from './Balances'
@@ -49,7 +48,7 @@ type Props = SelectorProps &
     onShow: Function,
     onHide: Function,
     showSendFunds: Function,
-    hideSendFunds: Function
+    hideSendFunds: Function,
   }
 
 const openIconStyle = {
@@ -99,6 +98,7 @@ class Layout extends React.Component<Props, State> {
       showSendFunds,
       hideSendFunds,
     } = this.props
+    console.log(this.props)
     const { tabIndex } = this.state
 
     if (!safe) {
@@ -162,7 +162,11 @@ class Layout extends React.Component<Props, State> {
           </Tabs>
         </Row>
         <Hairline color={border} style={{ marginTop: '-2px' }} />
-        {tabIndex === 0 && (
+        <Switch>
+          <Route
+            exact
+            path="balances"
+            render={() => (
               <Balances
                 ethBalance={ethBalance}
                 tokens={tokens}
@@ -174,7 +178,11 @@ class Layout extends React.Component<Props, State> {
                 createTransaction={createTransaction}
               />
             )}
-        {tabIndex === 1 && (
+          />
+          <Route
+            exact
+            path="transactions"
+            render={() => (
               <Transactions
                 threshold={safe.threshold}
                 owners={safe.owners}
@@ -188,7 +196,11 @@ class Layout extends React.Component<Props, State> {
                 processTransaction={processTransaction}
               />
             )}
-        {tabIndex === 2 && (
+          />
+          <Route
+            exact
+            path="settings"
+            render={() => (
               <Settings
                 granted={granted}
                 safeAddress={address}
@@ -202,6 +214,9 @@ class Layout extends React.Component<Props, State> {
                 createTransaction={createTransaction}
               />
             )}
+          />
+          <Redirect to="balances" />
+        </Switch>
         <SendModal
           onClose={hideSendFunds}
           isOpen={sendFunds.isOpen}
@@ -221,12 +236,7 @@ class Layout extends React.Component<Props, State> {
           open={showReceive}
           paperClassName={classes.receiveModal}
         >
-          <Receive
+          <Receive safeName={name} safeAddress={address} etherScanLink={etherScanLink} onClose={onHide('Receive')} />
-            safeName={name}
-            safeAddress={address}
-            etherScanLink={etherScanLink}
-            onClose={onHide('Receive')}
-          />
         </Modal>
       </>
     )