Fix linting

packages/redux-devtools-inspector/package.json

@@ -32,9 +32,9 @@
     "base16": "^1.0.0",
     "chokidar": "^1.6.1",
     "clean-webpack-plugin": "^0.1.8",
-    "eslint": "^3.9.1",
+    "eslint": "^4.0.0",
     "eslint-loader": "^1.2.1",
-    "eslint-plugin-babel": "^3.1.0",
+    "eslint-plugin-babel": "^4.0.0",
     "eslint-plugin-react": "^6.6.0",
     "export-files-webpack-plugin": "0.0.1",
     "html-webpack-plugin": "^2.8.1",

packages/redux-devtools-inspector/src/ActionList.jsx

@@ -77,8 +77,8 @@ export default class ActionList extends Component {
 
   render() {
     const { styling, actions, actionIds, isWideLayout, onToggleAction, skippedActionIds,
-            selectedActionId, startActionId, onSelect, onSearch, searchValue, currentActionId,
-            hideMainButtons, hideActionButtons, onCommit, onSweep, onJumpToState } = this.props;
+      selectedActionId, startActionId, onSelect, onSearch, searchValue, currentActionId,
+      hideMainButtons, hideActionButtons, onCommit, onSweep, onJumpToState } = this.props;
     const lowerSearchValue = searchValue && searchValue.toLowerCase();
     const filteredActionIds = searchValue ? actionIds.filter(
       id => actions[id].action.type.toLowerCase().indexOf(lowerSearchValue) !== -1
@@ -86,36 +86,36 @@ export default class ActionList extends Component {
 
     return (
       <div key='actionList'
-           {...styling(['actionList', isWideLayout && 'actionListWide'], isWideLayout)}>
+        {...styling(['actionList', isWideLayout && 'actionListWide'], isWideLayout)}>
         <ActionListHeader styling={styling}
-                          onSearch={onSearch}
-                          onCommit={onCommit}
-                          onSweep={onSweep}
-                          hideMainButtons={hideMainButtons}
-                          hasSkippedActions={skippedActionIds.length > 0}
-                          hasStagedActions={actionIds.length > 1} />
+          onSearch={onSearch}
+          onCommit={onCommit}
+          onSweep={onSweep}
+          hideMainButtons={hideMainButtons}
+          hasSkippedActions={skippedActionIds.length > 0}
+          hasStagedActions={actionIds.length > 1} />
         <div {...styling('actionListRows')} ref={this.getRef}>
           {filteredActionIds.map(actionId =>
-            <ActionListRow key={actionId}
-                           styling={styling}
-                           actionId={actionId}
-                           isInitAction={!actionId}
-                           isSelected={
-                            startActionId !== null &&
+            (<ActionListRow key={actionId}
+              styling={styling}
+              actionId={actionId}
+              isInitAction={!actionId}
+              isSelected={
+                startActionId !== null &&
                             actionId >= startActionId && actionId <= selectedActionId ||
                             actionId === selectedActionId
-                           }
-                           isInFuture={
-                             actionIds.indexOf(actionId) > actionIds.indexOf(currentActionId)
-                           }
-                           onSelect={(e) => onSelect(e, actionId)}
-                           timestamps={getTimestamps(actions, actionIds, actionId)}
-                           action={actions[actionId].action}
-                           onToggleClick={() => onToggleAction(actionId)}
-                           onJumpClick={() => onJumpToState(actionId)}
-                           onCommitClick={() => onCommit(actionId)}
-                           hideActionButtons={hideActionButtons}
-                           isSkipped={skippedActionIds.indexOf(actionId) !== -1} />
+              }
+              isInFuture={
+                actionIds.indexOf(actionId) > actionIds.indexOf(currentActionId)
+              }
+              onSelect={(e) => onSelect(e, actionId)}
+              timestamps={getTimestamps(actions, actionIds, actionId)}
+              action={actions[actionId].action}
+              onToggleClick={() => onToggleAction(actionId)}
+              onJumpClick={() => onJumpToState(actionId)}
+              onCommitClick={() => onCommit(actionId)}
+              hideActionButtons={hideActionButtons}
+              isSkipped={skippedActionIds.indexOf(actionId) !== -1} />)
           )}
         </div>
       </div>

packages/redux-devtools-inspector/src/ActionListHeader.jsx

@@ -8,20 +8,20 @@ const getActiveButtons = (hasSkippedActions) => [
 
 const ActionListHeader =
   ({
-     styling, onSearch, hasSkippedActions, hasStagedActions, onCommit, onSweep, hideMainButtons
+    styling, onSearch, hasSkippedActions, hasStagedActions, onCommit, onSweep, hideMainButtons
   }) =>
-  <div {...styling('actionListHeader')}>
-    <input
-      {...styling('actionListHeaderSearch')}
-      onChange={e => onSearch(e.target.value)}
-      placeholder='filter...'
-    />
-    {!hideMainButtons &&
+    (<div {...styling('actionListHeader')}>
+      <input
+        {...styling('actionListHeaderSearch')}
+        onChange={e => onSearch(e.target.value)}
+        placeholder='filter...'
+      />
+      {!hideMainButtons &&
     <div {...styling('actionListHeaderWrapper')}>
       <RightSlider shown={hasStagedActions} styling={styling}>
         <div {...styling('actionListHeaderSelector')}>
           {getActiveButtons(hasSkippedActions).map(btn =>
-            <div
+            (<div
               key={btn}
               onClick={() => ({
                 Commit: onCommit,
@@ -31,13 +31,13 @@ const ActionListHeader =
                 'selectorButton',
                 'selectorButtonSmall'], false, true)}
             >
-             {btn}
-            </div>
+              {btn}
+            </div>)
           )}
         </div>
       </RightSlider>
     </div>
-    }
-  </div>;
+      }
+    </div>);
 
 export default ActionListHeader;

packages/redux-devtools-inspector/src/ActionListRow.jsx

@@ -28,7 +28,7 @@ export default class ActionListRow extends Component {
 
   render() {
     const { styling, isSelected, action, actionId, isInitAction, onSelect,
-            timestamps, isSkipped, isInFuture, hideActionButtons } = this.props;
+      timestamps, isSkipped, isInFuture, hideActionButtons } = this.props;
     const { hover } = this.state;
     const timeDelta = timestamps.current - timestamps.previous;
     const showButtons = hover && !isInitAction || isSkipped;
@@ -43,50 +43,50 @@ export default class ActionListRow extends Component {
 
     return (
       <div onClick={onSelect}
-           onMouseEnter={!hideActionButtons && this.handleMouseEnter}
-           onMouseLeave={!hideActionButtons && this.handleMouseLeave}
-           onMouseDown={this.handleMouseDown}
-           onMouseUp={this.handleMouseEnter}
-           data-id={actionId}
-           {...styling([
-             'actionListItem',
-             isSelected && 'actionListItemSelected',
-             isSkipped && 'actionListItemSkipped',
-             isInFuture && 'actionListFromFuture'
-           ], isSelected, action)}>
+        onMouseEnter={!hideActionButtons && this.handleMouseEnter}
+        onMouseLeave={!hideActionButtons && this.handleMouseLeave}
+        onMouseDown={this.handleMouseDown}
+        onMouseUp={this.handleMouseEnter}
+        data-id={actionId}
+        {...styling([
+          'actionListItem',
+          isSelected && 'actionListItemSelected',
+          isSkipped && 'actionListItemSkipped',
+          isInFuture && 'actionListFromFuture'
+        ], isSelected, action)}>
         <div {...styling(['actionListItemName', isSkipped && 'actionListItemNameSkipped'])}>
           {actionType}
         </div>
         {hideActionButtons ?
-        <RightSlider styling={styling} shown>
-          <div {...styling('actionListItemTime')}>
-            {timeDelta === 0 ? '+00:00:00' :
-              dateformat(timeDelta, timestamps.previous ? '+MM:ss.L' : 'h:MM:ss.L')}
-          </div>
-        </RightSlider>
-        :
-        <div {...styling('actionListItemButtons')}>
-          <RightSlider styling={styling} shown={!showButtons} rotate>
+          <RightSlider styling={styling} shown>
             <div {...styling('actionListItemTime')}>
               {timeDelta === 0 ? '+00:00:00' :
                 dateformat(timeDelta, timestamps.previous ? '+MM:ss.L' : 'h:MM:ss.L')}
             </div>
           </RightSlider>
-          <RightSlider styling={styling} shown={showButtons} rotate>
-            <div {...styling('actionListItemSelector')}>
-              {[BUTTON_JUMP, BUTTON_SKIP].map(btn => (!isInitAction || btn !== BUTTON_SKIP) &&
+          :
+          <div {...styling('actionListItemButtons')}>
+            <RightSlider styling={styling} shown={!showButtons} rotate>
+              <div {...styling('actionListItemTime')}>
+                {timeDelta === 0 ? '+00:00:00' :
+                  dateformat(timeDelta, timestamps.previous ? '+MM:ss.L' : 'h:MM:ss.L')}
+              </div>
+            </RightSlider>
+            <RightSlider styling={styling} shown={showButtons} rotate>
+              <div {...styling('actionListItemSelector')}>
+                {[BUTTON_JUMP, BUTTON_SKIP].map(btn => (!isInitAction || btn !== BUTTON_SKIP) &&
                 <div key={btn}
-                     onClick={this.handleButtonClick.bind(this, btn)}
-                     {...styling([
-                       'selectorButton',
-                       isButtonSelected(btn) && 'selectorButtonSelected',
-                       'selectorButtonSmall'], isButtonSelected(btn), true)}>
+                  onClick={this.handleButtonClick.bind(this, btn)}
+                  {...styling([
+                    'selectorButton',
+                    isButtonSelected(btn) && 'selectorButtonSelected',
+                    'selectorButtonSmall'], isButtonSelected(btn), true)}>
                   {btn}
                 </div>
-              )}
-            </div>
-          </RightSlider>
-        </div>
+                )}
+              </div>
+            </RightSlider>
+          </div>
         }
       </div>
     );

packages/redux-devtools-inspector/src/ActionPreview.jsx

@@ -82,10 +82,10 @@ class ActionPreview extends Component {
           {key}
         </span>
         <span {...styling('treeItemPin')}
-              onClick={() => onInspectPath([
-                ...inspectedPath.slice(0, inspectedPath.length - 1),
-                ...[key, ...rest].reverse()
-              ])}>
+          onClick={() => onInspectPath([
+            ...inspectedPath.slice(0, inspectedPath.length - 1),
+            ...[key, ...rest].reverse()
+          ])}>
           {'(pin)'}
         </span>
         {!expanded && ': '}

packages/redux-devtools-inspector/src/ActionPreviewHeader.jsx

@@ -2,39 +2,39 @@ import React from 'react';
 
 const ActionPreviewHeader =
   ({ styling, inspectedPath, onInspectPath, tabName, onSelectTab, tabs }) =>
-  <div key='previewHeader' {...styling('previewHeader')}>
-    <div {...styling('tabSelector')}>
-      {tabs.map(tab =>
-        <div onClick={() => onSelectTab(tab.name)}
-             key={tab.name}
-          {...styling([
-            'selectorButton',
-            tab.name === tabName && 'selectorButtonSelected'
-          ], tab.name === tabName)}>
-          {tab.name}
-        </div>
-      )}
-    </div>
-    <div {...styling('inspectedPath')}>
-      {inspectedPath.length ?
-        <span {...styling('inspectedPathKey')}>
-          <a onClick={() => onInspectPath([])}
-            {...styling('inspectedPathKeyLink')}>
-            {tabName}
-          </a>
-        </span> : tabName
-      }
-      {inspectedPath.map((key, idx) =>
-        idx === inspectedPath.length - 1 ? <span key={key}>{key}</span> :
-          <span key={key}
-            {...styling('inspectedPathKey')}>
-          <a onClick={() => onInspectPath(inspectedPath.slice(0, idx + 1))}
-            {...styling('inspectedPathKeyLink')}>
-            {key}
-          </a>
-        </span>
-      )}
-    </div>
-  </div>;
+    (<div key='previewHeader' {...styling('previewHeader')}>
+      <div {...styling('tabSelector')}>
+        {tabs.map(tab =>
+          (<div onClick={() => onSelectTab(tab.name)}
+            key={tab.name}
+            {...styling([
+              'selectorButton',
+              tab.name === tabName && 'selectorButtonSelected'
+            ], tab.name === tabName)}>
+            {tab.name}
+          </div>)
+        )}
+      </div>
+      <div {...styling('inspectedPath')}>
+        {inspectedPath.length ?
+          <span {...styling('inspectedPathKey')}>
+            <a onClick={() => onInspectPath([])}
+              {...styling('inspectedPathKeyLink')}>
+              {tabName}
+            </a>
+          </span> : tabName
+        }
+        {inspectedPath.map((key, idx) =>
+          idx === inspectedPath.length - 1 ? <span key={key}>{key}</span> :
+            <span key={key}
+              {...styling('inspectedPathKey')}>
+              <a onClick={() => onInspectPath(inspectedPath.slice(0, idx + 1))}
+                {...styling('inspectedPathKeyLink')}>
+                {key}
+              </a>
+            </span>
+        )}
+      </div>
+    </div>);
 
 export default ActionPreviewHeader;

packages/redux-devtools-inspector/src/DevtoolsInspector.js

@@ -32,7 +32,7 @@ function getFromState(actionIndex, stagedActionIds, computedStates, monitorState
 
 function createIntermediateState(props, monitorState) {
   const { supportImmutable, computedStates, stagedActionIds,
-          actionsById: actions, diffObjectHash, diffPropertyFilter } = props;
+    actionsById: actions, diffObjectHash, diffPropertyFilter } = props;
   const { inspectedStatePath, inspectedActionPath } = monitorState;
   const currentActionId = getCurrentActionId(props, monitorState);
   const currentAction = actions[currentActionId] && actions[currentActionId].action;
@@ -171,31 +171,31 @@ export default class DevtoolsInspector extends Component {
 
     return (
       <div key='inspector'
-           ref='inspector'
-           {...styling(['inspector', isWideLayout && 'inspectorWide'], isWideLayout)}>
+        ref='inspector'
+        {...styling(['inspector', isWideLayout && 'inspectorWide'], isWideLayout)}>
         <ActionList {...{
           actions, actionIds, isWideLayout, searchValue, selectedActionId, startActionId,
           skippedActionIds, draggableActions, hideMainButtons, hideActionButtons, styling
         }}
-                    onSearch={this.handleSearch}
-                    onSelect={this.handleSelectAction}
-                    onToggleAction={this.handleToggleAction}
-                    onJumpToState={this.handleJumpToState}
-                    onCommit={this.handleCommit}
-                    onSweep={this.handleSweep}
-                    onReorderAction={this.handleReorderAction}
-                    currentActionId={actionIds[currentStateIndex]}
-                    lastActionId={getLastActionId(this.props)} />
+        onSearch={this.handleSearch}
+        onSelect={this.handleSelectAction}
+        onToggleAction={this.handleToggleAction}
+        onJumpToState={this.handleJumpToState}
+        onCommit={this.handleCommit}
+        onSweep={this.handleSweep}
+        onReorderAction={this.handleReorderAction}
+        currentActionId={actionIds[currentStateIndex]}
+        lastActionId={getLastActionId(this.props)} />
         <ActionPreview {...{
           base16Theme, invertTheme, isWideLayout, tabs, tabName, delta, error, nextState,
           computedStates, action, actions, selectedActionId, startActionId, dataTypeKey
         }}
-                       monitorState={this.props.monitorState}
-                       updateMonitorState={this.updateMonitorState}
-                       styling={styling}
-                       onInspectPath={this.handleInspectPath.bind(this, inspectedPathType)}
-                       inspectedPath={monitorState[inspectedPathType]}
-                       onSelectTab={this.handleSelectTab} />
+        monitorState={this.props.monitorState}
+        updateMonitorState={this.updateMonitorState}
+        styling={styling}
+        onInspectPath={this.handleInspectPath.bind(this, inspectedPathType)}
+        inspectedPath={monitorState[inspectedPathType]}
+        onSelectTab={this.handleSelectTab} />
       </div>
     );
   }

packages/redux-devtools-inspector/src/RightSlider.jsx

@@ -1,14 +1,14 @@
 import React, { PropTypes } from 'react';
 
 const RightSlider = ({ styling, shown, children, rotate }) =>
-  <div {...styling([
+  (<div {...styling([
     'rightSlider',
     shown && 'rightSliderShown',
     rotate && 'rightSliderRotate',
     rotate && shown && 'rightSliderRotateShown'
   ])}>
     {children}
-  </div>;
+  </div>);
 
 RightSlider.propTypes = {
   shown: PropTypes.bool

packages/redux-devtools-inspector/src/tabs/ActionTab.jsx

@@ -6,13 +6,13 @@ import getJsonTreeTheme from './getJsonTreeTheme';
 const ActionTab = ({
   action, styling, base16Theme, invertTheme, labelRenderer, dataTypeKey, isWideLayout
 }) =>
-  <JSONTree
+  (<JSONTree
     labelRenderer={labelRenderer}
     theme={getJsonTreeTheme(base16Theme)}
     data={action}
     getItemString={(type, data) => getItemString(styling, type, data, dataTypeKey, isWideLayout)}
     invertTheme={invertTheme}
     hideRoot
-  />;
+  />);
 
 export default ActionTab;

packages/redux-devtools-inspector/src/tabs/DiffTab.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import JSONDiff from './JSONDiff';
 
 const DiffTab = ({ delta, styling, base16Theme, invertTheme, labelRenderer, isWideLayout }) =>
-  <JSONDiff
+  (<JSONDiff
     {...{ delta, styling, base16Theme, invertTheme, labelRenderer, isWideLayout }}
-  />;
+  />);
 
 export default DiffTab;

packages/redux-devtools-inspector/src/tabs/JSONDiff.jsx

@@ -70,14 +70,14 @@ export default class JSONDiff extends Component {
 
     return (
       <JSONTree {...props}
-                theme={getJsonTreeTheme(base16Theme)}
-                data={this.state.data}
-                getItemString={this.getItemString}
-                valueRenderer={this.valueRenderer}
-                postprocessValue={prepareDelta}
-                isCustomNode={Array.isArray}
-                shouldExpandNode={expandFirstLevel}
-                hideRoot />
+        theme={getJsonTreeTheme(base16Theme)}
+        data={this.state.data}
+        getItemString={this.getItemString}
+        valueRenderer={this.valueRenderer}
+        postprocessValue={prepareDelta}
+        isCustomNode={Array.isArray}
+        shouldExpandNode={expandFirstLevel}
+        hideRoot />
     );
   }
 

packages/redux-devtools-inspector/src/tabs/StateTab.jsx

@@ -6,13 +6,13 @@ import getJsonTreeTheme from './getJsonTreeTheme';
 const StateTab = ({
   nextState, styling, base16Theme, invertTheme, labelRenderer, dataTypeKey, isWideLayout
 }) =>
-  <JSONTree
+  (<JSONTree
     labelRenderer={labelRenderer}
     theme={getJsonTreeTheme(base16Theme)}
     data={nextState}
     getItemString={(type, data) => getItemString(styling, type, data, dataTypeKey, isWideLayout)}
     invertTheme={invertTheme}
     hideRoot
-  />;
+  />);
 
 export default StateTab;

packages/redux-devtools-inspector/src/tabs/getItemString.js

@@ -61,10 +61,10 @@ function getText(type, data, isWideLayout, isDiff) {
 }
 
 const getItemString = (styling, type, data, dataTypeKey, isWideLayout, isDiff) =>
-  <span {...styling('treeItemHint')}>
+  (<span {...styling('treeItemHint')}>
     {data[IS_IMMUTABLE_KEY] ? 'Immutable' : ''}
     {dataTypeKey && data[dataTypeKey] ? data[dataTypeKey] + ' ' : ''}
     {getText(type, data, isWideLayout, isDiff)}
-  </span>;
+  </span>);
 
 export default getItemString;

packages/redux-devtools-inspector/src/utils/getInspectedState.js

@@ -16,24 +16,24 @@ function iterateToKey(obj, key) { // maybe there's a better way, dunno
 
 export default function getInspectedState(state, path, convertImmutable) {
   state = path && path.length ?
-  {
-    [path[path.length - 1]]: path.reduce(
-      (s, key) => {
-        if (!s) {
-          return s;
-        }
+    {
+      [path[path.length - 1]]: path.reduce(
+        (s, key) => {
+          if (!s) {
+            return s;
+          }
 
-        if (Iterable.isAssociative(s)) {
-          return s.get(key);
-        } else if (isIterable(s)) {
-          return iterateToKey(s, key);
-        }
+          if (Iterable.isAssociative(s)) {
+            return s.get(key);
+          } else if (isIterable(s)) {
+            return iterateToKey(s, key);
+          }
 
-        return s[key];
-      },
-      state
-    )
-  } : state;
+          return s[key];
+        },
+        state
+      )
+    } : state;
 
   if (convertImmutable) {
     try {