diff --git a/packages/strapi-admin/admin/src/components/OnboardingVideo/index.js b/packages/strapi-admin/admin/src/components/OnboardingVideo/index.js index e6b95cf1b4..30021239f1 100644 --- a/packages/strapi-admin/admin/src/components/OnboardingVideo/index.js +++ b/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'; diff --git a/packages/strapi-admin/admin/src/containers/Onboarding/actions.js b/packages/strapi-admin/admin/src/containers/Onboarding/actions.js index 643779f43d..5f78a9b7c3 100644 --- a/packages/strapi-admin/admin/src/containers/Onboarding/actions.js +++ b/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, diff --git a/packages/strapi-admin/admin/src/containers/Onboarding/constants.js b/packages/strapi-admin/admin/src/containers/Onboarding/constants.js index ea1f503060..23e9a7c753 100644 --- a/packages/strapi-admin/admin/src/containers/Onboarding/constants.js +++ b/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'; diff --git a/packages/strapi-admin/admin/src/containers/Onboarding/index.js b/packages/strapi-admin/admin/src/containers/Onboarding/index.js index 4f5a72f255..c6978797cb 100644 --- a/packages/strapi-admin/admin/src/containers/Onboarding/index.js +++ b/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, }; diff --git a/packages/strapi-admin/admin/src/containers/Onboarding/reducer.js b/packages/strapi-admin/admin/src/containers/Onboarding/reducer.js index 7f4633f362..06e15ff8ec 100644 --- a/packages/strapi-admin/admin/src/containers/Onboarding/reducer.js +++ b/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) => { diff --git a/packages/strapi-admin/admin/src/containers/Onboarding/saga.js b/packages/strapi-admin/admin/src/containers/Onboarding/saga.js index c3f3a1f162..5a18e3968d 100644 --- a/packages/strapi-admin/admin/src/containers/Onboarding/saga.js +++ b/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)]); } diff --git a/packages/strapi-admin/admin/src/translations/fr.json b/packages/strapi-admin/admin/src/translations/fr.json index 93ebb5a8e1..111f504adb 100644 --- a/packages/strapi-admin/admin/src/translations/fr.json +++ b/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",