replace consecutive identical logs with single log having count

dist/client/client_api.js

@@ -16,9 +16,11 @@ var _createClass2 = require('babel-runtime/helpers/createClass');
 
 var _createClass3 = _interopRequireDefault(_createClass2);
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _formatActionData = require('./ui/utils/formatActionData');
+
+var _formatActionData2 = _interopRequireDefault(_formatActionData);
 
-var actionIds = 0;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var ClientApi = function () {
   function ClientApi(_ref) {
@@ -89,9 +91,13 @@ var ClientApi = function () {
           args[0] = '[SyntheticEvent]';
         }
 
-        var id = actionIds++;
-        actions = [{ id: id, name: name, args: args }].concat(actions.slice(0, 4));
-        syncedStore.setData({ actions: actions });
+        var data = { name: name, args: args };
+        actions = [{ data: data }].concat(actions);
+
+        // replace consecutive identical actions with single action having
+        // count equal to no. of those identical actions.
+        var formattedData = (0, _formatActionData2.default)(actions).slice(0, 5);
+        syncedStore.setData({ actions: formattedData });
       };
     }
   }, {

dist/client/ui/action_logger.js

@@ -78,6 +78,7 @@ var ActionLogger = function (_Component) {
   (0, _createClass3.default)(ActionLogger, [{
     key: 'getActionData',
     value: function getActionData() {
+      // const actions = formatActionData(this.props.actions);
       return this.props.actions.map(function (action) {
         return _react2.default.createElement(_foldable2.default, { key: action.id, action: action });
       });

dist/client/ui/foldable.js

@@ -36,7 +36,7 @@ var _jsonStringifySafe = require('json-stringify-safe');
 
 var _jsonStringifySafe2 = _interopRequireDefault(_jsonStringifySafe);
 
-var _highlight = require('./highlight');
+var _highlight = require('./utils/highlight');
 
 var _highlight2 = _interopRequireDefault(_highlight);
 
@@ -72,6 +72,17 @@ var folderContentStyle = {
   width: 'auto'
 };
 
+var countStyle = {
+  display: 'inline-block',
+  float: 'left',
+  marginTop: '-1px',
+  marginRight: '5px',
+  backgroundColor: '#777777',
+  color: '#ffffff',
+  padding: '1px 5px',
+  borderRadius: '8px'
+};
+
 var Foldable = function (_React$Component) {
   (0, _inherits3.default)(Foldable, _React$Component);
 
@@ -111,14 +122,19 @@ var Foldable = function (_React$Component) {
 
       if (this.state.collapsed) {
         // return the shortest string representation possible
-        content = (0, _jsonStringifySafe2.default)(action);
+        content = (0, _jsonStringifySafe2.default)(action.data);
       } else {
-        content = (0, _jsonStringifySafe2.default)(action, null, 2);
+        content = (0, _jsonStringifySafe2.default)(action.data, null, 2);
       }
 
       return _react2.default.createElement(
         'div',
         { ref: 'folder', style: folderStyle },
+        action.count > 1 && _react2.default.createElement(
+          'span',
+          { style: countStyle },
+          action.count
+        ),
         _react2.default.createElement(
           'div',
           { style: folderSidebarStyle },

dist/client/ui/utils/formatActionData.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = formatActionData;
+
+var _isEqual = require('lodash/isEqual');
+
+var _isEqual2 = _interopRequireDefault(_isEqual);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function getLastElem(arr) {
+  return arr[arr.length - 1];
+}
+
+/**
+ * Takes an array and checks consecutive arrays. If they are same then replaces
+ * consecutive identical objects (refers to .data of each object) with single
+ * object and sets the count in the object to the number of identical consecutive
+ * objects.
+ *
+ * @param actions  An array of all the actions
+ * @returns {Array}
+ */
+function formatActionData(actions) {
+  var formatted = [];
+  actions.forEach(function (action, i) {
+    if (i === 0 || !(0, _isEqual2.default)(action.data, getLastElem(formatted).data) || !action.data) {
+      formatted.push({
+        data: action.data,
+        count: action.count || 1,
+        id: formatted.length + 1
+      });
+    } else {
+      var lastElem = getLastElem(formatted);
+      lastElem.count += action.count || 1;
+    }
+  });
+  return formatted;
+}

package.json

@@ -35,6 +35,7 @@
     "express": "^4.13.3",
     "jsdom": "^8.4.0",
     "json-stringify-safe": "^5.0.1",
+    "lodash": "^4.11.1",
     "node-libs-browser": "^0.5.2",
     "page-bus": "^3.0.1",
     "query-string": "^3.0.3",
@@ -53,7 +54,7 @@
   },
   "devDependencies": {
     "babel-cli": "^6.3.14",
-    "babel-eslint": "^5.0.0",
+    "babel-eslint": "^6.0.2",
     "babel-plugin-transform-runtime": "^6.3.14",
     "chai": "^3.5.0",
     "eslint": "^2.4.0",

src/client/__tests__/client_api.js

@@ -107,13 +107,14 @@ describe('client.ClientApi', () => {
       cb(10, 20);
 
       const args = api._syncedStore.setData.args[0];
-      expect(args[0].actions).to.be.deep.equal([
-        {
+      expect(args[0].actions).to.be.deep.equal([{
+        data: {
           name: 'hello',
           args: [10, 20],
-          id: 0,
         },
-      ]);
+        id: 1,
+        count: 1,
+      }]);
     });
 
     it('should only keep the latest 5 actions in the syncedStore', () => {
@@ -127,17 +128,7 @@ describe('client.ClientApi', () => {
       cb(10, 20);
 
       const args = api._syncedStore.setData.args[0];
-      expect(args[0].actions).to.be.deep.equal([
-        {
-          name: 'hello',
-          args: [10, 20],
-          id: 1,
-        },
-        50,
-        40,
-        30,
-        20,
-      ]);
+      expect(args[0].actions.length).to.equal(5);
     });
 
     it('should replace any Synthetic Event with it\'s name', () => {
@@ -153,13 +144,14 @@ describe('client.ClientApi', () => {
       cb(event);
 
       const args = api._syncedStore.setData.args[0];
-      expect(args[0].actions).to.be.deep.equal([
-        {
+      expect(args[0].actions).to.be.deep.equal([{
+        data: {
           name: 'hello',
           args: ['[SyntheticEvent]'],
-          id: 2,
         },
-      ]);
+        id: 1,
+        count: 1,
+      }]);
     });
   });
 

src/client/client_api.js

@@ -1,4 +1,4 @@
-let actionIds = 0;
+import formatActionData from './ui/utils/formatActionData';
 
 export default class ClientApi {
   constructor({ syncedStore, storyStore }) {
@@ -52,9 +52,13 @@ export default class ClientApi {
         args[0] = '[SyntheticEvent]';
       }
 
-      const id = actionIds++;
-      actions = [{ id, name, args }].concat(actions.slice(0, 4));
-      syncedStore.setData({ actions });
+      const data = { name, args };
+      actions = [{ data }].concat(actions);
+
+      // replace consecutive identical actions with single action having
+      // count equal to no. of those identical actions.
+      const formattedData = formatActionData(actions).slice(0, 5);
+      syncedStore.setData({ actions: formattedData });
     };
   }
 

src/client/ui/__tests__/foldable.js

@@ -8,8 +8,11 @@ describe('<Foldable />', function () {
   describe('render', function () {
     it('should render action compact by default', function () {
       const data = {
-        name: 'test action',
-        args: 'things',
+        data: {
+          name: 'test action',
+          args: 'things',
+        },
+        count: 1,
       };
 
       const compactString = '{name:"test action",args:"things"}';
@@ -21,8 +24,11 @@ describe('<Foldable />', function () {
 
     it('should render action in full when unfolded', function () {
       const data = {
-        name: 'test action',
-        args: 'things',
+        data: {
+          name: 'test action',
+          args: 'things',
+        },
+        count: 1,
       };
 
       const fullString = '{\n  name: "test action",\n  args: "things"\n}';

src/client/ui/action_logger.js

@@ -40,6 +40,7 @@ const btnStyle = {
 class ActionLogger extends Component {
 
   getActionData() {
+    // const actions = formatActionData(this.props.actions);
     return this.props.actions
       .map((action) => {
         return (<Foldable key={action.id} action={action} />);

src/client/ui/foldable.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import stringify from 'json-stringify-safe';
-import highlight from './highlight';
+import highlight from './utils/highlight';
 
 const folderStyle = {
   display: 'block',
@@ -32,6 +32,17 @@ const folderContentStyle = {
   width: 'auto',
 };
 
+const countStyle = {
+  display: 'inline-block',
+  float: 'left',
+  marginTop: '-1px',
+  marginRight: '5px',
+  backgroundColor: '#777777',
+  color: '#ffffff',
+  padding: '1px 5px',
+  borderRadius: '8px',
+};
+
 class Foldable extends React.Component {
   constructor(props) {
     super(props);
@@ -59,13 +70,14 @@ class Foldable extends React.Component {
 
     if (this.state.collapsed) {
       // return the shortest string representation possible
-      content = stringify(action);
+      content = stringify(action.data);
     } else {
-      content = stringify(action, null, 2);
+      content = stringify(action.data, null, 2);
     }
 
     return (
       <div ref="folder" style={ folderStyle }>
+        { action.count > 1 && <span style={ countStyle }>{ action.count }</span> }
         <div style={ folderSidebarStyle }>
           <span ref="foldable-toggle" onClick={ this.onToggleCallback }>
             { this.state.collapsed ? '►' : '▼' }

src/client/ui/utils/__tests__/formatActionData.js

@@ -0,0 +1,60 @@
+const { describe, it } = global;
+import { expect } from 'chai';
+import formatActionData from '../formatActionData';
+
+describe('formatActionData', function () {
+  it('should not show consecutive arrays having same data', function () {
+    const actions = [{
+      data: {
+        name: 'hello',
+        args: 'world',
+      },
+    }, {
+      data: {
+        name: 'hello',
+        args: 'world',
+      },
+    }];
+    const expected = [{
+      data: {
+        name: 'hello',
+        args: 'world',
+      },
+      count: 2,
+      id: 1,
+    }];
+    expect(formatActionData(actions).length).to.equal(1);
+    expect(formatActionData(actions)).to.deep.equal(expected);
+  });
+
+  it('should not show consecutive arrays having same data', function () {
+    const actions = [{
+      data: {
+        name: 'hello',
+        args: 'world1',
+      },
+    }, {
+      data: {
+        name: 'hello',
+        args: 'world2',
+      },
+    }];
+    const expected = [{
+      data: {
+        name: 'hello',
+        args: 'world1',
+      },
+      count: 1,
+      id: 1,
+    }, {
+      data: {
+        name: 'hello',
+        args: 'world2',
+      },
+      count: 1,
+      id: 2,
+    }];
+    expect(formatActionData(actions).length).to.equal(2);
+    expect(formatActionData(actions)).to.deep.equal(expected);
+  });
+});