Merge branch 'dev' into ctstamper/migrate-Diff

Author: Christopher Stamper

src/app/FrontendTypes.ts

@@ -159,7 +159,7 @@ export interface ActionProps {
   last: boolean;
   index: number;
   sliderIndex: number;
-  dispatch: (a: { type: string; payload: unknown }) => void;
+  // dispatch: (a: { type: string; payload: unknown }) => void;
   displayName: string;
   componentName: string;
   componentData: { actualDuration: number } | undefined;

src/app/RTKslices.tsx

@@ -38,6 +38,8 @@ export const mainSlice = createSlice({
     //we removed the action parameter because we kept getting an error within actionContainer file on line 204
     //as it expected an argument or payload to be passed in
     emptySnapshots: (state) => {
+      console.log('emptySnapshots: ', current(state));
+
       const { tabs, currentTab } = state;
       const { port } = tabs[currentTab] || {};
 
@@ -58,6 +60,9 @@ export const mainSlice = createSlice({
       tabs[currentTab].currParent = 0;
       tabs[currentTab].currBranch = 1;
       tabs[currentTab].seriesSavedStatus = false;
+
+      console.log('emptySnapshots state end: ', current(state));
+
     },
     addNewSnapshots: (state, action) => {
       console.log('addNewSnapshots: ', state);
@@ -89,6 +94,8 @@ export const mainSlice = createSlice({
           };
         }
       });
+      console.log('addNewSnapshots: state end ', state);
+
     },
     initialConnect: (state, action) => {
       console.log('initialConnect: ', current(state));
@@ -111,13 +118,17 @@ export const mainSlice = createSlice({
       // only set first tab if current tab is non existent
       const firstTab = parseInt(Object.keys(payload)[0], 10);
       if (currentTab === undefined || currentTab === null) state.currentTab = firstTab;
-      
+      console.log('initialConnect: state end', current(state));
+
     },
     setPort: (state, action) => {
       console.log('setPort: ', current(state));
       console.log('ACTION', action);
 
       state.port = action.payload;
+
+      console.log('setPort: state end', current(state));
+
     },
     setTab: (state, action) => {
       console.log('setTab: ', current(state));
@@ -133,10 +144,14 @@ export const mainSlice = createSlice({
             state.currentTitle = action.payload.title;
         };
       }
+      console.log('setTab: state end', current(state));
+
     },
     deleteTab : (state, action) => {
       console.log('deleteTab: ', current(state));
       delete state.tabs[action.payload];
+      console.log('deleteTab: state end', current(state));
+
     },
     noDev: (state, action) => {
       console.log('noDev: ', current(state));
@@ -146,6 +161,8 @@ export const mainSlice = createSlice({
         const { reactDevToolsInstalled } = payload[currentTab].status;
         tabs[currentTab].status.reactDevToolsInstalled = reactDevToolsInstalled
       }
+      console.log('noDev: state end', current(state));
+
     },
     setCurrentLocation: (state, action) => {
       console.log('setCurrentLocation: ', current(state));
@@ -164,15 +181,21 @@ export const mainSlice = createSlice({
         tabs[currentTab].currLocation.stateSnapshot,
       );
       tabs[currentTab].currLocation = payload[currentTab].currLocation;
+      console.log('setCurrentLocation: state end', current(state));
+
     },
     changeView: (state, action) => {
+      console.log('changeView: ', current(state));
+
       const {tabs, currentTab} = state;
       const {viewIndex} = tabs[currentTab] || {};
 
       tabs[currentTab].viewIndex = viewIndex === action.payload ? -1 : action.payload;
+      console.log('changeView: state end', current(state));
+
     },
     changeSlider: (state, action) => {
-      console.log('CHANGE SLIDER');
+      console.log('changeSlider: ', current(state));
       const { port, currentTab, tabs } = state;
       const { hierarchy, snapshots } = tabs[currentTab] || {};
 
@@ -187,10 +210,14 @@ export const mainSlice = createSlice({
       });
 
       tabs[currentTab].sliderIndex = action.payload;
+      console.log('changeSlider: state end', current(state));
+
     },
     setCurrentTabInApp: (state, action) => {
-      console.log('SET CURRENT TAB IN APP');
+      console.log('setCurrentTabInApp: ', current(state));
       state.currentTabInApp = action.payload;
+      console.log('setCurrentTabInApp: state end', current(state));
+
     },
     pause: (state) => {
       console.log('pause: ', current(state));
@@ -201,6 +228,8 @@ export const mainSlice = createSlice({
       clearInterval(intervalId);
       tabs[currentTab].playing = false;
       tabs[currentTab].intervalId = null;
+      console.log('pause: state end', current(state));
+
     },
     launchContentScript: (state, action) => {
       console.log('launchContentScript: ', current(state));
@@ -214,8 +243,12 @@ export const mainSlice = createSlice({
         payload: action.payload,
         tabId: currentTab,
       });
+      console.log('launchContentScript: state end', current(state));
+
     },
     playForward: (state, action) => {
+      console.log('playForward: ', current(state));
+
       const {port, tabs, currentTab} = state
       const { hierarchy, snapshots, sliderIndex, intervalId } = tabs[currentTab] || {};
 
@@ -241,14 +274,21 @@ export const mainSlice = createSlice({
           tabs[currentTab].playing = false;
         }
       }
+      console.log('playForward: state end', current(state));
+
     },
     startPlaying : (state, action) => {
-      const {tabs, currentTab} = state
+      console.log('startPlaying: ', current(state));
 
+      const {tabs, currentTab} = state
       tabs[currentTab].playing = true;
       tabs[currentTab].intervalId = action.payload;
+      console.log('startPlaying: state end', current(state));
+
     },
     moveForward: (state, action) => {
+      console.log('moveForward: ', current(state));
+
       const {port, tabs, currentTab} = state
       const { hierarchy, snapshots, sliderIndex, intervalId } = tabs[currentTab] || {};
 
@@ -274,8 +314,12 @@ export const mainSlice = createSlice({
           tabs[currentTab].playing = false;
         }
       }
+      console.log('moveForward: state end', current(state));
+
     },
     moveBackward : (state, action) => {
+      console.log('moveBackward: ', current(state));
+
       const {port, tabs, currentTab} = state
       const { hierarchy, snapshots, sliderIndex, intervalId } = tabs[currentTab] || {};
 
@@ -298,47 +342,60 @@ export const mainSlice = createSlice({
         tabs[currentTab].sliderIndex = newIndex;
         tabs[currentTab].playing = false;
       }
+      console.log('moveBackward: state end', current(state));
+
     },
 
     resetSlider: (state) => {
+      console.log('resetSlider: ', current(state));
+
       const {port, tabs, currentTab} = state
       const { snapshots, sliderIndex} = tabs[currentTab] || {};
 
        // eslint-disable-next-line max-len
-      // resets name to 0 to send to background.js the current name in the jump action
-      port.postMessage({
-        action: 'jumpToSnap',
-        index: 0,
-        name: 0,
-        payload: snapshots[0],
-        tabId: currentTab,
-      });
-      tabs[currentTab].sliderIndex = 0;
+        // resets name to 0 to send to background.js the current name in the jump action
+        port.postMessage({
+          action: 'jumpToSnap',
+          index: 0,
+          name: 0,
+          payload: snapshots[0],
+          tabId: currentTab,
+        });
+        tabs[currentTab].sliderIndex = 0;
+        console.log('resetSlider: state end', current(state));
+
+
     },
 
 
 
     toggleMode: (state, action)=>{
-      console.log('Toggle Mode')
+      console.log('Toggle Mode: ', current(state));
+
       const { port, tabs, currentTab } = state;
       const {mode} = tabs[currentTab] || {};
       mode[action.payload] = !mode[action.payload];
-      const newMode = mode[action.payload];
-      let actionText;
-      switch (action.payload) {
-        case 'paused':
-          actionText = 'setPause';
-        default:
-      }
-      port.postMessage({
-        action: actionText,
-        payload: newMode,
-        tabId: currentTab,
-      });
+        const newMode = mode[action.payload];
+        let actionText;
+        switch (action.payload) {
+          case 'paused':
+            actionText = 'setPause';
+          default:
+        }
+        port.postMessage({
+          action: actionText,
+          payload: newMode,
+          tabId: currentTab,
+        });
+        console.log('Toggle Mode: state end', current(state));
+
+
     },
     importSnapshots: (state, action) => {
-      console.log('importSnapshots')
+      console.log('importSnapshots: ', current(state));
+
       const { port, tabs, currentTab } = state;
+
       // Log the value of tabs[currentTab].snapshots before the update
       port.postMessage({
         action: 'import',
@@ -367,7 +424,14 @@ export const mainSlice = createSlice({
       tabs[currentTab].currParent = savedSnapshot.currParent;
       tabs[currentTab].currBranch = savedSnapshot.Branch;
       tabs[currentTab].seriesSavedStatus = false;
+      console.log('importSnapshots: state end', current(state));
+
     },
+    tutorialSaveSeriesToggle: (state, action) => {
+      const { tabs, currentTab } = state;
+      tabs[currentTab] = { ...tabs[currentTab], seriesSavedStatus: action.payload }
+
+    }
   },
 })
 
@@ -391,7 +455,8 @@ export const {
   moveBackward,
   resetSlider,
   toggleMode,
-  importSnapshots
+  importSnapshots,
+  tutorialSaveSeriesToggle
 } =  mainSlice.actions
 
 

src/app/components/Action.tsx

@@ -4,8 +4,9 @@
 
 import React from 'react';
 import ReactHover, { Trigger, Hover } from 'react-hover';
-import { changeView, changeSlider } from '../actions/actions';
+import { changeView, changeSlider } from '../RTKslices';
 import { ActionProps, OptionsCursorTrueWithMargin } from '../FrontendTypes';
+import { useDispatch } from 'react-redux';
 
 /*
   This render's the individual snapshot components on the left side column
@@ -27,13 +28,18 @@ import { ActionProps, OptionsCursorTrueWithMargin } from '../FrontendTypes';
  */
 
 const Action = (props: ActionProps): JSX.Element => {
+
+  //here we are adding useSelector and useDispatch for RTK state conversion
+  const dispatch = useDispatch();
+
   // We destructure the 'props' that were passed into this component
   const {
     selected, // boolean on whether the current index is the same as the viewIndex in 'ActionContainer'
     last, // boolean on (whether the view index is less than 0) AND if (the index is the same as the last snapshot's index value in hierarchyArr) in 'ActionContainer'
     index, // from snapshot.index in "ActionContainer's" 'hierarchyArr'
     sliderIndex, // from tabs[currentTab] object in 'ActionContainer'
-    dispatch,
+    //commented out dispatch that was prop drilled as conversion to RTX might invalidate need for prop drilling to access dispatch
+    // dispatch,
     displayName, // from snapshot.displayName in "ActionContainer's" 'hierarchyArr'
     componentData, // from snapshot.componentData in "ActionContainer's" 'hierarchyArr'
     viewIndex, // from tabs[currentTab] object in 'ActionContainer'

src/app/components/MainSlider.tsx

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import Slider from 'rc-slider';
 import Tooltip from 'rc-tooltip';
-import { changeSlider, pause } from '../actions/actions';
-import { useStoreContext } from '../store';
+import { changeSlider, pause } from '../RTKslices';
+// import { useStoreContext } from '../store';
+import { useDispatch, useSelector } from 'react-redux';
 import { HandleProps, MainSliderProps } from '../FrontendTypes';
 
 const { Handle } = Slider; // component constructor of Slider that allows customization of the handle
@@ -28,11 +29,15 @@ const handle = (props: HandleProps): JSX.Element => {
 
 
 function MainSlider(props: MainSliderProps): JSX.Element {
+  const dispatch = useDispatch();
   const { snapshotsLength } = props; // destructure props to get our total number of snapshots
-  const [{ tabs, currentTab }, dispatch] = useStoreContext(); // we destructure the returned context object from the invocation of the useStoreContext function. Properties not found on the initialState object (dispatch) are from the useReducer function invocation in the App component
-  const { currLocation } = tabs[currentTab]; // we destructure the currentTab object
+  // const [{ tabs, currentTab }, dispatch] = useStoreContext(); // we destructure the returned context object from the invocation of the useStoreContext function. Properties not found on the initialState object (dispatch) are from the useReducer function invocation in the App component
   const [sliderIndex, setSliderIndex] = useState(0); // create a local state 'sliderIndex' and set it to 0. 
+  const { tabs, currentTab } = useSelector((state: any) => state.main);
+  const { currLocation } = tabs[currentTab]; // we destructure the currentTab object
 
+  //10/04/2023 -> line 35 useState is local, should we change this to handle our global state.
+  
   useEffect(() => {
     if (currLocation) { // if we have a 'currLocation'
       setSliderIndex(currLocation.index); // set our slider thumb position to the 'currLocation.index'

src/app/components/Tutorial.tsx

@@ -5,12 +5,13 @@
 import * as React from 'react';
 import { Component } from 'react';
 import 'intro.js/introjs.css';
-import { tutorialSaveSeriesToggle, setCurrentTabInApp } from '../actions/actions';
+// import { tutorialSaveSeriesToggle, setCurrentTabInApp } from '../actions/actions';
 import { TutorialProps, TutorialState, StepsObj } from '../FrontendTypes';
 import { Button } from '@mui/material';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 const { Steps } = require('intro.js-react'); //Must be required in. This enables compatibility with TS. If imported in, throws ts error of not rendering steps as a class component correctly. The package 'intro.js-react' is small React wrapper around Intro.js. The wrapper provides support for both steps and hints. https://introjs.com/docs/
-
+import { setCurrentTabInApp, tutorialSaveSeriesToggle } from '../RTKslices'
+import { useDispatch, useSelector } from 'react-redux';
 /*
   This is the tutorial displayed when the "How to use" button is clicked
   This needs to be a class component to be compatible with updateStepElement from intro.js
@@ -35,10 +36,13 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
   public refs: any;
 
   render(): JSX.Element {
-    const {
-      currentTabInApp, // 'currentTabInApp' from 'ButtonsContainer' after useStoreContext()
-      dispatch // 'dispatch' from 'ButtonsContainer' after useStoreContext()
-    } = this.props;
+    // const {
+    //   currentTabInApp, // 'currentTabInApp' from 'ButtonsContainer' after useStoreContext()
+    //   dispatch // 'dispatch' from 'ButtonsContainer' after useStoreContext()
+    // } = this.props;
+
+    const dispatch = useDispatch();
+    const currentTabInApp = useSelector((state: any) => state.main.currentTabInApp);
 
     // This updates the steps so that they can target dynamically rendered elements
     const onChangeHandler = (currentStepIndex: number) => { // takes in the current step and updates the tab[currentTab]'s seriesSavedStatus based on conditions and updates the element associated with the step.

src/app/containers/ActionContainer.tsx

@@ -137,7 +137,9 @@ function ActionContainer(props): JSX.Element {
           componentData={snapshot.componentData}
           selected={selected}
           last={last}
-          dispatch={dispatch}
+          //not sure if we need to prop drill dispatch anymore as we can import it directly within action component
+          //line 142 commented out for this reason above
+          // dispatch={dispatch}
           sliderIndex={sliderIndex}
           handleOnkeyDown={handleOnKeyDown}
           viewIndex={viewIndex}