changed hooksState snapshot format

Author: crperezt

src/app/containers/MainContainer.tsx

@@ -84,7 +84,14 @@ function MainContainer() {
   // 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() {
     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/linkFiber.ts

@@ -107,7 +107,7 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
       treeBaseDuration,
     } = currentFiber;
 
-    let newState: any;
+    let newState: any = {};
     let componentData: ComponentData = {};
     let componentFound = false;
 
@@ -133,11 +133,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;
         });

src/backend/timeJump.js

@@ -28,6 +28,7 @@ export default (origin, mode) => {
     // 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) {
@@ -43,15 +44,23 @@ 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]);
-        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));
+
     }
 
     target.children.forEach(child => {