feat: add tour for launch

adds tour

close #323

Author: hasanagh

package.json

@@ -113,6 +113,7 @@
     "react-dom": "16.13.0",
     "react-i18next": "11.3.3",
     "react-immutable-proptypes": "2.1.0",
+    "react-joyride": "2.2.1",
     "react-json-view": "1.19.1",
     "react-loading": "2.0.3",
     "react-quill": "1.3.3",

public/app/config/channels.js

@@ -71,4 +71,5 @@ module.exports = {
   GET_SPACE_IN_CLASSROOM_CHANNEL: 'classroom:space:get',
   LOAD_SPACE_IN_CLASSROOM_CHANNEL: 'classroom:space:load',
   GET_SPACE_TO_LOAD_IN_CLASSROOM_CHANNEL: 'classroom:space:load:get-space',
+  TOUR_COMPLETED_CHANNEL: 'tour:complete',
 };

public/app/config/config.js

@@ -2,6 +2,11 @@
 const { app } = require('electron');
 const isWindows = require('../utils/isWindows');
 
+const tours = {
+  VISIT_SPACE_TOUR: 'visitSpace',
+  SETTINGS_TOUR: 'settings',
+};
+
 // types that we support downloading
 const DOWNLOADABLE_MIME_TYPES = [
   // video
@@ -68,6 +73,10 @@ const buildDefaultUser = (lang = DEFAULT_LANG) => ({
   },
   favoriteSpaces: [],
   recentSpaces: [],
+  tour: {
+    [tours.VISIT_SPACE_TOUR]: false,
+    [tours.SETTINGS_TOUR]: false,
+  },
 });
 
 const ANONYMOUS_USERNAME = 'Anonymous';

public/app/listeners/completeTour.js

@@ -0,0 +1,18 @@
+const { TOUR_COMPLETED_CHANNEL } = require('../config/channels');
+const { ERROR_GENERAL } = require('../config/errors');
+const logger = require('../logger');
+
+const completeTour = (mainWindow, db) => async (event, { tourName }) => {
+  try {
+    // update user in users collection
+    db.get('user')
+      .set(`tour.${tourName}`, true)
+      .write();
+    mainWindow.webContents.send(TOUR_COMPLETED_CHANNEL);
+  } catch (e) {
+    logger.error(e);
+    mainWindow.webContents.send(TOUR_COMPLETED_CHANNEL, ERROR_GENERAL);
+  }
+};
+
+module.exports = completeTour;

public/app/listeners/index.js

@@ -50,6 +50,7 @@ const loadSpaceInClassroom = require('./loadSpaceInClassroom');
 const setActionAccessibility = require('./setActionAccessibility');
 const setActionsAsEnabled = require('./setActionsAsEnabled');
 const windowAllClosed = require('./windowAllClosed');
+const completeTour = require('./completeTour');
 
 module.exports = {
   loadSpace,
@@ -103,4 +104,5 @@ module.exports = {
   setActionAccessibility,
   setActionsAsEnabled,
   windowAllClosed,
+  completeTour,
 };

public/electron.js

@@ -74,6 +74,7 @@ const {
   LOAD_SPACE_IN_CLASSROOM_CHANNEL,
   SET_ACTION_ACCESSIBILITY_CHANNEL,
   SET_ACTIONS_AS_ENABLED_CHANNEL,
+  TOUR_COMPLETED_CHANNEL,
 } = require('./app/config/channels');
 const env = require('./env.json');
 const {
@@ -127,6 +128,7 @@ const {
   setActionAccessibility,
   setActionsAsEnabled,
   windowAllClosed,
+  completeTour,
 } = require('./app/listeners');
 const isMac = require('./app/utils/isMac');
 
@@ -600,6 +602,9 @@ app.on('ready', async () => {
 
   // called when syncing a space
   ipcMain.on(SYNC_SPACE_CHANNEL, syncSpace(mainWindow, db));
+
+  // called when a tour is closed or completed
+  ipcMain.on(TOUR_COMPLETED_CHANNEL, completeTour(mainWindow, db));
 });
 
 app.on('window-all-closed', () => windowAllClosed(mainWindow));

src/App.js

@@ -59,6 +59,7 @@ import {
 import './App.css';
 import SavedSpaces from './components/SavedSpaces';
 import ClassroomScreen from './components/classrooms/ClassroomScreen';
+import Tour from './components/common/Tour';
 
 const styles = () => ({
   toastrIcon: { marginBottom: '-20px', fontSize: '45px' },
@@ -165,6 +166,7 @@ export class App extends Component {
         theme={connexionStatus ? OnlineTheme(userMode) : OfflineTheme}
       >
         <Router>
+          <Tour />
           <div className="app" style={{ height }}>
             <Switch>
               <Route exact path={SIGN_IN_PATH} component={SignInScreen} />

src/__snapshots__/App.test.js.snap

@@ -295,6 +295,7 @@ exports[`<App /> renders correctly 1`] = `
   }
 >
   <HashRouter>
+    <withRouter(withI18nextTranslation(Connect(Tour))) />
     <div
       className="app"
       style={

src/actions/index.js

@@ -11,3 +11,4 @@ export * from './syncSpace';
 export * from './loadSpace';
 export * from './exportSpace';
 export * from './classroom';
+export * from './tour';

src/actions/tour.js

@@ -0,0 +1,76 @@
+import { TOUR_COMPLETED_CHANNEL } from '../config/channels';
+import { ERROR_GENERAL } from '../config/errors';
+import {
+  INITIALIZE_TOUR,
+  NAVIGATE_STOP_TOUR,
+  NEXT_OR_PREV_TOUR,
+  RESET_TOUR,
+  RESTART_TOUR,
+  START_TOUR,
+  STOP_TOUR,
+} from '../types/tour';
+
+const nextStepTour = payload => dispatch =>
+  dispatch({
+    type: NEXT_OR_PREV_TOUR,
+    payload,
+  });
+
+const navigateStopTour = payload => dispatch =>
+  dispatch({
+    type: NAVIGATE_STOP_TOUR,
+    payload,
+  });
+
+const stopTour = () => dispatch =>
+  dispatch({
+    type: STOP_TOUR,
+  });
+
+const restartTour = () => dispatch =>
+  dispatch({
+    type: RESTART_TOUR,
+  });
+
+const startTour = () => dispatch =>
+  dispatch({
+    type: START_TOUR,
+  });
+
+const initializeTour = payload => dispatch =>
+  dispatch({
+    type: INITIALIZE_TOUR,
+    payload,
+  });
+
+const resetTour = () => dispatch =>
+  dispatch({
+    type: RESET_TOUR,
+  });
+
+const completeTour = async tourName => dispatch => {
+  try {
+    dispatch({
+      type: RESET_TOUR,
+    });
+    window.ipcRenderer.send(TOUR_COMPLETED_CHANNEL, { tourName });
+    window.ipcRenderer.once(TOUR_COMPLETED_CHANNEL, async (event, error) => {
+      if (error === ERROR_GENERAL) {
+        console.error(error);
+      }
+    });
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+export {
+  stopTour,
+  nextStepTour,
+  restartTour,
+  startTour,
+  navigateStopTour,
+  resetTour,
+  completeTour,
+  initializeTour,
+};

src/components/Settings.js

@@ -12,7 +12,11 @@ import LanguageSelect from './common/LanguageSelect';
 import DeveloperSwitch from './common/DeveloperSwitch';
 import GeolocationControl from './common/GeolocationControl';
 import Main from './common/Main';
-import { SETTINGS_MAIN_ID, SETTINGS_TITLE_ID } from '../config/selectors';
+import {
+  SETTINGS_ACTIONS_CLASS,
+  SETTINGS_MAIN_ID,
+  SETTINGS_TITLE_ID,
+} from '../config/selectors';
 import SyncAdvancedSwitch from './space/sync/SyncAdvancedSwitch';
 import StudentModeSwitch from './common/StudentModeSwitch';
 import ActionEnabledSwitch from './common/ActionEnabledSwitch';
@@ -58,7 +62,7 @@ export class Settings extends Component {
         <Typography variant="h5" color="inherit" className="mt-2">
           {t('Actions')}
         </Typography>
-        <FormGroup>
+        <FormGroup className={SETTINGS_ACTIONS_CLASS}>
           <ActionEnabledSwitch />
           <ActionAccessibilitySwitch />
         </FormGroup>

src/components/VisitSpace.js

@@ -27,6 +27,7 @@ import {
   VISIT_BUTTON_ID,
   VISIT_INPUT_ID,
   VISIT_MAIN_ID,
+  VISIT_SPACE_INPUT,
 } from '../config/selectors';
 
 class VisitSpace extends Component {
@@ -118,7 +119,7 @@ class VisitSpace extends Component {
           </Typography>
           <Input
             id={VISIT_INPUT_ID}
-            className={classes.input}
+            className={classNames(classes.input, VISIT_SPACE_INPUT)}
             required
             onChange={this.handleChangeSpaceId}
             inputProps={{

src/components/__snapshots__/Settings.test.js.snap

@@ -36,7 +36,9 @@ exports[`<Settings /> renders correctly 1`] = `
     >
       Actions
     </WithStyles(ForwardRef(Typography))>
-    <WithStyles(ForwardRef(FormGroup))>
+    <WithStyles(ForwardRef(FormGroup))
+      className="SettingsActions"
+    >
       <withI18nextTranslation(WithStyles(Connect(ActionEnabledSwitch))) />
       <withI18nextTranslation(WithStyles(Connect(ActionAccessibilitySwitch))) />
     </WithStyles(ForwardRef(FormGroup))>