Merge pull request #333 from open-source-labs/oliver/cleanup

Refactoring for v24 launch

package.json

@@ -32,6 +32,10 @@
     "url": "https://github.com/open-source-labs/reactime"
   },
   "contributors": [
+    "Jesse Guerrero",
+    "Oliver Cho",
+    "Eva Ury",
+    "Amy Yang",
     "Abaas Khorrami",
     "Alex Gomez",
     "Alexander Landeros",

src/app/components/StateRoute/AxMap/AxMap.tsx

@@ -1,41 +1,39 @@
-import React from "react";
+import React from 'react';
 import { ParentSize } from '@visx/responsive';
-import AxTree from "./Ax";
-import { AxContainer } from "../../../FrontendTypes";
+import AxTree from './Ax';
+import { AxContainer } from '../../../FrontendTypes';
 
 // Container to hold AxTree. AxTree is conditionally rendered based on the state of the setter function "showTree" in StateRoute
 
 const AxContainer = (props: AxContainer) => {
-    const {
-        axSnapshots, // from 'tabs[currentTab]' object in 'MainContainer'
-        snapshot, // from 'tabs[currentTab]' object in 'MainContainer'
-        snapshots, // from 'tabs[currentTab].snapshotDisplay' object in 'MainContainer'
-        currLocation, // from 'tabs[currentTab]' object in 'MainContainer'
-      } = props;
-      
-    return (
-    <div style={{height: '90vh'}}>
+  const {
+    axSnapshots, // from 'tabs[currentTab]' object in 'MainContainer'
+    snapshot, // from 'tabs[currentTab]' object in 'MainContainer'
+    snapshots, // from 'tabs[currentTab].snapshotDisplay' object in 'MainContainer'
+    currLocation, // from 'tabs[currentTab]' object in 'MainContainer'
+  } = props;
+
+  return (
+    <div style={{ height: '90vh' }}>
       <ParentSize className='componentMapContainer'>
         {({ width, height }) => {
           // eslint-disable-next-line react/prop-types
           const maxHeight: number = 1200;
           const h = Math.min(height, maxHeight);
-          console.log('h: ', h);
-          console.log('width', width)
           return (
-              <AxTree
-                axSnapshots={axSnapshots}
-                snapshot={snapshot}
-                snapshots={snapshots}
-                currLocation={currLocation}
-                width={width}
-                height={h}
-              />
+            <AxTree
+              axSnapshots={axSnapshots}
+              snapshot={snapshot}
+              snapshots={snapshots}
+              currLocation={currLocation}
+              width={width}
+              height={h}
+            />
           );
         }}
       </ParentSize>
     </div>
-    )
-}
+  );
+};
 
-export default AxContainer;
+export default AxContainer;

src/app/components/StateRoute/AxMap/ToolTipDataDisplay.tsx

@@ -44,8 +44,8 @@ const ToolTipDataDisplay = ({ containerName, dataObj }) => {
     //ignored reasons here
     //&& key = name? / order?
     for (const key in dataObj) {
-      console.log('keys in dataObj in tooltiptotalDisplay: ', key);
-      if(key === 'properties' || key === 'ignored' || key === 'ignoredReasons'){// loop through properties, adding them to the data object
+      if (key === 'properties' || key === 'ignored' || key === 'ignoredReasons') {
+        // loop through properties, adding them to the data object
 
         if (typeof dataObj[key] === 'string') {
           //if 'key' is ignored, put the ignored key and its value on the data object

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -109,7 +109,6 @@ export default function ComponentMap({
     hideTooltip, // function to close a tooltip
   } = useTooltip(); // returns an object with several properties that you can use to manage the tooltip state of your component
 
-  console.log('tooltipData component map: ', tooltipData);
   const {
     containerRef, // Access to the container's bounding box. This will be empty on first render.
     TooltipInPortal, // TooltipWithBounds in a Portal, outside of your component DOM tree

src/app/slices/mainSlice.ts

@@ -47,31 +47,17 @@ export const mainSlice = createSlice({
       tabs[currentTab].viewIndex = 0;
       tabs[currentTab].playing = false;
 
-      // REFACTORED TO HAVE CLEAR BUTTON KEEP CURRENT STATE OF DEMO APP RATHER THAN JUST THE LAST STATE RECORDED
-      // PRIOR IMPLEMENTATION WAS FAILING TO RESET STATE OF DEMO APP UPON CLEAR
-      // IF CHANGING, CHANGE BACKGROUND.JS TOO
-
-      // const lastSnapshot = tabs[currentTab].snapshots[tabs[currentTab].snapshots.length - 1]; // the most recent snapshot
-      // const lastAxSnapshot = tabs[currentTab].axSnapshots[tabs[currentTab].axSnapshots.length - 1]; // the most recent snapshot
-      const currSnapshot = tabs[currentTab].snapshots[tabs[currentTab].currLocation.index]; // the most recent snapshot
-      const currAxSnapshot = tabs[currentTab].axSnapshots[tabs[currentTab].currLocation.index]; // the most recent snapshot
-
-      // tabs[currentTab].hierarchy.stateSnapshot = { ...lastSnapshot }; // resets hierarchy to page last state recorded
-      // // not sure why shallow deep copy
-      // tabs[currentTab].hierarchy.axSnapshot = lastAxSnapshot; // resets hierarchy to page last state recorded
-      // tabs[currentTab].hierarchy.children = []; // resets hierarchy
-      // tabs[currentTab].snapshots = [lastSnapshot]; // resets snapshots to page last state recorded
-      // tabs[currentTab].axSnapshots = [lastAxSnapshot]; // resets snapshots to page last state recorded
-
-      tabs[currentTab].hierarchy.stateSnapshot = { ...currSnapshot }; // resets hierarchy to page last state recorded
+      const currSnapshot = tabs[currentTab].snapshots[tabs[currentTab].currLocation.index]; // current snapshot
+      const currAxSnapshot = tabs[currentTab].axSnapshots[tabs[currentTab].currLocation.index]; // current snapshot
+
+      tabs[currentTab].hierarchy.stateSnapshot = { ...currSnapshot }; // resets hierarchy to page current snapshot
       // not sure why shallow deep copy
-      tabs[currentTab].hierarchy.axSnapshot = currAxSnapshot; // resets hierarchy to page last state recorded
+      tabs[currentTab].hierarchy.axSnapshot = currAxSnapshot; // resets hierarchy to current snapshot
       tabs[currentTab].hierarchy.children = []; // resets hierarchy
-      tabs[currentTab].snapshots = [currSnapshot]; // resets snapshots to page last state recorded
-      tabs[currentTab].axSnapshots = [currAxSnapshot]; // resets snapshots to page last state recorded
+      tabs[currentTab].snapshots = [currSnapshot]; // resets snapshots to current snapshot
+      tabs[currentTab].axSnapshots = [currAxSnapshot]; // resets snapshots to current snapshot
 
-      // resets currLocation to page last state recorded
-      // tabs[currentTab].currLocation = tabs[currentTab].hierarchy;
+      // resets currLocation to current snapshot
       tabs[currentTab].index = 1;
       tabs[currentTab].currParent = 0;
       tabs[currentTab].currBranch = 1;

src/backend/controllers/timeJump.ts

@@ -49,12 +49,6 @@ async function updateReactFiberTree(
   targetSnapshot,
   circularComponentTable: Set<any> = new Set(),
 ): Promise<void> {
-  console.log(
-    'updateReactFiberTree: targetSnapshot:',
-    targetSnapshot,
-    'circularComponentTable:',
-    circularComponentTable,
-  );
   if (!targetSnapshot) return;
   // Base Case: if has visited, return
   if (circularComponentTable.has(targetSnapshot)) {

src/extension/background.js

@@ -358,9 +358,6 @@ chrome.runtime.onConnect.addListener((port) => {
 
       // emptySnap actions comes through when the user uses the 'clear' button on the front end to clear the snapshot history and move slider back to 0 position
       case 'emptySnap':
-        // REFACTORED TO HAVE CLEAR BUTTON KEEP CURRENT STATE OF DEMO APP RATHER THAN JUST THE LAST STATE RECORDED
-        // PRIOR IMPLEMENTATION WAS FAILING TO RESET STATE OF DEMO APP UPON CLEAR
-        // IF CHANGING, CHANGE MAINSLICE.JS TOO
         tabsObj[tabId].snapshots = [tabsObj[tabId].snapshots[tabsObj[tabId].currLocation.index]]; // reset snapshots to current page state
         tabsObj[tabId].hierarchy.children = []; // resets hierarchy
         tabsObj[tabId].hierarchy.stateSnapshot = {
@@ -372,7 +369,6 @@ chrome.runtime.onConnect.addListener((port) => {
           tabsObj[tabId].axSnapshots[tabsObj[tabId].currLocation.index],
         ]; // resets axSnapshots to current page state
         tabsObj[tabId].hierarchy.axSnapshot = tabsObj[tabId].axSnapshots[0]; // resets hierarchy to ax tree of current page state
-        // tabsObj[tabId].currLocation = tabsObj[tabId].hierarchy; // resets currLocation to page last state recorded
         tabsObj[tabId].index = 1; //reset index
         tabsObj[tabId].currParent = 0; // reset currParent
         tabsObj[tabId].currBranch = 1; // reset currBranch

src/extension/build/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Reactime",
-  "version": "23.0.0",
+  "version": "24.0.0",
   "devtools_page": "devtools.html",
   "description": "A Chrome extension that helps debug React applications by memorizing the state of components with every render.",
   "manifest_version": 3,