Merge pull request #7 from oslabs-beta/toggleRecordState

Created button to toggle whether to record state or ignore state changes. Added styling to the toggle record button. Updated Time Jump Sidebar view where toggle record button is hidden. Added comments for toggle record button

Author: kris-sorensen

README.fr.md

@@ -131,6 +131,10 @@ Après avoir cloné ce référentiel, les développeurs peuvent simplement exéc
 
 ## <b>Auteurs</b>
 
+- **Kris Sorensen** - [@kris-sorensen](https://github.com/kris-sorensen)
+- **Daljit Gill** - [@dgill05](https://github.com/dgill05)
+- **Ben Michareune** - [@bmichare](https://github.com/bmichare)
+- **Dane Corpion** - [@danecorpion](https://github.com/danecorpion)
 - **Becca Viner** - [@rtviner](https://github.com/rtviner)
 - **Caitlin Chan** - [@caitlinchan23](https://github.com/caitlinchan23)
 - **Kim Mai Nguyen** - [@Nkmai](https://github.com/Nkmai)

README.md

@@ -156,6 +156,11 @@ After cloning this repository, developers can simply run `npm run docs` at the r
 - [What time is it? Reactime!](https://medium.com/@liuedar/what-time-is-it-reactime-fd7267b9eb89)
 
 ## <b>Authors</b>
+
+- **Kris Sorensen** - [@kris-sorensen](https://github.com/kris-sorensen)
+- **Daljit Gill** - [@dgill05](https://github.com/dgill05)
+- **Ben Michareune** - [@bmichare](https://github.com/bmichare)
+- **Dane Corpion** - [@danecorpion](https://github.com/danecorpion)
 - **Harry Fox** - [@StackOverFlowWhereArtThou](https://github.com/StackOverFlowWhereArtThou)
 - **Nathan Richardson** - [@BagelEnthusiast](https://github.com/BagelEnthusiast)
 - **David Bernstein** - [@dangitbobbeh](https://github.com/dangitbobbeh)

README.rus.md

@@ -107,6 +107,10 @@ Reactime beta поддерживает приложения, написанны
 
 ## <b>Авторы</b>
 
+- **Kris Sorensen** - [@kris-sorensen](https://github.com/kris-sorensen)
+- **Daljit Gill** - [@dgill05](https://github.com/dgill05)
+- **Ben Michareune** - [@bmichare](https://github.com/bmichare)
+- **Dane Corpion** - [@danecorpion](https://github.com/danecorpion)
 - **Becca Viner** - [@rtviner](https://github.com/rtviner)
 - **Caitlin Chan** - [@caitlinchan23](https://github.com/caitlinchan23)
 - **Kim Mai Nguyen** - [@Nkmai](https://github.com/Nkmai)

src/app/components/ComponentMap.tsx

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

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[] = [];
 
@@ -125,24 +132,41 @@ function ActionContainer(props): JSX.Element {
     setActionView(true);
   }, [setActionView]);
 
+  // Function sends message to background.js which sends message to the content script
   const toggleRecord = () => {
     port.postMessage({
       action: 'toggleRecord',
+      tabId: currentTab,
     });
-    // change color of record button or switch svg/img file
+    // Record button's icon is being togggled on click
+    setRecordingActions(!recordingActions);
   };
 
   // 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"
+          id="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

@@ -30,15 +30,21 @@ function MainContainer(): any {
     setActionView(!actionView);
     const toggleElem = document.querySelector('aside');
     toggleElem.classList.toggle('no-aside');
+    // hides the record toggle button from Actions Container in Time Jump sidebar view
+    const recordBtn = document.getElementById('recordBtn');
+    if (recordBtn.style.display === 'none') {
+      recordBtn.style.display = 'flex';
+    } else {
+      recordBtn.style.display = 'none';
+    }
   };
-
+  // 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 +215,4 @@ function MainContainer(): any {
   );
 }
 
-export default MainContainer;
+export default MainContainer;

src/app/styles/components/_buttons.scss

@@ -321,14 +321,15 @@
 
 /* sidebar button open and closing functionality */
 aside {
-  width: 250px;
+  // width: 250px;
   background: #242529;
   color: #fff;
   transition: width 1s;
 }
 
 .no-aside {
   width: 30px;
+  margin-right: 15px;
 }
 
 .toggle {
@@ -352,8 +353,8 @@ aside {
 }
 
 .toggle i {
-  top: 46%;
-  left: 4%;
+  top: 8px;
+  left: 9px;
   display: block;
   background: $blue-brand;
 }

src/app/styles/layout/_actionContainer.scss

@@ -9,8 +9,18 @@
   color: #fffeff;
 }
 
-.recordBtn{
-  position: relative;
-  left: 80%;
-  // visibility: hidden;
+#recordBtn{
+  height: 100%;
+  display:flex;
+}
+
+.actionToolContainer{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#recordBtn .fa-regular{
+  height: 100%;
+  width: 28px;
 }

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;
       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).
@@ -40,16 +41,14 @@ window.addEventListener('message', msg => {
 // Listening for messages from the UI of the Reactime extension.
 chrome.runtime.onMessage.addListener(request => {
   const { action }: { action: string; } = request;
-  // this is only listening for Jump toSnap
-
   if (action) {
+    // Message being sent from background.js
+    // This is toggling the record button on Reactime when clicked
     if (action === 'toggleRecord') {
       isRecording = !isRecording;
     }
-
+    // this is only listening for Jump toSnap
     if (action === 'jumpToSnap') {
-      //
-      //
       chrome.runtime.sendMessage(request);
     }
     // After the jumpToSnap action has been sent back to background js,