Split front end into Juror and Party views

.env

@@ -1,3 +1,4 @@
 REACT_APP_ETHEREUM_PROVIDER=http://localhost:8545
 REACT_APP_STORE_PROVIDER=https://kleros.in
 REACT_APP_ARBITRATOR_ADDRESS=0xaea35f89f98996ae06aac344ab4b9ce1731059c4
+REACT_APP_DEFAULT_VIEW=juror

src/Containers/Jury/ActivatePNK/Form/index.js → src/Components/ActivatePNK/Form/index.js

@@ -3,8 +3,8 @@ import { SubmissionError, Field, reduxForm } from 'redux-form'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import FontAwesome from 'react-fontawesome'
-import { activatePinakion } from '../../../../redux/ethereum/action-creators'
-import Input from '../../../../Components/Input'
+import { activatePinakion } from '../../../redux/ethereum/action-creators'
+import Input from '../../Input'
 import './Form.css'
 
 const Form = props => {

src/Components/Layout/index.js

@@ -1,26 +1,41 @@
 import React from 'react'
 import Sidebar from '../Sidebar'
+import { APP_VIEWS } from '../../constants'
 import './Layout.css'
 
 const Layout = ({
   className,
   address,
+  view,
   children
-}) => (
-  <div className={`Layout-container ${className}`}>
-    <Sidebar
-      items={[
-        'disputes',
-        'contracts',
-        'jury',
-        'decisions',
-        'settings'
-      ]}
-      address={address}
-      balancePNK={242}
-    />
-    { children }
-  </div>
-)
+}) => {
+  let items = []
+  if (view === APP_VIEWS.JUROR) {
+    items = [
+      'disputes',
+      'jury',
+      'decisions',
+      'settings'
+    ]
+  } else if (view === APP_VIEWS.PARTY) {
+    items = [
+      'disputes',
+      'contracts',
+      'decisions',
+      'settings'
+    ]
+  }
+
+  return (
+    <div className={`Layout-container ${className}`}>
+      <Sidebar
+        items={items}
+        address={address}
+        balancePNK={242}
+      />
+      { children }
+    </div>
+  )
+}
 
 export default Layout

src/Components/Sidebar/ShortProfile/ShortProfile.scss

@@ -24,18 +24,8 @@
       opacity: 0.66;
     }
   }
-  .notification {
-    position: relative;
-  }
-  .notificationIsActive {
-    position: absolute;
-    top: -4px;
-    left: 9px;
-    height: 10px;
-    width: 10px;
-    background-color: #ff1c38;
-    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.13);
-    border-radius: 50%;
+  .swap-views {
+    cursor: pointer;
   }
 }
 

src/Components/Sidebar/ShortProfile/index.js

@@ -1,36 +1,51 @@
-import React from 'react'
-import Icon from '../../Icon'
+import React, { Component } from 'react'
 import Identicon from '../../Identicon'
-import { TRUNCATED_DIGITS } from '../../../constants'
+import { TRUNCATED_DIGITS, APP_VIEWS, KLEROS_VIEW_KEY } from '../../../constants'
 import { truncateText } from '../../../helpers/truncateText'
+import FontAwesome from 'react-fontawesome'
 import './ShortProfile.css'
 
-const ShortProfile = ({
-  className,
-  address = 0x0,
-  balancePNK = 0,
-  notificationIsActive = false,
-  children,
-  theme
-}) => (
-  <div className={`ShortProfile-container ${className} ${theme}`}>
-    <div className='icon'>
-      <Identicon seed={address} />
-    </div>
-    <div className='description'>
-      <div className='address'>
-        { truncateText(address, TRUNCATED_DIGITS) }
-      </div>
-      <div className='balancePNK'>
-        { balancePNK } PNK
+class ShortProfile extends Component {
+  swapView = () => {
+    const appView = window.localStorage.getItem(KLEROS_VIEW_KEY)
+    if (appView === APP_VIEWS.JUROR) window.localStorage.setItem(KLEROS_VIEW_KEY, APP_VIEWS.PARTY)
+    else if (appView === APP_VIEWS.PARTY) window.localStorage.setItem(KLEROS_VIEW_KEY, APP_VIEWS.JUROR)
+
+    window.location.reload()
+  }
+
+  render () {
+    const {
+      className,
+      children,
+      theme,
+      address = '0x0',
+      balancePNK = 0
+    } = this.props
+
+    return (
+      <div className={`ShortProfile-container ${className} ${theme}`}>
+        <div className='icon'>
+          <Identicon seed={address} />
+        </div>
+        <div className='description'>
+          <div className='address'>
+            { truncateText(address, TRUNCATED_DIGITS) }
+          </div>
+          <div className='balancePNK'>
+            { balancePNK } PNK
+          </div>
+        </div>
+        <div className='swap-views' onClick={this.swapView}>
+          <FontAwesome
+            name='refresh'
+            style={{marginRight: '10px'}}
+          />
+        </div>
+        { children }
       </div>
-    </div>
-    <div className='notification'>
-      <Icon name='notification' />
-      { notificationIsActive && <div className='notificationIsActive' /> }
-    </div>
-    { children }
-  </div>
-)
+    )
+  }
+}
 
 export default ShortProfile

src/Containers/Jury/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
-import ActivatePNK from './ActivatePNK'
+import ActivatePNK from '../../Components/ActivatePNK'
 import { getArbitratorData } from '../../redux/contracts/action-creators'
 import { balanceFetchData } from '../../redux/ethereum/action-creators'
 import { PERIOD_TO_STATE } from '../../constants'

src/bootstrap/App.js

@@ -22,6 +22,7 @@ import Jury from '../Containers/Jury'
 import Decisions from '../Containers/Decisions'
 import DecisionSummary from '../Containers/Decisions/Summary'
 import Layout from '../Components/Layout'
+import { APP_VIEWS, KLEROS_VIEW_KEY } from '../constants'
 import './index.css'
 
 class App extends Component {
@@ -55,62 +56,101 @@ class App extends Component {
     // FIXME show a loading screen?
     if (!this.state.appLoaded) return false
 
+    // get which view user is in
+    let appView = window.localStorage.getItem(KLEROS_VIEW_KEY)
+    if (!appView || appView === 'undefined') {
+      appView = process.env.REACT_APP_DEFAULT_VIEW
+      window.localStorage.setItem(KLEROS_VIEW_KEY, appView)
+    }
+
+    // FIXME DRY this out a bit
+    let routes
+    if (appView === APP_VIEWS.JUROR) {
+      routes = (
+        <Layout address={this.props.address} view={appView}>
+          <Route
+            exact
+            path='/'
+            component={Home}
+          />
+          <Route
+            exact
+            path='/disputes'
+            component={Disputes}
+          />
+          <Route
+            exact
+            path='/disputes/:address'
+            component={DisputeResolution}
+          />
+          <Route
+            exact
+            path='/settings'
+            component={Settings}
+          />
+          <Route
+            exact
+            path='/jury'
+            component={Jury}
+          />
+          <Route
+            exact
+            path='/decisions'
+            component={Decisions}
+          />
+          <Route
+            exact
+            path='/decisions/:address'
+            component={DecisionSummary}
+          />
+        </Layout>
+      )
+    } else if (appView === APP_VIEWS.PARTY) {
+      routes = (
+        <Layout address={this.props.address} view={appView}>
+          <Route
+            exact
+            path='/'
+            component={Home}
+          />
+          <Route
+            exact
+            path='/contracts'
+            component={ContractsTable}
+          />
+          <Route
+            exact
+            path='/contracts/new'
+            component={Contracts}
+          />
+          <Route
+            exact
+            path='/contract-summary/:address'
+            component={ContractSummary}
+          />
+          <Route
+            exact
+            path='/settings'
+            component={Settings}
+          />
+          <Route
+            exact
+            path='/decisions'
+            component={Decisions}
+          />
+          <Route
+            exact
+            path='/decisions/:address'
+            component={DecisionSummary}
+          />
+        </Layout>
+      )
+    }
     return (
       <Provider store={this.props.store}>
         <Router>
           <Switch>
-            <Layout address={this.props.address}>
-              <Route
-                exact
-                path='/'
-                component={Home}
-              />
-              <Route
-                exact
-                path='/disputes'
-                component={Disputes}
-              />
-              <Route
-                exact
-                path='/contracts'
-                component={ContractsTable}
-              />
-              <Route
-                exact
-                path='/contracts/new'
-                component={Contracts}
-              />
-              <Route
-                exact
-                path='/contract-summary/:address'
-                component={ContractSummary}
-              />
-              <Route
-                exact
-                path='/disputes/:address'
-                component={DisputeResolution}
-              />
-              <Route
-                exact
-                path='/settings'
-                component={Settings}
-              />
-              <Route
-                exact
-                path='/jury'
-                component={Jury}
-              />
-              <Route
-                exact
-                path='/decisions'
-                component={Decisions}
-              />
-              <Route
-                exact
-                path='/decisions/:address'
-                component={DecisionSummary}
-              />
-            </Layout>
+            {routes}
           </Switch>
         </Router>
       </Provider>

src/constants.js

@@ -21,3 +21,8 @@ export const RULINGS = [
   'Party A Wins',
   'Party B Wins'
 ]
+export const APP_VIEWS = {
+  'JUROR': 'juror',
+  'PARTY': 'party'
+}
+export const KLEROS_VIEW_KEY = 'KLEROS_APP_VIEW'