add code folding in logger #108

dist/client/client_api.js

@@ -18,6 +18,8 @@ var _createClass3 = _interopRequireDefault(_createClass2);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var actionIds = 0;
+
 var ClientApi = function () {
   function ClientApi(_ref) {
     var syncedStore = _ref.syncedStore;
@@ -69,7 +71,8 @@ var ClientApi = function () {
           args[0] = '[SyntheticEvent]';
         }
 
-        actions = [{ name: name, args: args }].concat(actions.slice(0, 4));
+        var id = actionIds++;
+        actions = [{ id: id, name: name, args: args }].concat(actions.slice(0, 4));
         syncedStore.setData({ actions: actions });
       };
     }

dist/client/ui/action_logger.js

@@ -28,6 +28,10 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _foldable = require('./foldable');
+
+var _foldable2 = _interopRequireDefault(_foldable);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var preStyle = {
@@ -63,11 +67,6 @@ var btnStyle = {
   marginLeft: 5
 };
 
-var latestActionLogStyle = {
-  backgroundColor: '#FFFCE0',
-  transition: 'all .2s ease-in'
-};
-
 var ActionLogger = function (_Component) {
   (0, _inherits3.default)(ActionLogger, _Component);
 
@@ -77,31 +76,10 @@ var ActionLogger = function (_Component) {
   }
 
   (0, _createClass3.default)(ActionLogger, [{
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
-      var _this2 = this;
-
-      if (this.refs.actionLogger && window.setTimeout) {
-        this.refs.actionLogger.style.backgroundColor = latestActionLogStyle.backgroundColor;
-        setTimeout(function () {
-          _this2.refs.actionLogger.style.backgroundColor = 'white';
-        }, 500);
-      }
-    }
-  }, {
     key: 'getActionData',
     value: function getActionData() {
-      return this.props.actionLogs.map(function (action, i) {
-        // assuming that the first object in the array is the latest addition.
-        return i === 0 ? _react2.default.createElement(
-          'div',
-          { style: latestActionLogStyle, ref: 'actionLogger', key: i },
-          action
-        ) : _react2.default.createElement(
-          'div',
-          { key: i },
-          action
-        );
+      return this.props.actions.map(function (action) {
+        return _react2.default.createElement(_foldable2.default, { key: action.id, action: action });
       });
     }
   }, {
@@ -135,7 +113,7 @@ var ActionLogger = function (_Component) {
 
 ActionLogger.propTypes = {
   onClear: _react2.default.PropTypes.func,
-  actionLogs: _react2.default.PropTypes.array
+  actions: _react2.default.PropTypes.array
 };
 
 exports.default = ActionLogger;

dist/client/ui/admin.js

@@ -22,10 +22,6 @@ var _reactDom = require('react-dom');
 
 var _reactDom2 = _interopRequireDefault(_reactDom);
 
-var _jsonStringifySafe = require('json-stringify-safe');
-
-var _jsonStringifySafe2 = _interopRequireDefault(_jsonStringifySafe);
-
 var _controls = require('./controls');
 
 var _controls2 = _interopRequireDefault(_controls);
@@ -102,10 +98,7 @@ function getActionLogger(data) {
   var _data$actions = data.actions;
   var actions = _data$actions === undefined ? [] : _data$actions;
 
-  var logs = actions.map(function (action) {
-    return (0, _jsonStringifySafe2.default)(action, null, 2);
-  });
-  return _react2.default.createElement(_action_logger2.default, { actionLogs: logs, onClear: clearLogs });
+  return _react2.default.createElement(_action_logger2.default, { actions: actions, onClear: clearLogs });
 }
 
 function renderMain(data) {

dist/client/ui/foldable.js

@@ -0,0 +1,142 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _jsonStringifySafe = require('json-stringify-safe');
+
+var _jsonStringifySafe2 = _interopRequireDefault(_jsonStringifySafe);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var folderStyle = {
+  display: 'block',
+  width: '100%',
+  marginBottom: '10px',
+  backgroundColor: 'white',
+  transition: 'background-color .2s ease-in'
+};
+
+var folderSidebarStyle = {
+  display: 'block',
+  width: '10px',
+  float: 'left',
+  height: '100%',
+  color: '#ccc',
+  userSelect: 'none',
+  WebkitUserSelect: 'none',
+  msUserSelect: 'none',
+  MozUserSelect: 'none',
+  cursor: 'pointer'
+};
+
+var folderContentStyle = {
+  display: 'inline-block',
+  clear: 'right',
+  marginLeft: '5px',
+  padding: '0px',
+  paddingLeft: '5px',
+  width: 'auto'
+};
+
+var Foldable = function (_React$Component) {
+  (0, _inherits3.default)(Foldable, _React$Component);
+
+  function Foldable(props) {
+    (0, _classCallCheck3.default)(this, Foldable);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Foldable).call(this, props));
+
+    _this.state = {
+      collapsed: true
+    };
+    _this.onToggleCallback = _this.onToggle.bind(_this);
+    return _this;
+  }
+
+  (0, _createClass3.default)(Foldable, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      this.refs.folder.style.backgroundColor = '#FFFCE0';
+      setTimeout(function () {
+        _this2.refs.folder.style.backgroundColor = folderStyle.backgroundColor;
+      }, 500);
+    }
+  }, {
+    key: 'onToggle',
+    value: function onToggle() {
+      this.setState({ collapsed: !this.state.collapsed });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var action = (0, _extends3.default)({}, this.props.action);
+      delete action.id;
+      var content = void 0;
+
+      if (this.state.collapsed) {
+        // return the shortest string representation possible
+        content = (0, _jsonStringifySafe2.default)(action);
+      } else {
+        content = (0, _jsonStringifySafe2.default)(action, null, 2);
+      }
+
+      return _react2.default.createElement(
+        'div',
+        { ref: 'folder', style: folderStyle },
+        _react2.default.createElement(
+          'div',
+          { style: folderSidebarStyle },
+          _react2.default.createElement(
+            'span',
+            { className: 'foldable-toggle', onClick: this.onToggleCallback },
+            this.state.collapsed ? '►' : '▼'
+          )
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: 'foldable-content', style: folderContentStyle },
+          content
+        )
+      );
+    }
+  }]);
+  return Foldable;
+}(_react2.default.Component);
+
+Foldable.propTypes = {
+  action: _react2.default.PropTypes.object
+};
+
+exports.default = Foldable;

src/client/__tests__/client_api.js

@@ -88,6 +88,7 @@ describe('client.ClientApi', () => {
         {
           name: 'hello',
           args: [10, 20],
+          id: 0,
         },
       ]);
     });
@@ -107,6 +108,7 @@ describe('client.ClientApi', () => {
         {
           name: 'hello',
           args: [10, 20],
+          id: 1,
         },
         50,
         40,
@@ -132,6 +134,7 @@ describe('client.ClientApi', () => {
         {
           name: 'hello',
           args: ['[SyntheticEvent]'],
+          id: 2,
         },
       ]);
     });

src/client/client_api.js

@@ -1,3 +1,5 @@
+let actionIds = 0;
+
 export default class ClientApi {
   constructor({ syncedStore, storyStore }) {
     this._syncedStore = syncedStore;
@@ -34,7 +36,8 @@ export default class ClientApi {
         args[0] = '[SyntheticEvent]';
       }
 
-      actions = [{ name, args }].concat(actions.slice(0, 4));
+      const id = actionIds++;
+      actions = [{ id, name, args }].concat(actions.slice(0, 4));
       syncedStore.setData({ actions });
     };
   }

src/client/ui/__tests__/action_logger.js

@@ -8,23 +8,29 @@ import ActionLogger from '../action_logger';
 describe('<ActionLogger />', function () {
   describe('render', function () {
     it('should render logs - empty', function () {
-      const wrap = shallow(<ActionLogger actionLogs={[]} />);
+      const wrap = shallow(<ActionLogger actions={[]} />);
       const logs = wrap.find('pre').first();
       expect(logs.text()).to.equal('');
     });
 
     it('should render logs', function () {
-      const data = ['a1', 'a2', 'a3'];
-      const wrap = shallow(<ActionLogger actionLogs={data} />);
+      const action1 = { name: 'a1' };
+      const action2 = { name: 'a2' };
+      const action3 = { name: 'a3' };
+
+      const data = [action1, action2, action3];
+
+      const wrap = shallow(<ActionLogger actions={data} />);
       const logs = wrap.find('pre').first();
-      expect(logs.text()).to.equal('a1a2a3');
+
+      expect(logs.children().length).to.equal(3);
     });
   });
 
   describe('functions', function () {
     it('should call the onClear prop when the button is clicked', function () {
       const onClear = sinon.spy();
-      const wrap = shallow(<ActionLogger actionLogs={[]} onClear={onClear} />);
+      const wrap = shallow(<ActionLogger actions={[]} onClear={onClear} />);
       const clear = wrap.find('button').first();
       clear.simulate('click');
       expect(onClear.calledOnce).to.equal(true);

src/client/ui/__tests__/foldable.js

@@ -0,0 +1,43 @@
+const { describe, it } = global;
+import { expect } from 'chai';
+import { shallow } from 'enzyme';
+import React from 'react';
+import Foldable from '../foldable';
+
+describe('<Foldable />', function () {
+  describe('render', function () {
+    it('should render action compact by default', function () {
+      const data = {
+        name: 'test action',
+        args: 'things',
+      };
+
+      const compactString = '{"name":"test action","args":"things"}';
+
+      const wrap = shallow(<Foldable action={data} />);
+      const content = wrap.find('.foldable-content').first();
+
+      expect(content.text()).to.equal(compactString);
+    });
+
+    it('should render action in full when unfolded', function () {
+      const data = {
+        name: 'test action',
+        args: 'things',
+      };
+
+      const fullString = '{ "name": "test action",\n  "args": "things"\n}';
+
+      const wrap = shallow(<Foldable action={data} />);
+      const toggle = wrap.find('.foldable-toggle').first();
+
+      toggle.simulate('click');
+
+      expect(wrap.state()).to.deep.equal({ collapsed: false });
+
+      const content = wrap.find('.foldable-content').first();
+
+      expect(content.text()).to.equal(fullString);
+    });
+  });
+});