Merge pull request #2 from oslabs-beta/andrewb

buttons container converted, added toggleMode and importSnapshots to …

Author: AndrewByun

src/app/RTKslices.tsx

@@ -202,7 +202,56 @@ export const mainSlice = createSlice({
       tabs[currentTab].playing = false;
       tabs[currentTab].intervalId = null;
     },
-    
+    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;
+    }
   },
 })
 
@@ -219,6 +268,8 @@ export const {
   changeSlider,
   setCurrentTabInApp,
   pause,
+  toggleMode,
+  importSnapshots
 } =  mainSlice.actions
 
 

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'>