Store selected down panel name in redux store.

This makes the downl panel component stateless.

src/modules/ui/actions/index.js

@@ -3,6 +3,7 @@ import ui from './ui';
 export const types = {
   SET_STORY_FILTER: 'UI_SET_STORY_FILTER',
   TOGGLE_SHORTCUTS_HELP: 'UI_TOGGLE_SHORTCUTS_HELP',
+  SELECT_BOTTOM_PANEL: 'UI_SELECT_BOTTOM_PANEL',
 };
 
 export default {

src/modules/ui/actions/ui.js

@@ -13,4 +13,11 @@ export default {
       type: types.TOGGLE_SHORTCUTS_HELP,
     });
   },
+
+  selectDownPanel({ reduxStore }, panelName) {
+    reduxStore.dispatch({
+      type: types.SELECT_BOTTOM_PANEL,
+      panelName,
+    });
+  },
 };

src/modules/ui/components/down_panel/index.js

@@ -7,20 +7,16 @@ class DownPanel extends Component {
     this.state = { current: Object.keys(props.panels)[0] };
   }
 
-  showPanel(name) {
-    this.setState({ current: name });
-  }
-
   renderTab(name, panel) {
     let tabStyle = style.tablink;
-    if (this.state.current === name) {
+    if (this.props.selectedPanel === name) {
       tabStyle = Object.assign({}, style.tablink, style.activetab);
     }
 
     const onClick = () => {
       return e => {
         e.preventDefault();
-        this.showPanel(name);
+        this.props.onPanelSelect(name);
       };
     };
 
@@ -43,15 +39,10 @@ class DownPanel extends Component {
     });
   }
 
-  renderPanels() {
-    return Object.keys(this.props.panels).sort().map(name => {
-      const panelStyle = { display: 'none' };
-      const panel = this.props.panels[name];
-      if (name === this.state.current) {
-        Object.assign(panelStyle, { flex: 1, display: 'flex' });
-      }
-      return <div key={name} style={panelStyle}>{panel.render()}</div>;
-    });
+  renderPanel() {
+    const panelStyle = { flex: 1, display: 'flex' };
+    const panel = this.props.panels[this.props.selectedPanel];
+    return <div key={name} style={panelStyle}>{panel.render()}</div>;
   }
 
   renderEmpty() {
@@ -69,14 +60,16 @@ class DownPanel extends Component {
     return (
       <div style={style.wrapper}>
         <div style={style.tabbar}>{this.renderTabs()}</div>
-        <div style={style.content}>{this.renderPanels()}</div>
+        <div style={style.content}>{this.renderPanel()}</div>
       </div>
     );
   }
 }
 
 DownPanel.propTypes = {
   panels: React.PropTypes.object,
+  onPanelSelect: React.PropTypes.func,
+  selectedPanel: React.PropTypes.string,
 };
 
 export default DownPanel;

src/modules/ui/configs/reducers/ui.js

@@ -13,6 +13,13 @@ export default function (state = defaultState, action) {
       };
     }
 
+    case types.SELECT_BOTTOM_PANEL: {
+      return {
+        ...state,
+        selectedDownPanel: action.panelName,
+      };
+    }
+
     case types.TOGGLE_SHORTCUTS_HELP: {
       return {
         ...state,

src/modules/ui/containers/down_panel.js

@@ -2,9 +2,15 @@ import DownPanel from '../components/down_panel';
 import { useDeps, composeAll } from 'mantra-core';
 import reduxComposer from '../libs/redux_composer';
 
-export function composer({}, { context }) {
+export function composer({ ui }, { context, actions }) {
+  const panels = context().provider.getPanels();
+  const actionMap = actions();
+  const selectedPanel = ui.selectedDownPanel || Object.keys(panels)[0];
+
   return {
-    panels: context().provider.getPanels(),
+    panels,
+    selectedPanel,
+    onPanelSelect: actionMap.ui.selectDownPanel,
   };
 }