Tutorial conditionally renders based on active tab within RT. Now working on creating the performance tutorial

Author: bmichare

.eslintrc

@@ -12,7 +12,8 @@
     "import/extensions": "off",
     "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
     "react-hooks/exhaustive-deps": "warn", // Checks effect dependencies
-    "react/jsx-filename-extension": [0]
+    "react/jsx-filename-extension": [0],
+    "linebreak-style": "off"
   },
   "env": {
     "es6": true,

src/app/actions/actions.ts

@@ -119,3 +119,8 @@ export const setCurrentLocation = (tabsObj) => ({
   type: types.SET_CURRENT_LOCATION,
   payload: tabsObj,
 })
+
+export const setCurrentTabInApp = (currentTabInApp) => ({
+  type: types.SET_CURRENT_TAB_IN_APP,
+  payload: currentTabInApp,
+})

src/app/components/App.tsx

@@ -6,17 +6,22 @@ import mainReducer from '../reducers/mainReducer.js';
 
 // import 'intro.js/introjs.css';
 
+// currentTab is the current active tab within Google Chrome. This is used to decide what tab Reactime should be monitoring. This can be "locked"
+// currentTabInApp is the current active tab within Reactime (Map, Performance, History, etc). This is used to determine the proper tutorial to render when How To button is pressed.
+
 const initialState: {
   port: null | number,
   currentTab: null | number,
   currentTitle: null | string,
   split: null | boolean,
-  tabs: unknown; } = {
+  tabs: unknown,
+  currentTabInApp: null | string, } = {
     port: null,
     currentTab: null,
     currentTitle: 'No Target',
     split: false,
     tabs: {},
+    currentTabInApp: null,
   };
 
 function App(): JSX.Element {

src/app/components/ComponentMap.tsx

@@ -19,8 +19,9 @@ import {
 } from '@visx/tooltip';
 import LinkControls from './LinkControls';
 import getLinkComponent from './getLinkComponent';
-import { toggleExpanded } from '../actions/actions';
+import { toggleExpanded, setCurrentTabInApp } from '../actions/actions';
 import { useStoreContext } from '../store';
+import { useEffect } from 'react';
 
 const exclude = ['childExpirationTime', 'staticContext', '_debugSource', 'actualDuration', 'actualStartTime', 'treeBaseDuration', '_debugID', '_debugIsCurrentlyTiming', 'selfBaseDuration', 'expirationTime', 'effectTag', 'alternate', '_owner', '_store', 'get key', 'ref', '_self', '_source', 'firstBaseUpdate', 'updateQueue', 'lastBaseUpdate', 'shared', 'responders', 'pending', 'lanes', 'childLanes', 'effects', 'memoizedState', 'pendingProps', 'lastEffect', 'firstEffect', 'tag', 'baseState', 'baseQueue', 'dependencies', 'Consumer', 'context', '_currentRenderer', '_currentRenderer2', 'mode', 'flags', 'nextEffect', 'sibling', 'create', 'deps', 'next', 'destroy', 'parentSub', 'child', 'key', 'return', 'children', '$$typeof', '_threadCount', '_calculateChangedBits', '_currentValue', '_currentValue2', 'Provider', '_context', 'stateNode', 'elementType', 'type'];
 
@@ -74,6 +75,10 @@ export default function ComponentMap({
   const [selectedNode, setSelectedNode] = useState('root');
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
 
+  useEffect(() => {
+    dispatch(setCurrentTabInApp('map'))
+  }, []);
+
   // setting the margins for the Map to render in the tab window.
   const innerWidth = totalWidth - margin.left - margin.right;
   const innerHeight = totalHeight - margin.top - margin.bottom - 60;

src/app/components/PerformanceVisx.tsx

@@ -14,6 +14,8 @@ import BarGraph from './BarGraph';
 import BarGraphComparison from './BarGraphComparison';
 import BarGraphComparisonActions from './BarGraphComparisonActions';
 import { useStoreContext } from '../store';
+import { useEffect } from 'react';
+import { setCurrentTabInApp } from '../actions/actions';
 /* NOTES
 Issue - Not fully compatible with recoil apps. Reference the recoil-todo-test.
 Barstacks display inconsistently...however, almost always displays upon initial test app load or
@@ -181,6 +183,10 @@ const PerformanceVisx = (props: BarStackProps) => {
   const [ series, setSeries ] = useState(true);
   const [ action, setAction ] = useState(false);
 
+  useEffect(() => {
+    dispatch(setCurrentTabInApp('performance'));
+  }, []);
+
   const getActions = () => {
     let seriesArr = localStorage.getItem('project')
     seriesArr = seriesArr === null ? [] : JSON.parse(seriesArr);

src/app/components/Tutorial.tsx

@@ -5,13 +5,15 @@ import { useLocation } from 'react-router-dom';
 import { Steps, Hints } from 'intro.js-react';
 import 'intro.js/introjs.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {
-  faQuestion,
-} from '@fortawesome/free-solid-svg-icons';
+import { faQuestion } from '@fortawesome/free-solid-svg-icons';
+import { useStoreContext } from '../store';
 
 export default function Tutorial(): JSX.Element {
   const [stepsEnabled, setStepsEnabled] = useState(false);
   const [initialStep, setInitialStep] = useState(0);
+  const [store, dispatch] = useStoreContext();
+  const { currentTabInApp } = store;
+  //why is this state rather than just a variable?
   const [steps, setSteps] = useState([
     {
       title: 'Reactime Tutorial',
@@ -103,12 +105,29 @@ export default function Tutorial(): JSX.Element {
   const startIntro = () => {
     setStepsEnabled(true);
   };
+  let stepsTest = [{
+    title: 'Tutorial Complete',
+    intro: '<ul><li>Please visit our official Github Repo for more information </li><br> <li><a href="https://github.com/open-source-labs/reactime" target="_blank">Reactime Github</a></li></ul>',
+    position: 'top',
+  }];
+
+  switch (currentTabInApp) {
+    case 'performance':
+      stepsTest = [{
+        title: 'performance',
+        intro: '<ul><li>Please visit our official Github Repo for more information </li><br> <li><a href="https://github.com/open-source-labs/reactime" target="_blank">Reactime Github</a></li></ul>',
+        position: 'top',
+      }];
+      break;
+    default:
+      break;
+  }
 
   return (
     <>
       <Steps
         enabled={stepsEnabled}
-        steps={steps}
+        steps={stepsTest}
         initialStep={initialStep}
         onExit={onExit}
         options={{

src/app/constants/actionTypes.ts

@@ -22,3 +22,4 @@ export const ON_HOVER_EXIT = 'ON_HOVER_EXIT';
 export const SAVE = 'SAVE';
 export const DELETE_SERIES = 'DELETE_SERIES';
 export const SET_CURRENT_LOCATION = 'SET_CURRENT_LOCATION';
+export const SET_CURRENT_TAB_IN_APP = 'SET_CURRENT_TAB_IN_APP';

src/app/containers/MainContainer.tsx

@@ -22,7 +22,7 @@ import { useStoreContext } from '../store';
 function MainContainer(): any {
   const [store, dispatch] = useStoreContext();
   const {
-    tabs, currentTab, port: currentPort, split,
+    tabs, currentTab, port: currentPort, split, currentTabInApp
   } = store;
   const [actionView, setActionView] = useState(true);
   // this function handles Time Jump sidebar view
@@ -195,6 +195,7 @@ function MainContainer(): any {
 
   return (
     <div className="main-container">
+      {currentTabInApp}
       <div id="bodyContainer" className="body-container">
         <ActionContainer
           actionView={actionView}

src/app/reducers/mainReducer.js

@@ -4,7 +4,7 @@ import * as types from '../constants/actionTypes.ts';
 
 export default (state, action) => produce(state, draft => {
   const {
-    port, currentTab, tabs,
+    port, currentTab, tabs, 
   } = draft;
   const {
     hierarchy, snapshots, mode, intervalId, viewIndex, sliderIndex,
@@ -362,6 +362,10 @@ export default (state, action) => produce(state, draft => {
       tabs[currentTab].currLocation = payload[currentTab].currLocation;
       break;
     }
+    case types.SET_CURRENT_TAB_IN_APP: {
+      draft.currentTabInApp = action.payload;
+      break;
+    }
     default:
       throw new Error(`nonexistent action: ${action.type}`);
   }