Open videos box on first co optim

packages/strapi-admin/admin/src/components/OnboardingVideo/index.js

@@ -4,6 +4,13 @@
  *
  */
 
+
+//  shouldopenmodal -> action
+//  reduceur => videos (false, true)
+//  componentdidupdate if shouldopenmodal is different
+
+
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';

packages/strapi-admin/admin/src/containers/Onboarding/actions.js

@@ -4,7 +4,7 @@
  *
  */
 
-import { GET_VIDEOS, GET_VIDEOS_SUCCEEDED, ON_CLICK, SET_VIDEOS_DURATION, UPDATE_VIDEO_START_TIME, SET_VIDEO_END, REMOVE_VIDEOS } from './constants';
+import { GET_VIDEOS, GET_VIDEOS_SUCCEEDED, SHOULD_OPEN_MODAL, ON_CLICK, SET_VIDEOS_DURATION, UPDATE_VIDEO_START_TIME, SET_VIDEO_END, REMOVE_VIDEOS } from './constants';
 
 export function getVideos() {
   return {
@@ -19,6 +19,13 @@ export function getVideosSucceeded(videos) {
   };
 }
 
+export function shouldOpenModal(opened) {
+  return {
+    type: SHOULD_OPEN_MODAL,
+    opened,
+  };
+}
+
 export function onClick(e) {
   return {
     type: ON_CLICK,

packages/strapi-admin/admin/src/containers/Onboarding/constants.js

@@ -7,6 +7,7 @@
 export const GET_VIDEOS = 'StrapiAdmin/Onboarding/GET_VIDEOS';
 export const GET_VIDEOS_SUCCEEDED =
   'StrapiAdmin/Onboarding/GET_VIDEOS_SUCCEEDED';
+export const SHOULD_OPEN_MODAL = 'StrapiAdmin/Onboarding/SHOULD_OPEN_MODAL';
 export const ON_CLICK = 'StrapiAdmin/Onboarding/ON_CLICK';
 export const SET_VIDEOS_DURATION = 'StrapiAdmin/Onboarding/SET_VIDEOS_DURATION';
 export const UPDATE_VIDEO_START_TIME = 'StrapiAdmin/Onboarding/UPDATE_VIDEO_START_TIME';

packages/strapi-admin/admin/src/containers/Onboarding/index.js

@@ -27,12 +27,13 @@ export class Onboarding extends React.Component {
 
   componentDidMount() {
     this.props.getVideos();
+  }
 
-    if (JSON.parse(localStorage.getItem('onboarding')) === null) {
-      setTimeout(() => { 
-        this.setState({ showVideos: true });
-        localStorage.setItem('onboarding', true);
-      }, 1000);
+  componentDidUpdate(prevProps) {
+    const { shouldOpenModal } = this.props;
+
+    if (shouldOpenModal !== prevProps.shouldOpenModal && shouldOpenModal) {
+      this.handleOpenModal();
     }
   }
 
@@ -54,6 +55,8 @@ export class Onboarding extends React.Component {
     this.context.emitEvent(eventName, {timestamp: currTime});
   }
 
+  handleOpenModal = () => this.setState({ showVideos: true });
+
   handleVideosToggle = () => {
     this.setState(prevState => ({ showVideos: !prevState.showVideos }));
 
@@ -135,8 +138,9 @@ Onboarding.defaultProps = {
   removeVideos: () => {},
   setVideoDuration: () => {},
   setVideoEnd: () => {},
-  updateVideoStartTime: () => {},
+  shouldOpenModal: false,
   videos: [],
+  updateVideoStartTime: () => {},
 };
 
 Onboarding.propTypes = {
@@ -145,6 +149,7 @@ Onboarding.propTypes = {
   removeVideos: PropTypes.func,
   setVideoDuration: PropTypes.func,
   setVideoEnd: PropTypes.func,
+  shouldOpenModal: PropTypes.bool,
   updateVideoStartTime: PropTypes.func,
   videos: PropTypes.array,
 };

packages/strapi-admin/admin/src/containers/Onboarding/reducer.js

@@ -5,7 +5,7 @@
  */
 
 import { fromJS } from 'immutable';
-import { GET_VIDEOS_SUCCEEDED, ON_CLICK, SET_VIDEOS_DURATION, UPDATE_VIDEO_START_TIME, SET_VIDEO_END, REMOVE_VIDEOS } from './constants';
+import { GET_VIDEOS_SUCCEEDED, SHOULD_OPEN_MODAL, ON_CLICK, SET_VIDEOS_DURATION, UPDATE_VIDEO_START_TIME, SET_VIDEO_END, REMOVE_VIDEOS } from './constants';
 
 const initialState = fromJS({
   videos: fromJS([]),
@@ -15,6 +15,8 @@ function onboardingReducer(state = initialState, action) {
   switch (action.type) {
     case GET_VIDEOS_SUCCEEDED:
       return state.update('videos', () => fromJS(action.videos));
+    case SHOULD_OPEN_MODAL:
+      return state.update('shouldOpenModal', () => action.opened);
     case ON_CLICK:
       return state.updateIn(['videos'], list => {
         return list.reduce((acc, current, index) => {

packages/strapi-admin/admin/src/containers/Onboarding/saga.js

@@ -2,7 +2,7 @@ import request from 'utils/request';
 import { all, call, fork, takeLatest, put } from 'redux-saga/effects';
 
 import { GET_VIDEOS } from './constants';
-import { getVideosSucceeded } from './actions';
+import { getVideosSucceeded, shouldOpenModal } from './actions';
 
 function* getVideos() {
   try {
@@ -38,11 +38,28 @@ function* getVideos() {
     yield put(
       getVideosSucceeded(videos),
     );
+    
+    const isFirstTime = JSON.parse(localStorage.getItem('onboarding')) || null;
+
+    if (isFirstTime === null) {
+      yield new Promise(resolve => {
+        setTimeout(() => {
+          resolve();
+        }, 500);
+      });
+      
+      yield put(
+        shouldOpenModal(true),
+      );
+      localStorage.setItem('onboarding', true);
+    }
+
   } catch (err) {
     console.log(err); // eslint-disable-line no-console
   }
 }
 
+
 function* defaultSaga() {
   yield all([fork(takeLatest, GET_VIDEOS, getVideos)]);
 }

packages/strapi-admin/admin/src/translations/fr.json

@@ -86,7 +86,7 @@
   "app.components.NotFoundPage.description": "Page introuvable",
   "app.components.Official": "Officiel",
   "app.components.Onboarding.label.completed": "% complétées",
-  "app.components.Onboarding.title": "Videos de démarrage",
+  "app.components.Onboarding.title": "Démarrons ensemble",
   "app.components.PluginCard.Button.label.download": "Télécharger",
   "app.components.PluginCard.Button.label.install": "Déjà installé",
   "app.components.PluginCard.Button.label.support": "Nous soutenir",