Merge pull request #10 from oslabs-beta/ctstamper/migrate-Diff

Migrated Diff to RTK, fixed hook call and port issue

Author: AndrewByun

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

@@ -3,6 +3,7 @@ import { diff, formatters } from 'jsondiffpatch';
 import ReactHtmlParser from 'react-html-parser';
 import { useStoreContext } from '../store';
 import { DiffProps, StatelessCleaning } from '../FrontendTypes';
+import { useSelector } from 'react-redux';
 
 /**
  * Displays tree showing two specific versions of tree:
@@ -16,8 +17,9 @@ function Diff(props: DiffProps): JSX.Element {
     snapshot, // snapshot from 'tabs[currentTab]' object in 'MainContainer'
     show // boolean that is dependent on the 'Route' path; true if 'Route' path === '/diffRaw'
   } = props;
-  const [mainState] = useStoreContext(); // useStoreContext() returns our global state object (which was initialized as 'initialState' in 'App.tsx')
-  const { currentTab, tabs } = mainState; // 'currentTab' (type: number) and 'tabs' (type: object) are destructured from 'mainState'
+  // const [mainState] = useStoreContext(); // useStoreContext() returns our global state object (which was initialized as 'initialState' in 'App.tsx')
+  // const { currentTab, tabs } = mainState; // 'currentTab' (type: number) and 'tabs' (type: object) are destructured from 'mainState'
+  const { currentTab, tabs } = useSelector((state: any) => state.main);
   const { snapshots, viewIndex, sliderIndex } = tabs[currentTab];
 
   let previous: unknown// = (viewIndex !== -1) ? snapshots[viewIndex - 1] : previous = snapshots[sliderIndex - 1]

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>
   );