Save to when navigating

embark-ui/src/components/Layout.js

@@ -5,16 +5,17 @@ import PropTypes from 'prop-types';
 
 import logo from '../images/logo.png';
 
-const navBarItems = [
+const navBarItems = (tabs) => {
-  {value: "Home", to: "/embark", icon: "home", LinkComponent: NavLink},
+  const homeTab = {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 Layout = ({children, logout, credentials}) => (
+  const generatedTabs = tabs.map(tab => (
+    {LinkComponent: NavLink, ...tab}
+  ));
+
+  return [homeTab, ...generatedTabs];
+}
+
+const Layout = ({children, logout, credentials, tabs}) => (
   <Site.Wrapper
     headerProps={{
       href: "/embark",
@@ -37,7 +38,7 @@ const Layout = ({children, logout, credentials}) => (
           {credentials.authenticated &&
             <Nav.Item type="div" className="d-none d-md-flex">
               Connected on {credentials.host}
-            </Nav.Item>  
+            </Nav.Item>
           }
           <Nav.Item type="div" className="d-none d-md-flex">
             <Button
@@ -46,12 +47,12 @@ const Layout = ({children, logout, credentials}) => (
               size="sm"
               color="danger">
               Logout
-            </Button> 
+            </Button>
           </Nav.Item>
         </React.Fragment>
       )
     }}
-    navProps={{itemsObjects: navBarItems}}
+    navProps={{itemsObjects: navBarItems(tabs)}}
   >
     <Container>
       {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
 };

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 (
-      <Layout logout={this.props.logout} credentials={this.props.credentials}>
+      <Layout logout={this.props.logout} credentials={this.props.credentials} tabs={this.props.tabs}>
         {this.shouldRenderUnauthenticated() ? <Unauthenticated credentials={this.props.credentials}
                                                                authenticate={this.props.authenticate}
                                                                error={this.props.authenticationError} /> : <React.Fragment>{routes}</React.Fragment>}
@@ -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)
   };
 }

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;

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;
+}