removed RTK hook from class and fixed port issue

Author: Christopher Stamper

src/app/RTKslices.tsx

@@ -40,18 +40,19 @@ export const mainSlice = createSlice({
     emptySnapshots: (state) => {
       console.log('emptySnapshots: ', current(state));
 
-      const { tabs, currentTab } = state;
-      const { port } = tabs[currentTab] || {};
+      const { tabs, currentTab, port } = state;
+      console.log('currentTab exists??: ', tabs[currentTab]);
+      console.log('port: ', port);
 
-      port.portMessage({ action: 'emptySnap', tabId: currentTab });
+      port.postMessage({ action: 'emptySnap', tabId: currentTab });
 
       tabs[currentTab].sliderIndex = 0;
       tabs[currentTab].viewIndex = 0;
       tabs[currentTab].playing = false;
 
       const lastSnapshot = tabs[currentTab].snapshots[tabs[currentTab].snapshots.length - 1];
 
-      tabs[currentTab].hiearchy.stateSnaphot = { ...lastSnapshot };
+      tabs[currentTab].hierarchy.stateSnapshot = { ...lastSnapshot };
       tabs[currentTab].hierarchy.children = [];
       tabs[currentTab].snapshots = [lastSnapshot];
 
@@ -65,7 +66,7 @@ export const mainSlice = createSlice({
 
     },
     addNewSnapshots: (state, action) => {
-      console.log('addNewSnapshots: ', state);
+      console.log('addNewSnapshots: ', current(state));
       const { tabs } = state;
 
       const { payload } = action;
@@ -94,7 +95,7 @@ export const mainSlice = createSlice({
           };
         }
       });
-      console.log('addNewSnapshots: state end ', state);
+      console.log('addNewSnapshots: state end ', current(state));
 
     },
     initialConnect: (state, action) => {
@@ -234,8 +235,7 @@ export const mainSlice = createSlice({
     launchContentScript: (state, action) => {
       console.log('launchContentScript: ', current(state));
 
-      const { tabs, currentTab } = state;
-      const { port } = tabs[currentTab] || {};
+      const { tabs, currentTab, port } = state;
 
       // Fired when user clicks launch button on the error page. Send msg to background to launch
       port.postMessage({

src/app/components/Tutorial.tsx

@@ -36,13 +36,10 @@ 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 dispatch = useDispatch();
-    const currentTabInApp = useSelector((state: any) => state.main.currentTabInApp);
+    const {
+      currentTabInApp, // 'currentTabInApp' from 'ButtonsContainer' after useSelector()
+      dispatch // 'dispatch' from 'ButtonsContainer' after useDispatch()
+    } = this.props;
 
     // 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

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