Replace React Joyride with React Tour (#22)

Author: ram2091999

__tests__/app/containers/SideBar.test.tsx

@@ -10,7 +10,7 @@ describe('SideBar Container', () => {
   const { store } = configureStore();
   const wrapper = mount(
     <SidebarContainer
-      toggleJoyRide={Function}
+      toggleReactTour={Function}
       setIsAuthenticationOpen={(v: boolean) => undefined}
     />,
     {

__tests__/app/containers/__snapshots__/SideBar.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`SideBar Container Should render 1`] = `
 <Connect(Sidebar)
   setIsAuthenticationOpen={[Function]}
-  toggleJoyRide={[Function]}
+  toggleReactTour={[Function]}
 >
   <Sidebar
     closeSidePanelTab={[Function]}
@@ -13,7 +13,7 @@ exports[`SideBar Container Should render 1`] = `
     resetAppState={[Function]}
     setIsAuthenticationOpen={[Function]}
     sidePanelTab="NONE"
-    toggleJoyRide={[Function]}
+    toggleReactTour={[Function]}
     toggleUserProfileModal={[Function]}
   >
     <div

package.json

@@ -72,7 +72,7 @@
     "@types/jest": "^23.3.10",
     "@types/node": "10.11.7",
     "@types/pako": "^1.0.0",
-    "@types/react": "^16.4.16",
+    "@types/react": "^16.9.18",
     "@types/react-bootstrap": "^0.32.15",
     "@types/react-dom": "^16.0.9",
     "@types/react-flags-select": "^1.1.2",
@@ -135,6 +135,7 @@
   "dependencies": {
     "@types/commonmark": "^0.27.3",
     "@types/react-router-dom": "^5.1.3",
+    "@types/reactour": "^1.13.1",
     "bootstrap": "^4.2.1",
     "classnames": "^2.2.6",
     "codecharacter-renderer": "^2.3.1",
@@ -149,7 +150,6 @@
     "react-flags-select": "^1.1.10",
     "react-ga": "^2.7.0",
     "react-google-recaptcha": "^1.0.5",
-    "react-joyride": "^2.0.4",
     "react-markdown": "^4.0.6",
     "react-monaco-editor": "^0.22.0",
     "react-paginate": "^6.2.1",
@@ -160,6 +160,7 @@
     "react-router-redux": "^4.0.8",
     "react-spinners": "^0.5.1",
     "react-split-pane": "^0.1.84",
+    "reactour": "^1.16.0",
     "redux": "^4.0.1",
     "redux-actions": "^2.6.1",
     "redux-persist": "^5.10.0",

src/app/components/Dashboard.tsx

@@ -1,5 +1,5 @@
 import { ErrorBoundary } from 'app/components/ErrorBoundary';
-import Joyride from 'app/components/Joyride';
+import ReactTour from 'app/components/ReactTour';
 import CodeStatus from 'app/containers/code/CodeStatus';
 import Editor from 'app/containers/code/Editor';
 import GameLog from 'app/containers/GameLog';
@@ -42,7 +42,7 @@ export class Dashboard extends React.Component<
     this.state = {
       fixedLeftPaneWidth,
       editorWidthRatio: this.initialEditorRatio,
-      isJoyRideActive: false,
+      isReactTourActive: false,
       rendererHeight: this.initialRendererHeight,
       splitPaneState: DashboardInterfaces.SplitPaneState.BOTH,
       windowWidth: window.innerWidth,
@@ -69,7 +69,7 @@ export class Dashboard extends React.Component<
       windowWidth,
       fixedLeftPaneWidth,
       splitPaneState,
-      isJoyRideActive,
+      isReactTourActive,
     } = this.state;
     const {
       isLoggedIn,
@@ -107,8 +107,9 @@ export class Dashboard extends React.Component<
     return (
       <div>
         {isWelcomeModalOpen ? <Welcome closeWelcomeModal={() => closeWelcomeModal()} /> : null}
-        {isLoggedIn && isJoyRideActive ? <Joyride toggleJoyRide={this.onToggleJoyRide} /> : null}
-
+        {isLoggedIn && isReactTourActive && !isWelcomeModalOpen ? (
+          <ReactTour toggleReactTour={this.onToggleReactTour} />
+        ) : null}
         {isLoggedIn ? <SocketHandler /> : null}
         <SplitPane
           style={{
@@ -131,7 +132,7 @@ export class Dashboard extends React.Component<
                 }}
               >
                 <SideBar
-                  toggleJoyRide={this.onToggleJoyRide}
+                  toggleReactTour={this.onToggleReactTour}
                   setIsAuthenticationOpen={setIsAuthenticationOpen}
                 />
               </div>
@@ -143,7 +144,9 @@ export class Dashboard extends React.Component<
               >
                 <CodeStatus width={editorWidth} />
                 {this.state.splitPaneState !== DashboardInterfaces.SplitPaneState.RENDERER ? (
-                  <Editor editorWidth={editorWidth} />
+                  <div id="editor_div">
+                    <Editor editorWidth={editorWidth} />
+                  </div>
                 ) : null}
               </div>
             </Row>
@@ -208,9 +211,9 @@ export class Dashboard extends React.Component<
     });
   };
 
-  private onToggleJoyRide = (): void => {
+  private onToggleReactTour = (): void => {
     this.setState({
-      isJoyRideActive: !this.state.isJoyRideActive,
+      isReactTourActive: !this.state.isReactTourActive,
     });
   };
 }