diff --git a/embark-ui/src/components/Layout.js b/embark-ui/src/components/Layout.js index b80869e6c..61439dfcf 100644 --- a/embark-ui/src/components/Layout.js +++ b/embark-ui/src/components/Layout.js @@ -5,16 +5,17 @@ import PropTypes from 'prop-types'; import logo from '../images/logo.png'; -const navBarItems = [ - {value: "Home", to: "/embark", icon: "home", LinkComponent: NavLink}, - {value: "Contracts", to: "/embark/contracts", icon: "box", LinkComponent: NavLink}, - {value: "Explorer", to: "/embark/explorer/accounts", icon: "activity", LinkComponent: NavLink}, - {value: "Fiddle", to: "/embark/fiddle", icon: "codepen", LinkComponent: NavLink}, - {value: "Documentation", to: "/embark/documentation", icon: "file-text", LinkComponent: NavLink}, - {value: "Utils", to: "/embark/utilities/converter", icon: "settings", LinkComponent: NavLink} -]; +const navBarItems = (tabs) => { + const homeTab = {value: "Home", to: "/embark", icon: "home", LinkComponent: NavLink}; -const Layout = ({children, logout, credentials}) => ( + const generatedTabs = tabs.map(tab => ( + {LinkComponent: NavLink, ...tab} + )); + + return [homeTab, ...generatedTabs]; +} + +const Layout = ({children, logout, credentials, tabs}) => ( ( {credentials.authenticated && Connected on {credentials.host} - + } + ) }} - navProps={{itemsObjects: navBarItems}} + navProps={{itemsObjects: navBarItems(tabs)}} > {children} @@ -61,6 +62,7 @@ const Layout = ({children, logout, credentials}) => ( Layout.propTypes = { children: PropTypes.element, + tabs: PropTypes.arrayOf(PropTypes.object), credentials: PropTypes.object, logout: PropTypes.func }; diff --git a/embark-ui/src/containers/AppContainer.js b/embark-ui/src/containers/AppContainer.js index c39376404..12cd7150e 100644 --- a/embark-ui/src/containers/AppContainer.js +++ b/embark-ui/src/containers/AppContainer.js @@ -13,7 +13,7 @@ import { plugins as pluginsAction } from '../actions'; -import { getCredentials, getAuthenticationError, getVersions } from '../reducers/selectors'; +import { getTabs, getCredentials, getAuthenticationError, getVersions } from '../reducers/selectors'; const qs = require('qs'); @@ -62,7 +62,7 @@ class AppContainer extends Component { render() { return ( - + {this.shouldRenderUnauthenticated() ? : {routes}} @@ -73,6 +73,7 @@ class AppContainer extends Component { AppContainer.propTypes = { credentials: PropTypes.object, + tabs: PropTypes.arrayOf(PropTypes.object), initialized: PropTypes.bool, authenticationError: PropTypes.string, authenticate: PropTypes.func, @@ -89,6 +90,7 @@ function mapStateToProps(state) { return { initialized: getVersions(state).length > 0, credentials: getCredentials(state), + tabs: getTabs(state), authenticationError: getAuthenticationError(state) }; } diff --git a/embark-ui/src/reducers/index.js b/embark-ui/src/reducers/index.js index fc7fc1ade..f68a9b64b 100644 --- a/embark-ui/src/reducers/index.js +++ b/embark-ui/src/reducers/index.js @@ -1,5 +1,5 @@ import {combineReducers} from 'redux'; -import {REQUEST, SUCCESS, FAILURE, CONTRACT_COMPILE, FILES, LOGOUT, AUTHENTICATE, +import {REQUEST, SUCCESS, FAILURE, CONTRACT_COMPILE, FILES, LOGOUT, AUTHENTICATE, FETCH_CREDENTIALS, INIT_ETHER_CONVERSIONS, UPDATE_ETHER_CONVERSIONS} from "../actions"; const BN_FACTOR = 10000; @@ -188,6 +188,28 @@ function etherConversions(state = [], action) { return state; } +const DEFAULT_TABS = [ + {value: "Contracts", to: "/embark/contracts", icon: "box", base: '/embark/contracts'}, + {value: "Explorer", to: "/embark/explorer/accounts", icon: "activity", base: '/embark/explorer'}, + {value: "Fiddle", to: "/embark/fiddle", icon: "codepen", base: '/embark/fiddle'}, + {value: "Documentation", to: "/embark/documentation", icon: "file-text", base: '/embark/documentation'}, + {value: "Utils", to: "/embark/utilities/converter", icon: "settings", base: '/embark/utilities'} +]; + +function tabs(state = DEFAULT_TABS, action) { + if (action.type === '@@router/LOCATION_CHANGE'){ + const newState = [...state]; + const activeTab = newState.find(tab => action.payload.location.pathname.startsWith(tab.base)); + if (activeTab) { + activeTab.to = action.payload.location.pathname; + return newState; + } + + return state; + } + return state; +} + const rootReducer = combineReducers({ entities, loading, @@ -195,7 +217,8 @@ const rootReducer = combineReducers({ errorMessage, errorEntities, credentials, - etherConversions + etherConversions, + tabs }); export default rootReducer; diff --git a/embark-ui/src/reducers/selectors.js b/embark-ui/src/reducers/selectors.js index 0a66fcaa1..57a0c2fd1 100644 --- a/embark-ui/src/reducers/selectors.js +++ b/embark-ui/src/reducers/selectors.js @@ -160,3 +160,7 @@ export function getCurrentFile(state) { export function getEtherConversions(state) { return state.etherConversions; } + +export function getTabs(state) { + return state.tabs; +}