Implemented toggle button in the Action Conatiner to pause recording of state changes

Author: dgill05

src/app/components/ComponentMap.tsx

@@ -188,7 +188,6 @@ export default function ComponentMap({
     //   }
     // };
     // inner(state);
-      
     // return result;
     // --------------------------------------------------------------------------------------------
     return ['stateful'];

src/app/components/PerformanceVisx.tsx

@@ -1,36 +1,19 @@
 /* eslint-disable guard-for-in */
 /* eslint-disable no-restricted-syntax */
 // @ts-nocheck
-<<<<<<< HEAD
-import React, { useState, useEffect } from 'react';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import { ParentSize } from '@visx/responsive';
-=======
 import React, { useState } from 'react';
->>>>>>> Reactime13.0
 import {
   MemoryRouter as Router,
   Route,
   NavLink,
   Switch,
   useLocation,
 } from 'react-router-dom';
-<<<<<<< HEAD
-import { Component } from 'react';
-import { render } from 'react-dom';
-import { Component } from 'react';
-=======
->>>>>>> Reactime13.0
 import RenderingFrequency from './RenderingFrequency';
 import BarGraph from './BarGraph';
 import BarGraphComparison from './BarGraphComparison';
 import BarGraphComparisonActions from './BarGraphComparisonActions';
 import { useStoreContext } from '../store';
-<<<<<<< HEAD
-// import snapshots from './snapshots';
-=======
-
->>>>>>> Reactime13.0
 /* NOTES
 Issue - Not fully compatible with recoil apps. Reference the recoil-todo-test.
 Barstacks display inconsistently...however, almost always displays upon initial test app load or
@@ -97,11 +80,6 @@ const collectNodes = (snaps, componentName) => {
       }
     }
   }
-<<<<<<< HEAD
-  // console.log('componentsResult looks like: ', componentsResult);
-  return componentsResult;
-};
-=======
 
   const finalResults = componentsResult.map((e, index) => {
     const name = Object.keys(e)[0];
@@ -111,7 +89,6 @@ const collectNodes = (snaps, componentName) => {
   return finalResults;
 };
 
->>>>>>> Reactime13.0
 /* DATA HANDLING HELPER FUNCTIONS */
 const traverse = (snapshot, data, snapshots, currTotalRender = 0) => {
   if (!snapshot.children[0]) return;
@@ -159,14 +136,7 @@ const traverse = (snapshot, data, snapshots, currTotalRender = 0) => {
 
 // Retrieve snapshot series data from Chrome's local storage.
 const allStorage = () => {
-<<<<<<< HEAD
-  // const values = [];
-  // const keys = Object.keys(localStorage);
-  let values = localStorage.getItem('project');
-  // values === null ? values = [] : values = JSON.parse(values) ;
-=======
   let values = localStorage.getItem('project')
->>>>>>> Reactime13.0
   values = values === null ? [] : JSON.parse(values);
   return values;
 };
@@ -201,14 +171,7 @@ const getPerfMetrics = (snapshots, snapshotsIds): {} => {
 /* EXPORT COMPONENT */
 const PerformanceVisx = (props: BarStackProps) => {
   // hook used to dispatch onhover action in rect
-<<<<<<< HEAD
-
-  const {
-    width, height, snapshots, hierarchy,
-  } = props;
-=======
   const { width, height, snapshots, hierarchy, } = props;
->>>>>>> Reactime13.0
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const [detailsView, setDetailsView] = useState('barStack');
   const [comparisonView, setComparisonView] = useState('barStack');

src/app/containers/ActionContainer.tsx

@@ -1,6 +1,11 @@
 // @ts-nocheck
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faToggleOff,
+  faToggleOn,
+} from '@fortawesome/free-solid-svg-icons';
 import Action from '../components/Action';
 import SwitchAppDropdown from '../components/SwitchApp';
 import { emptySnapshots, changeView, changeSlider } from '../actions/actions';
@@ -14,13 +19,15 @@ const resetSlider = () => {
 };
 
 function ActionContainer(props): JSX.Element {
-  const [{ tabs, currentTab }, dispatch] = useStoreContext();
+  const [{ tabs, currentTab, port }, dispatch] = useStoreContext();
   const {
     currLocation, hierarchy, sliderIndex, viewIndex, snapshots,
   } = tabs[currentTab];
   const {
-    toggleActionContainer, actionView, setActionView
+    toggleActionContainer, actionView, setActionView,
   } = props;
+  const [recordingActions, setRecordingActions] = useState(true);
+
   let actionsArr = [];
   const hierarchyArr: any[] = [];
 
@@ -128,21 +135,37 @@ function ActionContainer(props): JSX.Element {
   const toggleRecord = () => {
     port.postMessage({
       action: 'toggleRecord',
+      tabId: currentTab,
     });
+    setRecordingActions(!recordingActions);
     // change color of record button or switch svg/img file
   };
 
   // the conditional logic below will cause ActionContainer.test.tsx to fail as it cannot find the Empty button
   // UNLESS actionView={true} is passed into <ActionContainer /> in the beforeEach() call in ActionContainer.test.tsx
   return (
     <div id="action-id" className="action-container">
-      <div id="arrow">
-        <aside className="aside">
-          <a onClick={toggleActionContainer} className="toggle">
-            <i />
-          </a>
-        </aside>
-        {/* <button className="recordBtn" onClick={toggleRecord}>Record</button> */}
+      <div className="actionToolContainer">
+        <div id="arrow">
+          <aside className="aside">
+            <a onClick={toggleActionContainer} className="toggle">
+              <i />
+            </a>
+          </aside>
+
+        </div>
+        <a
+          type="button"
+          className="recordBtn"
+          onClick={toggleRecord}
+        >
+          <i />
+          {recordingActions ? (
+            <FontAwesomeIcon className="fa-regular" icon={faToggleOn} />
+          ) : (
+            <FontAwesomeIcon className="fa-regular" icon={faToggleOff} />
+          )}
+        </a>
       </div>
       {actionView ? (
         <div className="action-button-wrapper">

src/app/containers/MainContainer.tsx

@@ -31,14 +31,13 @@ function MainContainer(): any {
     const toggleElem = document.querySelector('aside');
     toggleElem.classList.toggle('no-aside');
   };
-
+  // let port;
   useEffect(() => {
     // only open port once
     if (currentPort) return;
 
     // open long-lived connection with background script
     const port = chrome.runtime.connect();
-
     // listen for a message containing snapshots from the background script
     port.onMessage.addListener(
       (message: {
@@ -209,4 +208,4 @@ function MainContainer(): any {
   );
 }
 
-export default MainContainer;
+export default MainContainer;

src/app/styles/layout/_actionContainer.scss

@@ -12,5 +12,6 @@
 .recordBtn{
   position: relative;
   left: 80%;
+  height: 100vw;
   // visibility: hidden;
-}
+}

src/extension/background.js

@@ -209,6 +209,9 @@ chrome.runtime.onConnect.addListener(port => {
       case 'jumpToSnap':
         chrome.tabs.sendMessage(tabId, msg);
         return true; // attempt to fix message port closing error, consider return Promise
+      case 'toggleRecord':
+        chrome.tabs.sendMessage(tabId, msg);
+        return true; // attempt to fix message port closing error, consider return Promise
       default:
         return true;
     }

src/extension/contentScript.ts

@@ -11,6 +11,7 @@ import {
 let firstMessage = true;
 // Listens for window messages (from the injected script on the DOM)
 let isRecording = true;
+
 window.addEventListener('message', msg => {
   // Event listener runs constantly based on actions
   // recorded on the test application from backend files (linkFiber.ts).
@@ -48,8 +49,6 @@ chrome.runtime.onMessage.addListener(request => {
     }
 
     if (action === 'jumpToSnap') {
-      //
-      //
       chrome.runtime.sendMessage(request);
     }
     // After the jumpToSnap action has been sent back to background js,