Merge branch 'dev' into jimmyFeat

Author: jimmally

src/app/RTKslices.tsx

@@ -202,6 +202,7 @@ export const mainSlice = createSlice({
       tabs[currentTab].playing = false;
       tabs[currentTab].intervalId = null;
     },
+
     playForward: (state, action) => {
       const {port, tabs, currentTab} = state
       const { hierarchy, snapshots, sliderIndex, intervalId } = tabs[currentTab] || {};
@@ -301,8 +302,60 @@ export const mainSlice = createSlice({
           tabId: currentTab,
         });
         tabs[currentTab].sliderIndex = 0;
-    }
+    },
+
+
 
+    toggleMode: (state, action)=>{
+      console.log('Toggle Mode')
+      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,
+        });
+    },
+    importSnapshots: (state, action) => {
+      console.log('importSnapshots')
+      const { port, tabs, currentTab } = state;
+              // Log the value of tabs[currentTab].snapshots before the update
+              port.postMessage({
+                action: 'import',
+                payload: action.payload,
+                tabId: currentTab,
+              });
+      
+              const savedSnapshot = action.payload;
+      
+              tabs[currentTab].sliderIndex = savedSnapshot.sliderIndex;
+              tabs[currentTab].viewIndex = savedSnapshot.viewIndex;
+              tabs[currentTab].playing = false;
+      
+              // resets hierarchy to page last state recorded
+              tabs[currentTab].hierarchy.stateSnapshot = savedSnapshot.hierarchy.stateSnapshot;
+      
+              // resets hierarchy
+              tabs[currentTab].hierarchy.children = savedSnapshot.hierarchy.children;
+      
+              // resets snapshots to page last state recorded
+              tabs[currentTab].snapshots = savedSnapshot.snapshots;
+      
+              // resets currLocation to page last state recorded
+              tabs[currentTab].currLocation = tabs[currentTab].hierarchy;
+              tabs[currentTab].index = savedSnapshot.index;
+              tabs[currentTab].currParent = savedSnapshot.currParent;
+              tabs[currentTab].currBranch = savedSnapshot.Branch;
+              tabs[currentTab].seriesSavedStatus = false;
+    }
 
   },
 })
@@ -324,7 +377,9 @@ export const {
   startPlaying,
   moveForward,
   moveBackward,
-  resetSlider
+  resetSlider,
+  toggleMode,
+  importSnapshots
 } =  mainSlice.actions
 
 

src/app/components/SwitchApp.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import Select from 'react-select';
-import { useStoreContext } from '../store';
-import { setTab } from '../actions/actions';
+//commented out for RTK
+// import { useStoreContext } from '../store'; 
+import { setTab } from '../RTKslices';
+//importing these methods for RTK
+import { useSelector, useDispatch } from 'react-redux';
 
 /*
   This is the dropdown menu on the left column above the 'clear' button and the state snapshots list. It allows us to switch between which website/application we are currently working on.
@@ -10,8 +13,13 @@ import { setTab } from '../actions/actions';
 */
 
 const SwitchAppDropdown = (): JSX.Element => {
-  const [{ currentTab, tabs }, 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
-  
+  //commented out to implement RTK
+  // const [{ currentTab, tabs }, 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
+    //here we are adding useSelector and useDispatch for RTK state conversion
+    const dispatch = useDispatch();
+    const currentTab = useSelector((state: any) => state.main.currentTab)
+    const tabs = useSelector((state: any) => state.main.tabs)  
+
   const tabsArray: {}[] = []; // tabsArray is an empty array that will take objects as it's elements
 
   Object.keys(tabs).forEach((tab) => { // We populate our 'tabsArray' with objects derived from the 'tab' that is currently being iterated on.

src/app/containers/ButtonsContainer.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
-import { importSnapshots, toggleMode } from '../actions/actions';
-import { useStoreContext } from '../store';
+// import { importSnapshots, toggleMode } from '../actions/actions';
+// import { useStoreContext } from '../store';
 import { Button } from '@mui/material';
 import Tutorial from '../components/Tutorial';
 import LockIcon from '@mui/icons-material/Lock';
 import LockOpenIcon from '@mui/icons-material/LockOpen';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import FileUploadIcon from '@mui/icons-material/FileUpload';
+import { toggleMode, importSnapshots } from '../RTKslices';
+import { useDispatch, useSelector } from 'react-redux';
 
 function exportHandler(snapshots: []): void { // function that takes in our tabs[currentTab] object to be exported as a JSON file. NOTE: TypeScript needs to be updated
   const fileDownload: HTMLAnchorElement = document.createElement('a'); // invisible HTML element that will hold our tabs[currentTab] object
@@ -43,8 +45,13 @@ function importHandler(dispatch: (a: unknown) => void): void { // function handl
 }
 
 function ButtonsContainer(): JSX.Element {
-  const [{ tabs, currentTab, currentTabInApp }, dispatch] = useStoreContext();
-  const { snapshots, mode: { paused }} = tabs[currentTab];
+  // const [{ tabs, currentTab, currentTabInApp }, dispatch] = useStoreContext();
+  // const [state, dispatch] = useStoreContext();
+  const dispatch = useDispatch();
+  const currentTab = useSelector((state: any) => state.main.currentTab);
+  const tabs = useSelector((state: any)=>state.main.tabs);
+  const currentTabInApp = useSelector((state: any)=> state.main.currentTabInApp);
+  const { mode: { paused }} = tabs[currentTab];
 
   return (
     <div className='buttons-container'>