code review

web/src/js/components/Header.js

@@ -27,28 +27,29 @@ class Header extends Component {
 
     render() {
         const { settings, updateLocation, query, selectedFlow, active_menu} = this.props
-        const Active = _.find(Header.entries, (e) => e.title == active_menu);
-        const entries = selectedFlow ? Header.entries : Header.entries.filter((h) => h != FlowMenu)
         return (
             <header>
                 <nav className="nav-tabs nav-tabs-lg">
                     <FileMenu/>
-                    {entries.map(Entry => (
+                    {Header.entries.map(Entry => (
                         <a key={Entry.title}
                            href="#"
-                           className={classnames({ active: Entry === Active })}
+                           className={classnames({ active: Entry.title === active_menu, hidden: !selectedFlow && Entry === FlowMenu })}
                            onClick={e => this.handleClick(Entry, e)}>
                             {Entry.title}
                         </a>
                     ))}
                 </nav>
                 <div className="menu">
-                    <Active
-                        ref="active"
-                        settings={settings}
-                        updateLocation={updateLocation}
-                        query={query}
-                    />
+                    {Header.entries.map(Entry => (
+                        <div className={classnames({ hidden: Entry.title !== active_menu })}>
+                            <Entry
+                                settings={settings}
+                                updateLocation={updateLocation}
+                                query={query}
+                                />
+                        </div>
+                    ))}
                 </div>
             </header>
         )

web/src/js/components/MainView.jsx

@@ -1,7 +1,6 @@
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-
 import { FlowActions } from '../actions.js'
 import { Query } from '../actions.js'
 import { Key } from '../utils.js'
@@ -9,7 +8,6 @@ import { Splitter } from './common.js'
 import FlowTable from './FlowTable'
 import FlowView from './flowview/index.js'
 import { selectFlow, setFilter, setHighlight } from '../ducks/flows'
-import { setDefaultMenu, setFlowMenu } from '../ducks/view'
 
 class MainView extends Component {
 
@@ -40,10 +38,8 @@ class MainView extends Component {
      */
     selectFlow(flow) {
         if (flow) {
-            this.props.setFlowMenu()
             this.props.updateLocation(`/flows/${flow.id}/${this.props.routeParams.detailTab || 'request'}`)
         } else {
-            this.props.setDefaultMenu()
             this.props.updateLocation('/flows')
         }
     }
@@ -195,8 +191,6 @@ export default connect(
     }),
     dispatch => bindActionCreators({
         selectFlow,
-        setDefaultMenu,
-        setFlowMenu,
         setFilter,
         setHighlight,
     }, dispatch),

web/src/js/ducks/view.js

@@ -1,46 +1,27 @@
+import { SELECT_FLOW } from './flows'
 const ACTIVE_MENU = 'ACTIVE_MENU'
-const DEFAULT_MENU = 'DEFAULT_MENU'
-const FLOW_MENU = 'FLOW_MENU'
 
 
 const defaultState = {
-    active_menu: 'Start',
+    active_menu: 'Start'
 }
 export default function reducer(state = defaultState, action) {
     switch (action.type) {
         case ACTIVE_MENU:
             return {
-               ...state,
+                ...state,
                 active_menu: action.active_menu
             }
-        case DEFAULT_MENU:
-            return {
+        case SELECT_FLOW:
+            return{
                 ...state,
-                active_menu: defaultState.active_menu
+                active_menu: action.flowId ? 'Flow' : 'Start'
             }
-        case FLOW_MENU:
-            return {
-                ... state,
-                active_menu: "Flow"
-            }
-
-
         default:
             return state
     }
 }
 
-export function setDefaultMenu(active_menu) {
-    return {
-        type: DEFAULT_MENU,
-    }
-}
-export function setFlowMenu() {
-    return {
-        type: FLOW_MENU,
-    }
-}
-
 export function setActiveMenu(active_menu) {
     return {
         type: ACTIVE_MENU,