Merge pull request #85 from crperezt/feature4

Cleaned up data format; fixed errors in throttling

Author: crperezt

src/app/containers/MainContainer.tsx

@@ -84,7 +84,14 @@ function MainContainer(): any {
   // if viewIndex is -1, then use the sliderIndex instead
   const snapshotView = viewIndex === -1 ? snapshots[sliderIndex] : snapshots[viewIndex];
   // gabi :: cleannign hierarchy and snapshotView from stateless data
-  const statelessCleanning = (obj:{name?:string; componentData?:object; state?:object|string;stateSnaphot?:object; children?:any[]}) => {
+  const statelessCleanning = (
+    obj:{
+      name?:string;
+      componentData?:object;
+      state?:{hooksState?: any | {componentData?: any}[]} | string;
+      stateSnaphot?:object; 
+      children?:any[];
+    }) => {
     const newObj = { ...obj };
     if (newObj.name === 'nameless') {
       delete newObj.name;
@@ -95,6 +102,14 @@ function MainContainer(): any {
     if (newObj.state === 'stateless') {
       delete newObj.state;
     }
+    if (newObj.state && newObj.state.hooksState) {
+      if (Array.isArray(newObj.state.hooksState)) {
+        newObj.state.hooksState.forEach(s => {
+          delete s.componentData;
+        });
+      }
+    }
+
     if (newObj.stateSnaphot) {
       newObj.stateSnaphot = statelessCleanning(obj.stateSnaphot);
     }

src/app/reducers/mainReducer.js

@@ -18,7 +18,7 @@ export default (state, action) => produce(state, draft => {
   // eslint-disable-next-line consistent-return
   const findName = (index, obj) => {
     // eslint-disable-next-line eqeqeq
-    if (obj.index == index) {
+    if (obj && obj.index == index) {
       return obj.name;
     }
 

src/backend/helpers.js

@@ -17,8 +17,10 @@ export const throttle = (f, t) => {
     if (isOnCooldown && isCallQueued) return;
     if (isOnCooldown) {
       isCallQueued = true;
+      console.log('snapshot update already queued');
       return;
     }
+    console.log('no queue, updating snapshot from trigger func');
     f();
     isOnCooldown = true;
     isCallQueued = false;
@@ -27,11 +29,14 @@ export const throttle = (f, t) => {
       if (isCallQueued) {
         isCallQueued = false;
         isOnCooldown = true; // not needed I think
+        console.log('calling queued call');
+        f();
         setTimeout(runAfterTimeout, t);
         return;
       }
       isOnCooldown = false;
     };
+    console.log('queueing snapshot update');
     setTimeout(runAfterTimeout, t);
   };
   return throttledFunc;

src/backend/index.ts

@@ -40,7 +40,7 @@ function getRouteURL(node: SnapshotNode): string {
 window.addEventListener('message', ({ data: { action, payload } } : MsgData) => {
   switch (action) {
     case 'jumpToSnap':
-      timeJump(payload); // * This sets state with given payload
+      timeJump(payload, true); // * This sets state with given payload
       // Get the pathname from payload and add new entry to browser history
       // MORE: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
 

src/backend/linkFiber.ts

@@ -78,8 +78,7 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
       // Carlos: these two are legacy comments, we should look into them later
       // prevents useEffect from crashing on load
       // if (memoizedState.next.queue === null) { // prevents double pushing snapshot updates
-      // console.log('traverse hooks memoizedState', memoizedState);
-      if (memoizedState.memoizedState) {
+      if (memoizedState.memoizedState && memoizedState.queue.lastRenderedReducer && memoizedState.queue.lastRenderedReducer.name === 'basicStateReducer') {
         hooksStates.push({
           component: memoizedState.queue,
           state: memoizedState.memoizedState,
@@ -112,6 +111,10 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
       treeBaseDuration,
     } = currentFiber;
 
+<<<<<<< HEAD
+    let newState: any = {};
+    let componentData: ComponentData = {};
+=======
     let newState: any;
     let componentData: ComponentData = {};
     /* = {
@@ -122,6 +125,7 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
       treeBaseDuration: 0,
     };
     */
+>>>>>>> master
     let componentFound = false;
 
     // Check if node is a stateful setState component
@@ -146,11 +150,15 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
         hooksStates.forEach((state, i) => {
           hooksIndex = componentActionsRecord.saveNew(state.state, state.component);
           if (newState && newState.hooksState) {
-            newState.hooksState.push([{ [hooksNames[i]]: state.state }, hooksIndex]);
+            newState.hooksState.push({ [hooksNames[i]]: state.state, componentData: { index: hooksIndex } });
+            // newState.hooksState.push([{ [hooksNames[i]]: state.state }, hooksIndex]);
           } else if (newState) {
-            newState.hooksState = [{ [hooksNames[i]]: state.state }, hooksIndex];
+            newState.hooksState = [{ [hooksNames[i]]: state.state, componentData: { index: hooksIndex } }];
+            // newState.hooksState = [{ [hooksNames[i]]: state.state }, hooksIndex];
           } else {
-            newState = { hooksState: [{ [hooksNames[i]]: state.state }, hooksIndex] };
+            // newState = { hooksState: [{ [hooksNames[i]]: state.state }, hooksIndex] };
+            newState = { hooksState: [] };
+            newState.hooksState.push({ [hooksNames[i]]: state.state, componentData: { index: hooksIndex } });
           }
           componentFound = true;
         });
@@ -174,7 +182,10 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
 
     let newNode = null;
     // We want to add this fiber node to the snapshot
+<<<<<<< HEAD
+=======
     // const snapshotState = newState.state || newState.hooksState;
+>>>>>>> master
     if (componentFound || newState === 'stateless') {
       if (fromSibling) {
         newNode = tree.addSibling(newState,
@@ -185,6 +196,7 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
           elementType ? elementType.name : 'nameless',
           componentData);
       }
+      if (newState !== 'stateless') console.log('state updated:', newState);
     } else {
       newNode = tree;
     }
@@ -217,7 +229,10 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
 
   function onVisibilityChange(): void {
     doWork = !document.hidden;
+<<<<<<< HEAD
+=======
     // console.log('doWork is:', doWork);
+>>>>>>> master
   }
 
   return () => {
@@ -244,7 +259,12 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
         return function (...args) {
           // eslint-disable-next-line prefer-destructuring
           fiberRoot = args[1];
-          if (doWork) throttledUpdateSnapshot();
+          console.log('in CFR committed fiber');
+          if (doWork) {
+            console.log('in CFR: updating snapshot');
+            throttledUpdateSnapshot();
+          }
+          console.log('in CFR updated snapshot');
           return original(...args);
         };
       }(devTools.onCommitFiberRoot));

src/backend/timeJump.js

@@ -15,16 +15,20 @@ import 'core-js';
 // const componentActionsRecord = require('./masterState');
 import componentActionsRecord from './masterState';
 
+const circularComponentTable = new Set();
+
 // Carlos: origin is latest snapshot, linking to the fiber,
 // so changes to origin change app
 // module.exports = (origin, mode) => {
 export default (origin, mode) => {
   // Recursively change state of tree
   // Carlos: target is past state we are travelling to
 
-  function jump(target) {
+  function jump(target, firstCall = false) {
     // Set the state of the origin tree if the component is stateful
+
     if (!target) return;
+
     if (target.state === 'stateless') target.children.forEach(child => jump(child));
     const component = componentActionsRecord.getComponentByIndex(target.componentData.index);
     if (component && component.setState) {
@@ -40,26 +44,39 @@ export default (origin, mode) => {
     }
 
     // Check for hooks state and set it with dispatch()
-    if (target.state.hooksState) {
-      const hooksComponent = componentActionsRecord.getComponentByIndex(target.state.hooksState[1]);
-      // const [hooksState] = [target.state.hooksState];
-      const hooksState = Object.values(target.state.hooksState[0])[0];
-      if (hooksComponent && hooksComponent.dispatch) {
-        //hooksComponent.dispatch(Object.values(target.state.hooksState[0])[0]);
-        console.log('setting hooksState of component id:', target.state.hooksState[1], 'to:', hooksState)
-        hooksComponent.dispatch(hooksState);
-      }
-      target.children.forEach(child => jump(child));
-    }
+    if (target.state && target.state.hooksState) {
+      console.log('SNAPSHOT TARGET: ', target);
+      // const hooksComponent = componentActionsRecord.getComponentByIndex(target.state.hooksState[1]);
+      target.state.hooksState.forEach(hook => {
+        console.log('HOOK IS:', JSON.stringify(hook));
+        if (!hook.componentData) return;
+        const hooksComponent = componentActionsRecord.getComponentByIndex(hook.componentData.index);
+        // const [hooksState] = [target.state.hooksState];
+        delete hook.componentData;
+        const hooksState = Object.values(hook);
+        if (hooksComponent && hooksComponent.dispatch) {
+          // hooksComponent.dispatch(Object.values(target.state.hooksState[0])[0]);
+          hooksComponent.dispatch(hooksState);
+        }
+      });
+      //target.children.forEach(child => jump(child));
 
-    if ((!component || !component.state) && !target.state.hooksState) {
-      target.children.forEach(child => jump(child));
     }
+
+    target.children.forEach(child => {
+      if (!circularComponentTable.has(child)) {
+        circularComponentTable.add(child);
+        jump(child);
+      }
+    });
+
+    // }
   }
 
-  return target => {
+  return (target, firstCall = false) => {
     // * Setting mode disables setState from posting messages to window
     mode.jumping = true;
+    if (firstCall) circularComponentTable.clear();
     jump(target);
     setTimeout(() => {
       mode.jumping = false;