initial version of activity tracker

src/components/Dropzone/Dropzone.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import state from '../../core/state';
 import core from '../../core/core';
+import rpmEvent from '../../core/event';
 
 class Dropzone extends Component {
   constructor(props) {
@@ -24,6 +25,36 @@ class Dropzone extends Component {
 
   componentWillMount() {
     this._setInitialElements(this.props.initialElements);
+
+    if (this.props.id === 'root') {
+      rpmEvent.addEventListener('stateReset', (elements) => {
+        console.log('stateReset elements', elements);
+        const { id: dropzoneID, parentID } = this.props;
+        const updatedInitialItems = elements.map(e => ({
+          ...e,
+          key: e.id,
+          dropzoneID,
+          parentID,
+          showBasicContent: false,
+          skipStateUpdate: true,
+          updateState: this._updateState,
+          removeElement: this._removeElement,
+          updateElement: this._updateElement,
+          flushDroppedElements: this._flushDroppedElements,
+          checkAndRemoveElement: this._checkAndRemoveElement
+        }));
+
+        this.setState({
+          initialElements: updatedInitialItems,
+          droppedElements: updatedInitialItems,
+          initDone: false
+        }, () => {
+          this.setState({
+            initDone: true
+          })
+        });
+      })
+    }
   }
 
   componentWillReceiveProps({ initialElements }) {
@@ -62,7 +93,7 @@ class Dropzone extends Component {
     this.setState({
       initialElements: elements,
       droppedElements: elements
-    }, () => this._updateState(done));
+    }, () => this._updateState(done, false, false));
   }
 
   /**
@@ -178,18 +209,23 @@ class Dropzone extends Component {
    * function will further call `updateState` from state API, which updates the application state
    * @param cb {function} - callback function - optional
    */
-  _updateState = (cb = () => {}, dispatchElementRemove) => {
+  _updateState = (cb = () => {}, dispatchElementRemove, trackActivity = true) => {
     const {
       id: dropzoneID,
       parentID
     } = this.props;
 
+    if (!this.state.initDone && this.props.skipStateUpdate) {
+      return false;
+    }
+
     state.updateState(
       dropzoneID,
       parentID,
       this.state.droppedElements,
       cb,
-      dispatchElementRemove
+      dispatchElementRemove,
+      trackActivity
     );
   }
 
@@ -443,6 +479,7 @@ Dropzone.propTypes = {
   capacity: PropTypes.number,
   onDrop: PropTypes.func,
   onElementMove: PropTypes.func,
+  skipStateUpdate: PropTypes.bool,
   allowHorizontal: PropTypes.bool,
   initialElements: PropTypes.arrayOf(Object),
   parentID: PropTypes.string.isRequired,

src/core/event.js

@@ -8,6 +8,7 @@ class RpmEvent {
     this.event = {
       change: [],
       flush: [],
+      stateReset: [],
       removeElement: [],
       updateElement: []
     };
@@ -42,6 +43,12 @@ class RpmEvent {
     this.event.removeElement.forEach(e => e(element));
   };
 
+  // private function to trigger all state reset CB
+  notifyStateReset = (newState) => {
+    // trigger all events
+    this.event.stateReset.forEach(e => e(newState));
+  };
+
   /**
    * function to add event
    * @param {String} eventName

src/core/state.js

@@ -4,6 +4,7 @@ class State {
   constructor() {
     // all private varibale goes here
     const state = {};
+    this.stack = [];
     const shareableElementProps = ['id', 'type', 'name', 'payload', 'dropzoneID', 'parentID'];
 
     // set base
@@ -256,11 +257,22 @@ class State {
 
     // function to update the state
     // once update is done then triggers CB and notifyStateChange
-    this.updateState = (dropzoneID, parentID, fields, cb = () => {}, dispatchElementRemove) => {
+    this.updateState = (
+      dropzoneID,
+      parentID,
+      fields,
+      cb = () => {},
+      dispatchElementRemove,
+      trackActivity
+    ) => {
       traverseAndUpdateTree(dropzoneID, parentID, fields);
       cb(state.tree);
       rpmEvent.notifyStateChange();
 
+      if (trackActivity) {
+        this.stack.push(JSON.stringify(this.getStorableState()));
+      }
+
       // dispatch elementRemove event if necessary
       if (dispatchElementRemove) {
         rpmEvent.notifyElementRemove({
@@ -273,6 +285,13 @@ class State {
       }
     };
 
+    this.resetState = (level) => {
+      if (this.stack[level]) {
+        console.log('level', level, this.stack[level]);
+        rpmEvent.notifyStateReset(JSON.parse(this.stack[level]));
+      }
+    }
+
     // function to return element parent
     this.getElementParent = traverseAndReturnParent;