deleted console logs

Author: jrosengrant

src/app/components/App.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {  MemoryRouter as Router  } from 'react-router-dom';
+import { MemoryRouter as Router } from 'react-router-dom';
 import MainContainer from '../containers/MainContainer';
 import { ThemeProvider } from '@mui/material/styles';
 import theme from './theme';
@@ -15,7 +15,6 @@ function App(): JSX.Element {
     <ThemeProvider theme={theme}>
       <Router>
         {/* we wrap our application with the <Router> tag so that all components that are nested will have the react-router context */}
-        {console.log('App reloaded', new Date().toLocaleString())}
         <MainContainer />
       </Router>
     </ThemeProvider>

src/app/components/StateRoute/History.tsx

@@ -42,7 +42,6 @@ function History(props: Record<string, unknown>): JSX.Element {
 
   const svgRef = React.useRef(null);
   const root = JSON.parse(JSON.stringify(hierarchy)); // why do we stringify and then parse our hierarchy back to JSON? (asked 7/31/23)
-  console.log('history root: ', root);
   // setting the margins for the Map to render in the tab window.
   const innerWidth: number = totalWidth - margin.left - margin.right;
   const innerHeight: number = totalHeight - margin.top - margin.bottom - 60;
@@ -171,15 +170,13 @@ function History(props: Record<string, unknown>): JSX.Element {
   const makeD3Tree = () => {
     const svg = d3.select(svgRef.current); // d3.select Selects the first element/node that matches svgRef.current. If no element/node match returns an empty selection. If multiple elements/nodes match the selector, only the first matching element/node (in document order) will be selected.
     svg.selectAll('*').remove(); // Selects all elements. The elements will be selected in document order (top-to-bottom). We then remove the selected elements/nodes from the DOM. This is important as to ensure that the SVG is empty before rendering the D3 based visualization to avoid interference/overlap with any previously rendered content.
-    console.log('makeD3Tree initial svgRef: ', svgRef);
     const tree = (data) => {
       // function that takes in data and turns it into a d3 tree.
       const treeRoot = d3.hierarchy(data); // 'd3.hierarchy' constructs a root node from the specified hierarchical data.
       return d3.tree().size([innerWidth, innerHeight])(treeRoot); // d3.tree creates a new tree layout with a size option of innerWidth (~line 41) and innerHeight (~line 42). We specify our new tree layout's root as 'treeRoot' which assigns an x and y property to each node to represent an [x, y] coordinate system.
     };
 
     const d3root = tree(root); // create a d3. tree from our root
-    console.log('d3root: ', d3root);
     const currNode = labelCurrentNode(d3root); // iterate through our nodes and apply a color property
 
     const g = svg //serves as a container for the nodes and links within the D3 Visualization of the tree
@@ -314,7 +311,6 @@ function History(props: Record<string, unknown>): JSX.Element {
   };
 
   useEffect(() => {
-    console.log('currLocation: ', currLocation);
     makeD3Tree();
   }, [root /*, currLocation*/]); // if the 'root' or 'currLocation' changes, re-build the D3 Tree
 

src/app/components/StateRoute/PerformanceVisx/PerformanceVisx.tsx

@@ -193,8 +193,6 @@ const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
   const [route, setRoute] = useState('All Routes');
   const [snapshot, setSnapshot] = useState('All Snapshots');
 
-  console.log('Performance tab has loaded!');
-
   getActions();
 
   useEffect(() => {
@@ -246,7 +244,6 @@ const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
   const renderForTutorial = () => {
     // This will redirect to the proper tabs during the tutorial
     // Updated redirect to Navigate v23 redirect no longer supported in react router dom after v6
-    console.log(currentTabInApp);
     if (currentTabInApp === 'performance') return <Navigate to='/performance/' />;
     if (currentTabInApp === '/performance-comparison')
       return <Navigate to='/performance/comparison' />;

src/app/components/SwitchApp.tsx

@@ -18,7 +18,6 @@ const SwitchAppDropdown = (): JSX.Element => {
   const { currentTab, tabs }: MainState = useSelector((state: RootState) => state.main);
 
   const tabsArray: {}[] = []; // tabsArray is an empty array that will take objects as it's elements
-  console.log('switchAppDropdown; currentTab: ', currentTab, 'tabs: ', tabs);
   Object.keys(tabs).forEach((tab) => {
     // We populate our 'tabsArray' with objects derived from the 'tab' that is currently being iterated on.
     tabsArray.unshift({ value: tab, label: tabs[tab].title });

src/app/containers/ErrorContainer.tsx

@@ -23,14 +23,7 @@ function ErrorContainer(props: ErrorContainerProps): JSX.Element {
   const titleTracker = useRef(currentTitle); // useRef returns an object with a property 'initialValue' and a value of whatever was passed in. This allows us to reference a value that's not needed for rendering
   const timeout = useRef(null);
   const { port } = props;
-  console.log(
-    'ErrorContainer state variables: tabs status: ',
-    JSON.stringify(tabs[currentTab]?.status),
-    'currentTab: ',
-    currentTab,
-    'currentTitle: ',
-    currentTitle,
-  );
+
   // function that launches the main app
   function launch(): void {
     dispatch(launchContentScript(tabs[currentTab]));
@@ -58,17 +51,16 @@ function ErrorContainer(props: ErrorContainerProps): JSX.Element {
   // hook that sets timer while waiting for a snapshot from the background script, resets if the tab changes/reloads
   useEffect(() => {
     if (tabs[currentTab])
-      console.log('ErrorContainer useEffect fired, ', JSON.stringify(tabs[currentTab]?.status));
-    // We declare a function
-    function setLoadingArray(i: number, value: boolean) {
-      // 'setLoadingArray' checks an element in our 'loadingArray' local state and compares it with passed in boolean argument. If they don't match, we update our local state replacing the selected element with the boolean argument
-      if (loadingArray[i] !== value) {
-        // this conditional helps us avoid unecessary state changes if the element and the value are already the same
-        const loadingArrayClone = [...loadingArray];
-        loadingArrayClone[i] = value;
-        setLoading(loadingArrayClone);
+      // We declare a function
+      function setLoadingArray(i: number, value: boolean) {
+        // 'setLoadingArray' checks an element in our 'loadingArray' local state and compares it with passed in boolean argument. If they don't match, we update our local state replacing the selected element with the boolean argument
+        if (loadingArray[i] !== value) {
+          // this conditional helps us avoid unecessary state changes if the element and the value are already the same
+          const loadingArrayClone = [...loadingArray];
+          loadingArrayClone[i] = value;
+          setLoading(loadingArrayClone);
+        }
       }
-    }
 
     if (titleTracker.current !== currentTitle) {
       // if the current tab changes/reloads, we reset loadingArray to it's default [true, true, true]
@@ -102,23 +94,6 @@ function ErrorContainer(props: ErrorContainerProps): JSX.Element {
       timeout.current = setTimeout(() => {
         setLoadingArray(1, false);
       }, 3000); // increased from 1500
-      // let devTools;
-      // while (!devTools) {
-      //   devTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-      // }
-      // console.log('ErrorContainer react devtools: ', devTools);
-      // // If React Devtools is not installed, object will be undefined.
-      // if (!devTools) return;
-      // // If React Devtools is installed, send a message to front end.
-
-      // console.log('ErrorContainer react devtools check passed');
-      // status.reactDevToolsInstalled = true;
-
-      // console.log('ErrorContainer attempting reinitialize');
-      // port.postMessage({
-      //   action: 'reinitialize',
-      //   tabId: currentTab,
-      // });
       setLoadingArray(1, false);
     }
     if (loadingArray[1] === false && status.reactDevToolsInstalled === true) {

src/app/containers/MainContainer.tsx

@@ -28,19 +28,6 @@ function MainContainer(): JSX.Element {
   const dispatch = useDispatch();
 
   const { currentTab, tabs, port }: MainState = useSelector((state: RootState) => state.main);
-  console.log(
-    'Redux state at render: ',
-    useSelector((state: RootState) => state.main),
-  );
-  console.log(
-    'MainContainer state at render: tabs: ',
-    JSON.stringify(tabs[currentTab]?.status),
-    // tabs[currentTab]?.status,
-    'port: ',
-    port?.name,
-    'time: ',
-    new Date().toLocaleString(),
-  );
   //JR: check connection status
   const { connectionStatus }: MainState = useSelector((state: RootState) => state.main);
 
@@ -88,16 +75,6 @@ function MainContainer(): JSX.Element {
     // const { action, payload, sourceTab } = message;
     let maxTab: number;
 
-    console.log(
-      'MainContainer received message inside of the port messageListener. action: ',
-      action,
-      'payload: ',
-      // @ts-ignore
-      JSON.stringify(payload[Object.keys(payload)[0]]?.status),
-      payload,
-      'sourceTab: ',
-      sourceTab,
-    );
     if (!sourceTab && action !== 'keepAlive') {
       // if the sourceTab doesn't exist or is 0 and it is not a 'keepAlive' action
       const tabsArray: Array<string> = Object.keys(payload); // we create a tabsArray of strings composed of keys from our payload object
@@ -148,18 +125,11 @@ function MainContainer(): JSX.Element {
 
   // useEffect(() => {
   async function awaitPortConnection() {
-    console.log('MainContainer state view of port at start of useEffect: ', port);
     if (port) return; // only open port once so if it exists, do not run useEffect again
 
     // Connect ot port and assign evaluated result (obj) to currentPort
     const currentPort = await chrome.runtime.connect({ name: 'panel' });
 
-    // JR: why are we removing the listener just to readd it? logging here
-    // console.log('messageListener before removing: ', messageListener);
-    // console.log(
-    //   'currentPort hasListener? before removing: ',
-    //   currentPort.onMessage.hasListener(messageListener),
-    // );
     // If messageListener exists on currentPort, remove it
     while (currentPort.onMessage.hasListener(messageListener))
       currentPort.onMessage.removeListener(messageListener);

src/app/slices/mainSlice.ts

@@ -41,8 +41,6 @@ export const mainSlice = createSlice({
       const { tabs, currentTab, port } = state;
 
       port.postMessage({ action: 'emptySnap', tabId: currentTab }); //communicate with background.js (service worker)
-      console.log('emptySnapshots tabs: ', tabs);
-      console.log('emptySnapshots currentTab: ', currentTab);
       // properties associated with timetravel + seek bar
       tabs[currentTab].sliderIndex = 0;
       tabs[currentTab].viewIndex = 0;
@@ -103,9 +101,6 @@ export const mainSlice = createSlice({
         tabs[currentTab] || {};
       const { payload } = action;
 
-      console.log('mainSlice initialConnect reducer fired, ', payload),
-        'time: ',
-        new Date().toLocaleString();
       Object.keys(payload).forEach((tab) => {
         // check if tab exists in memory
         // add new tab
@@ -138,33 +133,13 @@ export const mainSlice = createSlice({
     setTab: (state, action) => {
       const { tabs, currentTab } = state;
       const { mode } = tabs[currentTab] || {};
-      // console.log(
-      //   'mode test. mode exists? ',
-      //   !!mode,
-      //   'optional chained mode return value: ',
-      //   mode?.paused,
-      // );
-      console.log(
-        'mainSlice setTab reducer received a payload. mode: ',
-        JSON.stringify(mode),
-        'payload: ',
-        action.payload,
-      );
       if (!mode?.paused) {
         if (typeof action.payload === 'number') {
           state.currentTab = action.payload;
           return;
         } else if (typeof action.payload === 'object') {
           state.currentTab = action.payload.tabId;
           if (action.payload?.title) state.currentTitle = action.payload.title;
-          console.log(
-            'mainSlice setTab successful! state.currentTab: ',
-            state.currentTab,
-            'state.currentTitle: ',
-            state.currentTitle,
-            'state.tabs[currentTab].status: ',
-            JSON.stringify(state.tabs[currentTab]?.status),
-          );
           return;
         }
       }
@@ -180,15 +155,8 @@ export const mainSlice = createSlice({
 
       if (tabs[currentTab]) {
         const { reactDevToolsInstalled } = payload[currentTab].status;
-        console.log(reactDevToolsInstalled);
         // JR 12.20. 9.47pm this was not applying to state before
         state.tabs[currentTab].status.reactDevToolsInstalled = reactDevToolsInstalled;
-        console.log(
-          'devTools updated state: ',
-          JSON.stringify(state.tabs[currentTab].status),
-          'time: ',
-          new Date().toLocaleString(),
-        );
       }
     },
 
@@ -197,15 +165,8 @@ export const mainSlice = createSlice({
       const { tabs, currentTab } = state;
 
       if (tabs[currentTab]) {
-        console.log(tabs[currentTab], payload[currentTab]);
         // JR 12.20. 9.47pm this was not applying to state before
         state.tabs[currentTab].status.targetPageisaReactApp = true;
-        console.log(
-          'aReactApp updated state: ',
-          JSON.stringify(state.tabs[currentTab].status),
-          'time: ',
-          new Date().toLocaleString(),
-        );
       }
     },
 
@@ -230,19 +191,8 @@ export const mainSlice = createSlice({
 
     changeView: (state, action) => {
       const { tabs, currentTab } = state;
-      console.log(
-        'changeView tabs: ',
-        JSON.stringify(tabs),
-        'currentTab: ',
-        currentTab,
-        'tabs[currentTab]: ',
-        tabs[currentTab],
-      );
-      console.log(tabs);
-      console.log('changeView state: ', state);
       const { viewIndex } = tabs[currentTab] || {};
-      console.log('changeView viewIndex: ', viewIndex);
-      console.log('changeView action.payload: ', action.payload);
+
       // unselect view if same index was selected
       tabs[currentTab].viewIndex = viewIndex === action.payload ? -1 : action.payload;
     },
@@ -268,7 +218,6 @@ export const mainSlice = createSlice({
 
     setCurrentTabInApp: (state, action) => {
       state.currentTabInApp = action.payload;
-      console.log('mainSlice currentTabInApp: ', state.currentTabInApp);
     },
 
     pause: (state) => {
@@ -398,7 +347,6 @@ export const mainSlice = createSlice({
     toggleMode: (state, action) => {
       const { port, tabs, currentTab } = state;
       const { mode } = tabs[currentTab] || {};
-      console.log('toggleMode current mode destructured from tabs[currentTab]: ', mode);
       mode[action.payload] = !mode[action.payload];
       const newMode = mode[action.payload];
       let actionText;

src/backend/index.ts

@@ -12,8 +12,6 @@ import timeJumpInitialization from './controllers/timeJump';
 import { Snapshot, Status, MsgData } from './types/backendTypes';
 import routes from './models/routes';
 
-console.log('backend script successfully injected ', new Date().toLocaleString())
-
 // -------------------------INITIALIZE MODE--------------------------
 /** Indicate if mode is jumping/not jumping or navigating during jumping */
 const mode: Status = {
@@ -42,7 +40,6 @@ linkFiberInit();
  * 3. If not navigate during jumping =>  invoke timeJump to update ReactFiber tree with cached data from the snapshot payload
  */
 window.addEventListener('message', async ({ data: { action, payload } }: MsgData) => {
-  console.log('index.ts window event listener data received: ', action, payload);
   switch (action) {
     case 'jumpToSnap':
       // Set mode to jumping to prevent snapShot being sent to frontEnd
@@ -60,7 +57,7 @@ window.addEventListener('message', async ({ data: { action, payload } }: MsgData
         await timeJump(payload); // * This sets state with given payload
       }
       break;
-    case 'reinitialize':
+      // case 'reinitialize':
       // console.log('backend reinitialize received, performing checks again');
       // let devTools;
       // while (!devTools) {
@@ -102,4 +99,4 @@ window.addEventListener('message', async ({ data: { action, payload } }: MsgData
     default:
       break;
   }
-});
+});