Merge pull request #6 from oslabs-beta/cleaning

Cleaned up console logs used for debugging

src/app/components/Action.tsx

@@ -60,9 +60,6 @@ const Action = (props: ActionProps): JSX.Element => {
     logChangedState,
   } = props;
 
-  // console.log('index in Action.tsx', index);
-  // console.log('logChangedState(index)', logChangedState(index));
-
   /**
    * @function cleanTime: Displays render times for state changes
    * @returns render display time in seconds in miliseconds
@@ -138,7 +135,6 @@ const Action = (props: ActionProps): JSX.Element => {
                   <button
                     className="jump-button"
                     onClick={(e: any): void => {
-                      console.log('componentData', componentData);
                       e.stopPropagation();
                       dispatch(changeSlider(index));
                       dispatch(changeView(index));

src/app/components/ComponentMap.tsx

@@ -285,7 +285,6 @@ export default function ComponentMap({
                   // mousing controls & Tooltip display logic
                   const handleMouseAndClickOver = event => {
                     () => dispatch(onHover(node.data.rtid));
-                    console.log('hover', node);
                     const coords = localPoint(
                       event.target.ownerSVGElement,
                       event,

src/app/components/History.tsx

@@ -103,7 +103,6 @@ function History(props: Record<string, unknown>) {
       .append('g')
       .style('cursor', 'pointer')
       .on('click', d => {
-        // console.log('d', d);
         dispatch(changeView(d.data.index));
         dispatch(changeSlider(d.data.index));
       })
@@ -183,12 +182,10 @@ function History(props: Record<string, unknown>) {
       return newObj;
     };
     // displays stateful data
-    // console.log(index, index - 1);
 
     const previousDisplay = statelessCleanning(snapshots[index - 1]);
     const delta = diff(previousDisplay, snapshots[index]);
     const changedState = findStateChangeObj(delta);
-    // console.log('changedState in History.tsx', changedState[0]);
     // took out the formatting for History.tsx nodes, Rob 11/4
     const html = formatters.html.format(changedState[0]);
     // const output = ReactHtmlParser(html);

src/app/containers/ActionContainer.tsx

@@ -24,7 +24,6 @@ function ActionContainer(props) {
   let actionsArr = [];
   const hierarchyArr: any[] = [];
 
-  // console.log('snapshots in ActionContainer.jsx', snapshots);
 
   function findDiff(index) {
     const statelessCleanning = (obj: {
@@ -68,14 +67,10 @@ function ActionContainer(props) {
     };
     // displays stateful data
     const previousDisplay = statelessCleanning(snapshots[index - 1]);
-    // console.log('this is previousDisplay', previousDisplay);
     const delta = diff(previousDisplay, snapshots[index]);
-    // console.log('this is delta', delta);
     const changedState = findStateChangeObj(delta);
-    // console.log('this is changedState in ActionContainer.tsx', changedState);
     const html = formatters.html.format(changedState[0]);
     const output = ReactHtmlParser(html);
-    // console.log('this is output', output);
     return output;
   }
 
@@ -105,7 +100,6 @@ function ActionContainer(props) {
     index: number;
     children?: [];
   }) => {
-    // console.log('hello');
     if (
       obj.stateSnapshot.children.length > 0
       && obj.stateSnapshot.children[0]
@@ -171,8 +165,6 @@ function ActionContainer(props) {
         componentData: { actualDuration: number } | undefined;
       },
     ) => {
-      // console.log('snapshots', snapshots);
-      console.log('snapshot', snapshot);
       const { index } = snapshot;
       const selected = index === viewIndex;
       const last = viewIndex === -1 && index === hierarchyArr.length - 1;

src/app/containers/MainContainer.tsx

@@ -18,7 +18,6 @@ const mixpanel = require('mixpanel').init('12fa2800ccbf44a5c36c37bc9776e4c0', {
   debug: false,
   protocol: 'https',
 });
-console.log('store', useStoreContext);
 function MainContainer(): any {
   const [store, dispatch] = useStoreContext();
   const { tabs, currentTab, port: currentPort } = store;

src/app/reducers/mainReducer.js

@@ -17,11 +17,8 @@ export default (state, action) => produce(state, draft => {
   const findName = (index, obj) => {
     // eslint-disable-next-line eqeqeq
     if (obj && obj.index == index) {
-      // obj.name = obj.index + 1
-      // console.log('about to return');
       return obj.name;
     }
-    // console.log('we returned why r u still here');
     const objChildArray = [];
     if (obj) {
       // eslint-disable-next-line no-restricted-syntax
@@ -88,11 +85,6 @@ export default (state, action) => produce(state, draft => {
         // finds the name by the newIndex parsing through the hierarchy to send to background.js the current name in the jump action
         const nameFromIndex = findName(newIndex, hierarchy);
 
-        // console.log('hierarchy', JSON.stringify(hierarchy));
-        // console.log('snapshots', JSON.stringify(snapshots));
-        // console.log('newIndex', newIndex);
-        // console.log('nameFromIndex', nameFromIndex);
-        // console.log('currentTab in slider', currentTab);
         port.postMessage({
           action: 'jumpToSnap',
           payload: snapshots[newIndex],
@@ -159,9 +151,7 @@ export default (state, action) => produce(state, draft => {
       // finds the name by the action.payload parsing through the hierarchy to send to background.js the current name in the jump action
       const nameFromIndex = findName(action.payload, hierarchy);
       // nameFromIndex is a number based on which jump button is pushed
-      // console.log('action.payload', action.payload);
-      // console.log('hierarchy', hierarchy);
-      // console.log('hierarchy', JSON.stringify(hierarchy));
+
       port.postMessage({
         action: 'jumpToSnap',
         payload: snapshots[action.payload],

src/app/store.tsx

@@ -3,6 +3,4 @@ import React, { useContext } from 'react';
 
 export const StoreContext = React.createContext();
 
-export const useStoreContext:any = () => useContext(StoreContext);
-
-// console.log('store in store', StoreContext);
+export const useStoreContext:any = () => useContext(StoreContext);

src/backend/helpers.ts

@@ -75,9 +75,7 @@ export const getHooksNames = (elementType: string): Array<string> => {
   // Initialize empty object to store the setters and getter
   let ast: any;
   try {
-    // console.log('hello');
     ast = JSXParser.parse(elementType);
-    // console.log('ast1', ast);
   } catch (e) {
     return ['unknown'];
   }
@@ -86,10 +84,8 @@ export const getHooksNames = (elementType: string): Array<string> => {
 
   // Begin search for hook names, only if ast has a body property.
   while (Object.hasOwnProperty.call(ast, 'body')) {
-    // console.log('body', body);
     let tsCount = 0; // Counter for the number of TypeScript hooks seen (to distinguish in masterState)
     ast = ast.body;
-    // console.log('ast.body', ast);
 
     // Statements get all the names of the hooks. For example: useCount, useWildcard, ...
     const statements: Array<string> = [];
@@ -104,7 +100,6 @@ export const getHooksNames = (elementType: string): Array<string> => {
       // Traverse through the function's funcDecs and Expression Statements
       body.forEach((elem: any) => {
         // Hooks will always be contained in a variable declaration
-        // console.log('elem', elem);
         if (elem.type === 'VariableDeclaration') {
           elem.declarations.forEach((hook: any) => {
             // Parse destructured statements pair
@@ -132,10 +127,8 @@ export const getHooksNames = (elementType: string): Array<string> => {
         }
       });
       statements.forEach((el, i) => {
-        // console.log('in statements');
         if (el.match(/_use/)) hooksNames[el] = statements[i + 1];
       });
-      // console.log('statements', statements);
     });
     return Object.values(hooksNames);
   }

src/backend/index.ts

@@ -33,7 +33,6 @@ const timeJump = timeJumpStart(snapShot, mode);
 window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
   switch (action) {
     case 'jumpToSnap':
-      // console.log('payload', 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

@@ -90,12 +90,10 @@ function sendSnapshot(snap: Snapshot, mode: Mode): void {
   if (mode.jumping || mode.paused) return;
   // If there is no current tree  creates a new one
   if (!snap.tree) {
-    // console.log('in sendSnapshot');
     snap.tree = new Tree('root', 'root');
   }
-  // console.log('cleantreecopy', snap);
   const payload = snap.tree.cleanTreeCopy();
-  // if it's Recoil - run different actions?
+  // if it's Recoil - run different actions
   if (isRecoil) {
     // getRecoilState()
     payload.atomsComponents = atomsComponents;
@@ -261,7 +259,6 @@ function createTree(
 // check to see if we can get the information we were looking for
   if (tag === 5) {
     try {
-      // console.log(elementType.toString());
       if (memoizedProps.children[0]._owner.memoizedProps !== undefined) {
         const propsData = memoizedProps.children[0]._owner.memoizedProps;
         const newPropData = convertDataToString(propsData, tree.componentData.props ? tree.componentData.props : null);
@@ -271,7 +268,6 @@ function createTree(
         };
       }
     } catch (error) {
-      // console.log('this is the error', error);
     }
   }
 
@@ -390,15 +386,13 @@ function createTree(
     && (tag === 0 || tag === 1 || tag === 2 || tag === 10)
     && isRecoil === false
   ) {
-    // console.log('memoizedState', memoizedState);
     if (memoizedState.queue) {
       // Hooks states are stored as a linked list using memoizedState.next,
       // so we must traverse through the list and get the states.
       // We then store them along with the corresponding memoizedState.queue,
       // which includes the dispatch() function we use to change their state.
       const hooksStates = traverseHooks(memoizedState);
       const hooksNames = getHooksNames(elementType.toString());
-      // console.log('hooksNames', hooksNames);
 
       hooksStates.forEach((state, i) => {
         hooksIndex = componentActionsRecord.saveNew(
@@ -407,7 +401,6 @@ function createTree(
         );
         // why is this re-writing componentData.hooksIndex every time? instead, should remove from loop and try to re-write it to be whichever state is being updated
         componentData.hooksIndex = hooksIndex;
-        // console.log('componentData.hooksIndex inside loop', componentData.hooksIndex);
         if (!newState) {
           newState = { hooksState: [] };
         // }
@@ -416,12 +409,8 @@ function createTree(
         }
         // newState[hooksNames[i]] = state.state;
         newState.hooksState.push({ [hooksNames[i]]: state.state });
-        // console.log('newState.hooksState', newState.hooksState);
         componentFound = true;
       });
-      // console.log('componentData.hooksIndex after', componentData.hooksIndex);
-      // console.log('hooksStates', hooksStates);
-      // console.log('hooksNames', hooksNames);
     }
   }
 
@@ -498,7 +487,6 @@ function createTree(
     }
     // checking if tree fromSibling is true
     if (fromSibling) {
-      // console.log('stateinfromSibling', newState);
       newNode = tree.addSibling(
         newState,
         elementType ? elementType.name : 'nameless',
@@ -551,13 +539,9 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
   return () => {
     // react devtools global hook is a global object that was injected by the React Devtools content script, allows access to fiber nodes and react version
     const devTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-    // console.log('devTools', devTools);
     const reactInstance = devTools ? devTools.renderers.get(1) : null;
-    // console.log('reactInstance', reactInstance);
     // reactInstance returns an object of the react
     fiberRoot = devTools.getFiberRoots(1).values().next().value;
-    // console.log('fiberRoot', fiberRoot);
-    // console.log('snap', snap);
     const throttledUpdateSnapshot = throttle(
       () => {
         updateSnapShotTree(snap, mode);

src/backend/masterState.ts

@@ -18,7 +18,6 @@ export default {
   componentActionsRecord,
   saveNew: (state, component): number => {
     componentActionsRecord[index] = { state, component };
-    // console.log('componentActionsRecord', componentActionsRecord);
     index++;
     return index - 1;
   },

src/backend/timeJump.ts

@@ -25,9 +25,6 @@ export default (origin, mode) => {
   // Recursively change state of tree
   // Set the state of the origin tree if the component is stateful
   function jump(target, firstCall = false) {
-    // console.log('componentActionsRecord', componentActionsRecord);
-    // console.log('origin', origin);
-    // console.log('target', target);
     if (!target) return;
     if (target.state === 'stateless') {
       target.children.forEach(child => jump(child));

src/backend/tree.ts

@@ -104,20 +104,15 @@ class Tree {
 
   addChild(state: string | {}, name: string, componentData: {}, rtid: any, recoilDomNode: any): Tree {
     const uniqueName = this.checkForDuplicates(name);
-    // console.log('state in addChild', state);
     const newChild: Tree = new Tree(state, uniqueName, componentData, rtid, recoilDomNode);
-    // console.log('newChild', newChild);
     newChild.parent = this;
     this.children.push(newChild);
     return newChild;
   }
 
   addSibling(state: string | {}, name: string, componentData: {}, rtid: any, recoilDomNode: any): Tree {
     const uniqueName = this.checkForDuplicates(name);
-    // console.log('state in addSibling', state);
     const newSibling: Tree = new Tree(state, uniqueName, componentData, rtid, recoilDomNode);
-    // console.log('sibTree', newSibling);
-    // console.log('newSibling', newSibling);
     newSibling.parent = this.parent;
     this.parent.children.push(newSibling);
     return newSibling;

src/extension/background.js

@@ -57,7 +57,6 @@ class Node {
     // marks from what branch this node is originated
     this.branch = tabObj.currBranch;
     this.stateSnapshot = obj;
-    // console.log('stateSnapshot', this.stateSnapshot);
     this.children = [];
   }
 }
@@ -161,11 +160,9 @@ chrome.runtime.onConnect.addListener(port => {
     switch (action) {
       case 'import': // create a snapshot property on tabId and set equal to tabs object
         // may need do something like filter payload from stateless
-        // console.log('import switch');
         tabsObj[tabId].snapshots = payload;
         return true;
       case 'emptySnap':
-        // console.log('emptySnap switch');
         // activates empty mode
         tabsObj[tabId].mode.empty = true;
         // records snapshot of page initial state
@@ -202,7 +199,6 @@ chrome.runtime.onConnect.addListener(port => {
         tabsObj[tabId].mode.persist = payload;
         return true;
       case 'jumpToSnap':
-        // console.log('jumpToSnap switch');
         chrome.tabs.sendMessage(tabId, msg);
         return true; // attempt to fix message port closing error, consider return Promise
       default:
@@ -320,13 +316,11 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     case 'recordSnap': {
       const sourceTab = tabId;
       tabsObj[tabId].webMetrics = metrics;
-      console.log('snapshots', tabsObj[tabId].snapshots);
       if (!firstSnapshotReceived[tabId]) {
         firstSnapshotReceived[tabId] = true;
         reloaded[tabId] = false;
         tabsObj[tabId].webMetrics = metrics;
         tabsObj[tabId].snapshots.push(request.payload);
-        // console.log('req.payload', request.payload);
         sendToHierarchy(
           tabsObj[tabId],
           new Node(request.payload, tabsObj[tabId]),