Merge pull request #7 from oslabs-beta/andrewb

converted tutorial.tsx and added reducer to RTK slices

Author: AndrewByun

src/app/RTKslices.tsx

@@ -339,6 +339,7 @@ export const mainSlice = createSlice({
     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',
@@ -368,6 +369,11 @@ export const mainSlice = createSlice({
       tabs[currentTab].currBranch = savedSnapshot.Branch;
       tabs[currentTab].seriesSavedStatus = false;
     },
+    tutorialSaveSeriesToggle: (state, action) => {
+      const { tabs, currentTab } = state;
+      tabs[currentTab] = { ...tabs[currentTab], seriesSavedStatus: action.payload }
+
+    }
   },
 })
 
@@ -391,7 +397,8 @@ export const {
   moveBackward,
   resetSlider,
   toggleMode,
-  importSnapshots
+  importSnapshots,
+  tutorialSaveSeriesToggle
 } =  mainSlice.actions
 
 

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/ButtonsContainer.tsx

@@ -78,7 +78,10 @@ function ButtonsContainer(): JSX.Element {
         Upload
       </Button>
       {/* The component below renders a button for the tutorial walkthrough of Reactime */}
-      <Tutorial dispatch={dispatch} currentTabInApp={currentTabInApp} />
+      <Tutorial
+      //commented out so we can use useDispatch in Tutorial.tsx
+      //  dispatch={dispatch} 
+       currentTabInApp={currentTabInApp} />
     </div>
   );
 }