make history-list-toggle use same store

frontend/src/component/feature/view-edit-container.jsx

@@ -150,7 +150,7 @@ function getHistoryFromToggle (state, toggleName) {
     if (!toggleName) {
         return [];
     }
-    
+
     if (state.history.hasIn(['toggles', toggleName])) {
         return state.history
             .getIn(['toggles', toggleName])

frontend/src/component/history/history-list-container.jsx

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import HistoryListComponent from './history-list-component';
+import HistoryListToggleComponent from './history-list-component';
 import { updateSettingForGroup } from '../../store/settings/actions';
 
 const mapStateToProps = (state) => {
@@ -12,6 +12,6 @@ const mapStateToProps = (state) => {
 
 const HistoryListContainer = connect(mapStateToProps, {
     updateSetting: updateSettingForGroup('history'),
-})(HistoryListComponent);
+})(HistoryListToggleComponent);
 
 export default HistoryListContainer;

frontend/src/component/history/history-list-toggle-component.jsx

@@ -1,17 +1,8 @@
 import React, { Component, PropTypes } from 'react';
 import ListComponent from './history-list-container';
-import { fetchHistoryForToggle } from '../../data/history-api';
 
 class HistoryListToggle extends Component {
 
-    constructor (props) {
-        super(props);
-        this.state = {
-            fetching: true,
-            history: undefined,
-        };
-    }
-
     static propTypes () {
         return {
             toggleName: PropTypes.string.isRequired,
@@ -19,21 +10,21 @@ class HistoryListToggle extends Component {
     }
 
     componentDidMount () {
-        fetchHistoryForToggle(this.props.toggleName)
-            .then((res) => this.setState({ history: res.events, fetching: false }));
+        this.props.fetchHistoryForToggle(this.props.toggleName);
     }
 
     render () {
-        if (this.state.fetching) {
+        if (!this.props.history || this.props.history.length === 0) {
             return <span>fetching..</span>;
         }
 
         return (
             <div>
                 <h5>Showing history for toggle: <strong>{this.props.toggleName}</strong></h5>
-                <ListComponent history={this.state.history} />
+                <ListComponent history={this.props.history} />
             </div>
         );
     }
 }
+
 export default HistoryListToggle;

frontend/src/component/history/history-list-toggle-container.jsx

@@ -0,0 +1,25 @@
+import { connect } from 'react-redux';
+import HistoryListToggleComponent from './history-list-toggle-component';
+import { fetchHistoryForToggle } from '../../store/history-actions';
+
+function getHistoryFromToggle (state, toggleName) {
+    if (!toggleName) {
+        return [];
+    }
+
+    if (state.history.hasIn(['toggles', toggleName])) {
+        return state.history.getIn(['toggles', toggleName]).toArray();
+    }
+
+    return [];
+}
+
+const mapStateToProps = (state, props) => ({
+    history: getHistoryFromToggle(state, props.toggleName),
+});
+
+const HistoryListToggleContainer = connect(mapStateToProps, {
+    fetchHistoryForToggle,
+})(HistoryListToggleComponent);
+
+export default HistoryListToggleContainer;

frontend/src/page/history/toggle.js

@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react';
-import HistoryListToggle from '../../component/history/history-list-toggle-component';
+import HistoryListToggle from '../../component/history/history-list-toggle-container';
 
 const render = ({ params }) => <HistoryListToggle toggleName={params.toggleName} />;