Merge pull request #88 from oslabs-beta/staging

Staging

Author: crperezt

src/app/components/Action.tsx

@@ -39,7 +39,7 @@ interface ActionProps {
 const Action = (props: ActionProps): unknown => {
   const {
     selected, last, index, sliderIndex, dispatch, displayName, componentName,
-    componentData, state, viewIndex, handleOnkeyDown, key,
+    componentData, state, viewIndex, handleOnkeyDown,
   } = props;
 
   /**

src/app/containers/MainContainer.tsx

@@ -84,7 +84,7 @@ 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 = (
+  const statelessCleaning = (
     obj:{
       name?:string;
       componentData?:object;
@@ -102,32 +102,24 @@ 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);
+      newObj.stateSnaphot = statelessCleaning(obj.stateSnaphot);
     }
     if (newObj.children) {
       newObj.children = [];
       if (obj.children.length > 0) {
         obj.children.forEach((element:{state?:object|string, children?:[]}) => {
           if (element.state !== 'stateless' || element.children.length > 0) {
-            const clean = statelessCleanning(element);
+            const clean = statelessCleaning(element);
             newObj.children.push(clean);
           }
         });
       }
     }
     return newObj;
   };
-  const snapshotDisplay = statelessCleanning(snapshotView);
-  const hierarchyDisplay = statelessCleanning(hierarchy);
+  const snapshotDisplay = statelessCleaning(snapshotView);
+  const hierarchyDisplay = statelessCleaning(hierarchy);
   return (
     <div className="main-container">
       <HeadContainer />

src/backend/linkFiber.ts

@@ -111,21 +111,8 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
       treeBaseDuration,
     } = currentFiber;
 
-<<<<<<< HEAD
     let newState: any = {};
     let componentData: ComponentData = {};
-=======
-    let newState: any;
-    let componentData: ComponentData = {};
-    /* = {
-      index: -1,
-      actualDuration: 0,
-      actualStartTime: 0,
-      selfBaseDuration: 0,
-      treeBaseDuration: 0,
-    };
-    */
->>>>>>> master
     let componentFound = false;
 
     // Check if node is a stateful setState component
@@ -149,16 +136,14 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
         const hooksNames = getHooksNames(elementType.toString());
         hooksStates.forEach((state, i) => {
           hooksIndex = componentActionsRecord.saveNew(state.state, state.component);
+          componentData.hooksIndex = hooksIndex;
           if (newState && newState.hooksState) {
-            newState.hooksState.push({ [hooksNames[i]]: state.state, componentData: { index: hooksIndex } });
-            // newState.hooksState.push([{ [hooksNames[i]]: state.state }, hooksIndex]);
+            newState.hooksState.push({ [hooksNames[i]]: state.state });
           } else if (newState) {
-            newState.hooksState = [{ [hooksNames[i]]: state.state, componentData: { index: hooksIndex } }];
-            // newState.hooksState = [{ [hooksNames[i]]: state.state }, hooksIndex];
+            newState.hooksState = [{ [hooksNames[i]]: state.state }];
           } else {
-            // newState = { hooksState: [{ [hooksNames[i]]: state.state }, hooksIndex] };
             newState = { hooksState: [] };
-            newState.hooksState.push({ [hooksNames[i]]: state.state, componentData: { index: hooksIndex } });
+            newState.hooksState.push({ [hooksNames[i]]: state.state });
           }
           componentFound = true;
         });
@@ -182,10 +167,7 @@ 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,
@@ -196,7 +178,7 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
           elementType ? elementType.name : 'nameless',
           componentData);
       }
-      if (newState !== 'stateless') console.log('state updated:', newState);
+      // if (newState !== 'stateless') console.log('state updated:', newState);
     } else {
       newNode = tree;
     }
@@ -229,10 +211,6 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
 
   function onVisibilityChange(): void {
     doWork = !document.hidden;
-<<<<<<< HEAD
-=======
-    // console.log('doWork is:', doWork);
->>>>>>> master
   }
 
   return () => {
@@ -252,19 +230,18 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
     const reactInstance = devTools ? devTools.renderers.get(1) : null;
     fiberRoot = devTools.getFiberRoots(1).values().next().value;
     const throttledUpdateSnapshot = throttle(updateSnapShotTree, 140);
-
     document.addEventListener('visibilitychange', onVisibilityChange);
     if (reactInstance && reactInstance.version) {
       devTools.onCommitFiberRoot = (function (original) {
         return function (...args) {
           // eslint-disable-next-line prefer-destructuring
           fiberRoot = args[1];
-          console.log('in CFR committed fiber');
+          // console.log('in CFR committed fiber');
           if (doWork) {
-            console.log('in CFR: updating snapshot');
+            // console.log('in CFR: updating snapshot');
             throttledUpdateSnapshot();
           }
-          console.log('in CFR updated snapshot');
+          // console.log('in CFR updated snapshot');
           return original(...args);
         };
       }(devTools.onCommitFiberRoot));

src/backend/timeJump.js

@@ -45,22 +45,13 @@ export default (origin, mode) => {
 
     // Check for hooks state and set it with dispatch()
     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);
+        const hooksComponent = componentActionsRecord.getComponentByIndex(target.componentData.hooksIndex);
+        const hookState = Object.values(hook);
         if (hooksComponent && hooksComponent.dispatch) {
-          // hooksComponent.dispatch(Object.values(target.state.hooksState[0])[0]);
-          hooksComponent.dispatch(hooksState);
+          hooksComponent.dispatch(hookState[0]);
         }
       });
-      //target.children.forEach(child => jump(child));
-
     }
 
     target.children.forEach(child => {

src/backend/types/backendTypes.ts

@@ -28,6 +28,7 @@ export interface MsgData {
 
 export interface ComponentData {
   index?: number;
+  hooksIndex?: number;
   actualDuration?: number;
   actualStartTime?: number;
   selfBaseDuration?: number;

src/extension/background.js

@@ -89,7 +89,7 @@ function changeCurrLocation(tabObj, rootNode, index, name) {
     return;
     // if not, recurse on each one of the children
   }
-  
+
   if (rootNode.children) { // Carlos: remove if, redundant
     rootNode.children.forEach(child => {
       changeCurrLocation(tabObj, child, index, name);
@@ -244,7 +244,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {
           tabsObj[tabId].snapshots.splice(1);
           // gabi :: reset hierarchy to page initial state
           if (tabsObj[tabId].hierarchy) {
-            //test
+            // test
             tabsObj[tabId].hierarchy.children = [];
             // gabi :: reset currParent plus current state
             tabsObj[tabId].currParent = 1;
@@ -343,13 +343,11 @@ chrome.tabs.onRemoved.addListener(tabId => {
   delete firstSnapshotReceived[tabId];
 });
 
-// when a new url is loaded on the same tab, this remove the tabid from the tabsObj, recreate the tab and inject the script 
+// when a new url is loaded on the same tab, this remove the tabid from the tabsObj, recreate the tab and inject the script
 chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
-
   // check if the tab title changed to see if tab need to restart
-  if (changeInfo && tabsObj[tabId]){
-    if(changeInfo.title && changeInfo.title !== tabsObj[tabId].title){
-
+  if (changeInfo && tabsObj[tabId]) {
+    if (changeInfo.title && changeInfo.title !== tabsObj[tabId].title) {
       // tell devtools which tab to delete
       if (portsArr.length > 0) {
         portsArr.forEach(bg =>
@@ -367,21 +365,6 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
 
       // recreate the tab on the tabsObj
       tabsObj[tabId] = createTabObj(changeInfo.title);
-
-      // reinject the script to the tab
-      chrome.tabs.executeScript(tabId, {
-        code: `
-        // Function will attach script to the dom 
-        const injectScript = (file, tag) => {
-          const htmlBody = document.getElementsByTagName(tag)[0];
-          const script = document.createElement('script');
-          script.setAttribute('type', 'text/javascript');
-          script.setAttribute('src', file);
-          htmlBody.appendChild(script);
-        };
-        injectScript(chrome.runtime.getURL('bundles/backend.bundle.js'), 'body');
-      `,
-      });
     }
   }
 });