Use normalized action props

gaearon · Oct 17, 2015 · ab68e40 · ab68e40
1 parent 2fdfdd9
commit ab68e40
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "redux-devtools-log-monitor",
-  "version": "1.0.0-beta-1",
+  "version": "1.0.0-beta-2",
   "description": "The default tree view monitor for Redux DevTools",
   "main": "lib/index.js",
   "scripts": {
@@ -46,7 +46,7 @@
   },
   "peerDependencies": {
     "react": "^0.14.0",
-    "redux-devtools": "^3.0.0-beta-1",
+    "redux-devtools": "^3.0.0-beta-2",
     "redux": "^3.0.0"
   },
   "dependencies": {

diff --git a/src/LogMonitor.js b/src/LogMonitor.js
@@ -44,8 +44,9 @@ export default class LogMonitor extends Component {
   static propTypes = {
     dispatch: PropTypes.func,
     computedStates: PropTypes.array,
-    stagedActions: PropTypes.array,
-    skippedActions: PropTypes.object,
+    actionsByIds: PropTypes.object,
+    stagedActionIds: PropTypes.array,
+    skippedActionIds: PropTypes.array,
     monitorState: PropTypes.shape({
       initialScrollTop: PropTypes.number
     }),
@@ -99,8 +100,8 @@ export default class LogMonitor extends Component {
     if (!node) {
       this.scrollDown = true;
     } else if (
-      this.props.stagedActions.length <
-      nextProps.stagedActions.length
+      this.props.stagedActionIds.length <
+      nextProps.stagedActionIds.length
     ) {
       const { scrollTop, offsetHeight, scrollHeight } = node;
 
@@ -136,46 +137,50 @@ export default class LogMonitor extends Component {
     this.props.dispatch(commit());
   }
 
-  handleToggleAction(index) {
-    this.props.dispatch(toggleAction(index));
+  handleToggleAction(id) {
+    this.props.dispatch(toggleAction(id));
   }
 
   handleReset() {
     this.props.dispatch(reset());
   }
 
+  getTheme() {
+    let { theme } = this.props;
+    if (typeof theme !== 'string') {
+      return theme;
+    }
+
+    if (typeof themes[theme] !== 'undefined') {
+      return themes[theme];
+    }
+
+    console.warn('DevTools theme ' + theme + ' not found, defaulting to nicinabox');
+    return themes.nicinabox;
+  }
+
   render() {
     const elements = [];
-    const { skippedActions, stagedActions, computedStates, select } = this.props;
-
-    let theme;
-    if (typeof this.props.theme === 'string') {
-      if (typeof themes[this.props.theme] !== 'undefined') {
-        theme = themes[this.props.theme];
-      } else {
-        console.warn('DevTools theme ' + this.props.theme + ' not found, defaulting to nicinabox');
-        theme = themes.nicinabox;
-      }
-    } else {
-      theme = this.props.theme;
-    }
+    const theme = this.getTheme();
+    const { actionsById, skippedActionIds, stagedActionIds, computedStates, select } = this.props;
 
-    for (let i = 0; i < stagedActions.length; i++) {
-      const action = stagedActions[i];
+    for (let i = 0; i < stagedActionIds.length; i++) {
+      const actionId = stagedActionIds[i];
+      const action = actionsById[actionId].action;
       const { state, error } = computedStates[i];
       let previousState;
       if (i > 0) {
         previousState = computedStates[i - 1].state;
       }
       elements.push(
-        <LogMonitorEntry key={i}
-                         index={i}
+        <LogMonitorEntry key={actionId}
                          theme={theme}
                          select={select}
                          action={action}
+                         actionId={actionId}
                          state={state}
                          previousState={previousState}
-                         collapsed={skippedActions[i]}
+                         collapsed={skippedActionIds.indexOf(actionId) > -1}
                          error={error}
                          onActionClick={this.handleToggleAction} />
       );
@@ -199,7 +204,7 @@ export default class LogMonitor extends Component {
           <LogMonitorButton
             theme={theme}
             onClick={this.handleSweep}
-            enabled={Object.keys(skippedActions).some(key => skippedActions[key])}>
+            enabled={skippedActionIds.length > 0}>
             Sweep
           </LogMonitorButton>
           <LogMonitorButton

diff --git a/src/LogMonitorEntry.js b/src/LogMonitorEntry.js
@@ -15,9 +15,9 @@ const styles = {
 
 export default class LogMonitorEntry extends Component {
   static propTypes = {
-    index: PropTypes.number.isRequired,
     state: PropTypes.object.isRequired,
     action: PropTypes.object.isRequired,
+    actionId: PropTypes.number.isRequired,
     select: PropTypes.func.isRequired,
     error: PropTypes.string,
     onActionClick: PropTypes.func.isRequired,
@@ -26,6 +26,11 @@ export default class LogMonitorEntry extends Component {
 
   shouldComponentUpdate = shouldPureComponentUpdate;
 
+  constructor(props) {
+    super(props);
+    this.handleActionClick = this.handleActionClick.bind(this);
+  }
+
   printState(state, error) {
     let errorText = error;
     if (!errorText) {
@@ -57,25 +62,25 @@ export default class LogMonitorEntry extends Component {
   }
 
   handleActionClick() {
-    const { index, onActionClick } = this.props;
-    if (index > 0) {
-      onActionClick(index);
+    const { actionId, onActionClick } = this.props;
+    if (actionId > 0) {
+      onActionClick(actionId);
     }
   }
 
   render() {
-    const { index, error, action, state, collapsed } = this.props;
+    const { actionId, error, action, state, collapsed } = this.props;
     const styleEntry = {
       opacity: collapsed ? 0.5 : 1,
-      cursor: (index > 0) ? 'pointer' : 'default'
+      cursor: (actionId > 0) ? 'pointer' : 'default'
     };
     return (
       <div style={{textDecoration: collapsed ? 'line-through' : 'none'}}>
         <LogMonitorEntryAction
           theme={this.props.theme}
           collapsed={collapsed}
           action={action}
-          onClick={::this.handleActionClick}
+          onClick={this.handleActionClick}
           style={{...styles.entry, ...styleEntry}}/>
         {!collapsed &&
           <div>