From 6d77e7c6a67825505e73b68400a50443c45f74f8 Mon Sep 17 00:00:00 2001 From: Sam Vitello Date: Tue, 26 Dec 2017 10:00:32 -0800 Subject: [PATCH 1/4] show different side menu/routes based on app view --- .env | 1 + .../ActivatePNK/Form/Form.scss | 0 .../ActivatePNK/Form/index.js | 4 +- .../Jury => Components}/ActivatePNK/index.js | 0 src/Components/Layout/index.js | 47 ++++-- src/Containers/Jury/index.js | 2 +- src/bootstrap/App.js | 138 +++++++++++------- src/constants.js | 4 + 8 files changed, 125 insertions(+), 71 deletions(-) rename src/{Containers/Jury => Components}/ActivatePNK/Form/Form.scss (100%) rename src/{Containers/Jury => Components}/ActivatePNK/Form/index.js (93%) rename src/{Containers/Jury => Components}/ActivatePNK/index.js (100%) diff --git a/.env b/.env index 098549c..617936f 100644 --- a/.env +++ b/.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_VIEW=juror diff --git a/src/Containers/Jury/ActivatePNK/Form/Form.scss b/src/Components/ActivatePNK/Form/Form.scss similarity index 100% rename from src/Containers/Jury/ActivatePNK/Form/Form.scss rename to src/Components/ActivatePNK/Form/Form.scss diff --git a/src/Containers/Jury/ActivatePNK/Form/index.js b/src/Components/ActivatePNK/Form/index.js similarity index 93% rename from src/Containers/Jury/ActivatePNK/Form/index.js rename to src/Components/ActivatePNK/Form/index.js index 79fb038..c108ec3 100644 --- a/src/Containers/Jury/ActivatePNK/Form/index.js +++ b/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 => { diff --git a/src/Containers/Jury/ActivatePNK/index.js b/src/Components/ActivatePNK/index.js similarity index 100% rename from src/Containers/Jury/ActivatePNK/index.js rename to src/Components/ActivatePNK/index.js diff --git a/src/Components/Layout/index.js b/src/Components/Layout/index.js index cff0647..9e6f892 100644 --- a/src/Components/Layout/index.js +++ b/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 -}) => ( -
- - { children } -
-) +}) => { + let items = [] + if (view === APP_VIEWS.JUROR) { + items = [ + 'disputes', + 'jury', + 'decisions', + 'settings' + ] + } else if (view === APP_VIEWS.PARTY) { + items = [ + 'disputes', + 'contracts', + 'decisions', + 'settings' + ] + } + + return ( +
+ + { children } +
+ ) +} export default Layout diff --git a/src/Containers/Jury/index.js b/src/Containers/Jury/index.js index 098ac10..2ebc604 100644 --- a/src/Containers/Jury/index.js +++ b/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' diff --git a/src/bootstrap/App.js b/src/bootstrap/App.js index 660f531..f8af63f 100644 --- a/src/bootstrap/App.js +++ b/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 } from '../constants' import './index.css' class App extends Component { @@ -55,62 +56,95 @@ class App extends Component { // FIXME show a loading screen? if (!this.state.appLoaded) return false + const appView = process.env.REACT_APP_VIEW + + let routes + if (appView === APP_VIEWS.JUROR) { + routes = ( + + + + + + + + + + ) + } else if (appView === APP_VIEWS.PARTY) { + routes = ( + + + + + + + + + + ) + } return ( - - - - - - - - - - - - + {routes} diff --git a/src/constants.js b/src/constants.js index 06cdf7e..dc3cd58 100644 --- a/src/constants.js +++ b/src/constants.js @@ -21,3 +21,7 @@ export const RULINGS = [ 'Party A Wins', 'Party B Wins' ] +export const APP_VIEWS = { + 'JUROR': 'juror', + 'PARTY': 'party' +} From f89fdafd2716ff9527c6d63a7956e17e9e72f609 Mon Sep 17 00:00:00 2001 From: Sam Vitello Date: Tue, 26 Dec 2017 10:28:41 -0800 Subject: [PATCH 2/4] swap view in menu bar --- .env | 2 +- .../Sidebar/ShortProfile/ShortProfile.scss | 14 +--- src/Components/Sidebar/ShortProfile/index.js | 73 +++++++++++-------- src/bootstrap/App.js | 11 ++- src/constants.js | 1 + 5 files changed, 57 insertions(+), 44 deletions(-) diff --git a/.env b/.env index 617936f..3f8efde 100644 --- a/.env +++ b/.env @@ -1,4 +1,4 @@ REACT_APP_ETHEREUM_PROVIDER=http://localhost:8545 REACT_APP_STORE_PROVIDER=https://kleros.in REACT_APP_ARBITRATOR_ADDRESS=0xaea35f89f98996ae06aac344ab4b9ce1731059c4 -REACT_APP_VIEW=juror +REACT_APP_DEFAULT_VIEW=juror diff --git a/src/Components/Sidebar/ShortProfile/ShortProfile.scss b/src/Components/Sidebar/ShortProfile/ShortProfile.scss index 7dc3a3c..9615704 100644 --- a/src/Components/Sidebar/ShortProfile/ShortProfile.scss +++ b/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; } } diff --git a/src/Components/Sidebar/ShortProfile/index.js b/src/Components/Sidebar/ShortProfile/index.js index 4856f2e..62c4183 100644 --- a/src/Components/Sidebar/ShortProfile/index.js +++ b/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 -}) => ( -
-
- -
-
-
- { truncateText(address, TRUNCATED_DIGITS) } -
-
- { balancePNK } PNK +class ShortProfile extends Component { + swapView = () => { + let appView = window.localStorage.getItem(KLEROS_VIEW_KEY) + if (appView === APP_VIEWS.JUROR) window.localStorage.setItem(KLEROS_VIEW_KEY, APP_VIEWS.PARTY) + 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 ( +
+
+ +
+
+
+ { truncateText(address, TRUNCATED_DIGITS) } +
+
+ { balancePNK } PNK +
+
+
+ +
+ { children }
-
-
- - { notificationIsActive &&
} -
- { children } -
-) + ) + } +} export default ShortProfile diff --git a/src/bootstrap/App.js b/src/bootstrap/App.js index f8af63f..1e399a0 100644 --- a/src/bootstrap/App.js +++ b/src/bootstrap/App.js @@ -22,7 +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 } from '../constants' +import { APP_VIEWS, KLEROS_VIEW_KEY } from '../constants' import './index.css' class App extends Component { @@ -56,8 +56,15 @@ class App extends Component { // FIXME show a loading screen? if (!this.state.appLoaded) return false - const appView = process.env.REACT_APP_VIEW + // get which view user is in + let appView = window.localStorage.getItem(KLEROS_VIEW_KEY) + if (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 = ( diff --git a/src/constants.js b/src/constants.js index dc3cd58..2fefa68 100644 --- a/src/constants.js +++ b/src/constants.js @@ -25,3 +25,4 @@ export const APP_VIEWS = { 'JUROR': 'juror', 'PARTY': 'party' } +export const KLEROS_VIEW_KEY = 'KLEROS_APP_VIEW' From 6aadb0363742eaf79b599e635eb787afd2af80da Mon Sep 17 00:00:00 2001 From: Sam Vitello Date: Tue, 26 Dec 2017 10:34:42 -0800 Subject: [PATCH 3/4] clean up swapViews --- src/Components/Sidebar/ShortProfile/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Components/Sidebar/ShortProfile/index.js b/src/Components/Sidebar/ShortProfile/index.js index 62c4183..f2c90c8 100644 --- a/src/Components/Sidebar/ShortProfile/index.js +++ b/src/Components/Sidebar/ShortProfile/index.js @@ -7,9 +7,9 @@ import './ShortProfile.css' class ShortProfile extends Component { swapView = () => { - let appView = window.localStorage.getItem(KLEROS_VIEW_KEY) + const appView = window.localStorage.getItem(KLEROS_VIEW_KEY) if (appView === APP_VIEWS.JUROR) window.localStorage.setItem(KLEROS_VIEW_KEY, APP_VIEWS.PARTY) - if (appView === APP_VIEWS.PARTY) window.localStorage.setItem(KLEROS_VIEW_KEY, APP_VIEWS.JUROR) + else if (appView === APP_VIEWS.PARTY) window.localStorage.setItem(KLEROS_VIEW_KEY, APP_VIEWS.JUROR) window.location.reload() } From 8a16410ed549fc2b182714cce3df1402e07583a9 Mon Sep 17 00:00:00 2001 From: Sam Vitello Date: Tue, 26 Dec 2017 10:54:31 -0800 Subject: [PATCH 4/4] expand criteria for missing localStorage view config in bootstrap app --- src/bootstrap/App.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/bootstrap/App.js b/src/bootstrap/App.js index 1e399a0..f652914 100644 --- a/src/bootstrap/App.js +++ b/src/bootstrap/App.js @@ -58,8 +58,7 @@ class App extends Component { // get which view user is in let appView = window.localStorage.getItem(KLEROS_VIEW_KEY) - - if (appView === 'undefined') { + if (!appView || appView === 'undefined') { appView = process.env.REACT_APP_DEFAULT_VIEW window.localStorage.setItem(KLEROS_VIEW_KEY, appView) }