Add OverlayBlocker to stm

packages/strapi-plugin-settings-manager/admin/src/containers/App/actions.js

@@ -5,26 +5,14 @@
  */
 
 import {
-  MENU_FETCH,
   ENVIRONMENTS_FETCH,
-  MENU_FETCH_SUCCEEDED,
   ENVIRONMENTS_FETCH_SUCCEEDED,
+  FREEZE_APP,
+  MENU_FETCH_SUCCEEDED,
+  MENU_FETCH,
+  UNFREEZE_APP,
 } from './constants';
 
-
-export function menuFetch() {
-  return {
-    type: MENU_FETCH,
-  };
-}
-
-export function fetchMenuSucceeded(menu) {
-  return {
-    type: MENU_FETCH_SUCCEEDED,
-    menu,
-  };
-}
-
 export function environmentsFetch() {
   return {
     type: ENVIRONMENTS_FETCH,
@@ -37,3 +25,28 @@ export function environmentsFetchSucceeded(environments) {
     environments,
   };
 }
+
+export function freezeApp() {
+  return {
+    type: FREEZE_APP,
+  };
+}
+
+export function fetchMenuSucceeded(menu) {
+  return {
+    type: MENU_FETCH_SUCCEEDED,
+    menu,
+  };
+}
+
+export function menuFetch() {
+  return {
+    type: MENU_FETCH,
+  };
+}
+
+export function unfreezeApp() {
+  return {
+    type: UNFREEZE_APP,
+  };
+}

packages/strapi-plugin-settings-manager/admin/src/containers/App/constants.js

@@ -4,7 +4,9 @@
  *
  */
 
-export const MENU_FETCH = 'SettingsManager/App/MENU_FETCH';
 export const ENVIRONMENTS_FETCH = 'SettingsManager/App/ENVIRONMENTS_FETCH';
-export const MENU_FETCH_SUCCEEDED = 'SettingsManager/App/MENU_FETCH_SUCCEEDED';
 export const ENVIRONMENTS_FETCH_SUCCEEDED = 'SettingsManager/App/ENVIRONMENTS_FETCH_SUCCEEDED';
+export const FREEZE_APP = 'SettingsManager/App/FREEZE_APP';
+export const MENU_FETCH = 'SettingsManager/App/MENU_FETCH';
+export const MENU_FETCH_SUCCEEDED = 'SettingsManager/App/MENU_FETCH_SUCCEEDED';
+export const UNFREEZE_APP = 'SettingsManager/App/UNFREEZE_APP';

packages/strapi-plugin-settings-manager/admin/src/containers/App/index.js

@@ -19,9 +19,10 @@ import { pluginId } from 'app';
 import injectSaga from 'utils/injectSaga';
 
 import HomePage from 'containers/HomePage';
+import OverlayBlocker from 'components/OverlayBlocker';
 
 import { menuFetch, environmentsFetch } from './actions';
-import { makeSelectLoading, makeSelectSections } from './selectors';
+import { makeSelectBlockApp, makeSelectLoading, makeSelectSections } from './selectors';
 import styles from './styles.scss';
 
 import saga from './sagas';
@@ -56,6 +57,7 @@ class App extends React.Component {
   render() {
     return (
       <div className={`${pluginId} ${styles.app}`}>
+        <OverlayBlocker isOpen={this.props.blockApp} />
         <Switch>
           <Route path="/plugins/settings-manager/:slug/:env" component={HomePage} />
           <Route path="/plugins/settings-manager/:slug" component={HomePage} />
@@ -71,6 +73,7 @@ App.contextTypes = {
 };
 
 App.propTypes = {
+  blockApp: PropTypes.bool.isRequired,
   environmentsFetch: PropTypes.func.isRequired,
   history: PropTypes.object.isRequired,
   menuFetch: PropTypes.func.isRequired,
@@ -88,6 +91,7 @@ export function mapDispatchToProps(dispatch) {
 }
 
 const mapStateToProps = createStructuredSelector({
+  blockApp: makeSelectBlockApp(),
   loading: makeSelectLoading(),
   sections: makeSelectSections(),
 });

packages/strapi-plugin-settings-manager/admin/src/containers/App/reducer.js

@@ -6,12 +6,15 @@
 
 import { fromJS, List } from 'immutable';
 import {
-  MENU_FETCH_SUCCEEDED,
   ENVIRONMENTS_FETCH_SUCCEEDED,
+  FREEZE_APP,
+  MENU_FETCH_SUCCEEDED,
+  UNFREEZE_APP,
 } from './constants';
 
 /* eslint-disable new-cap */
 const initialState = fromJS({
+  blockApp: false,
   sections: List(), // eslint-disable-line new-cap
   environments: List(),
   loading: true,
@@ -19,11 +22,15 @@ const initialState = fromJS({
 
 function appReducer(state = initialState, action) {
   switch (action.type) {
-    case MENU_FETCH_SUCCEEDED:
-      return state.set('sections', List(action.menu.sections)).set('loading', false);
     case ENVIRONMENTS_FETCH_SUCCEEDED:
       return state
         .set('environments', List(action.environments.environments));
+    case FREEZE_APP:
+      return state.set('blockApp', true);
+    case MENU_FETCH_SUCCEEDED:
+      return state.set('sections', List(action.menu.sections)).set('loading', false);
+    case UNFREEZE_APP:
+      return state.set('blockApp', false);
     default:
       return state;
   }

packages/strapi-plugin-settings-manager/admin/src/containers/App/selectors.js

@@ -22,6 +22,11 @@ const selectLocationState = () => {
   };
 };
 
+const makeSelectBlockApp = () => createSelector(
+  selectGlobalDomain(),
+  (globalSate) => globalSate.get('blockApp'),
+);
+
 const makeSelectSections = () => createSelector(
   selectGlobalDomain(),
   (globalSate) => globalSate.get('sections').toJS(),
@@ -37,5 +42,11 @@ const makeSelectLoading = () => createSelector(
   (globalSate) => globalSate.get('loading'),
 );
 
-export { selectLocationState, makeSelectSections, makeSelectEnvironments, makeSelectLoading };
+export {
+  makeSelectBlockApp,
+  makeSelectEnvironments,
+  makeSelectLoading,
+  makeSelectSections,
+  selectLocationState,
+};
 export default selectGlobalDomain;

packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/sagas.js

@@ -2,6 +2,8 @@ import { LOCATION_CHANGE } from 'react-router-redux';
 
 import { forEach, set, map, replace } from 'lodash';
 import { call, take, put, fork, cancel, select, takeLatest } from 'redux-saga/effects';
+
+import { freezeApp, unfreezeApp } from 'containers/App/actions';
 import request from 'utils/request';
 
 // selectors
@@ -38,6 +40,8 @@ import {
 
 export function* editDatabase(action) {
   try {
+    yield put(freezeApp());
+
     const body = {};
 
     forEach(action.data, (value, key) => {
@@ -54,11 +58,13 @@ export function* editDatabase(action) {
 
     if (resp.ok) {
       strapi.notification.success('settings-manager.strapi.notification.success.databaseEdit');
+      yield put(unfreezeApp());
       yield put(databaseActionSucceeded());
     }
   } catch(error) {
     const formErrors = map(error.response.payload.message, err => ({ target: err.target, errors: map(err.messages, mess => ({ id: `settings-manager.${mess.id}`})) }));
 
+    yield put(unfreezeApp());
     yield put(databaseActionError(formErrors));
     strapi.notification.error('settings-manager.strapi.notification.error');
   }
@@ -66,15 +72,18 @@ export function* editDatabase(action) {
 
 export function* deleteDatabase(action) {
   try {
+    yield put(freezeApp());
     const opts = { method: 'DELETE' };
     const requestUrl = `/settings-manager/configurations/databases/${action.databaseToDelete}/${action.endPoint}`;
 
     const resp = yield call(request, requestUrl, opts, true);
 
     if (resp.ok) {
+      yield put(unfreezeApp());
       strapi.notification.success('settings-manager.strapi.notification.success.databaseDeleted');
     }
   } catch(error) {
+    yield put(unfreezeApp());
     yield put(databaseActionError([]));
     strapi.notification.error('settings-manager.strapi.notification.error');
   }
@@ -82,6 +91,7 @@ export function* deleteDatabase(action) {
 
 export function* deleteLanguage(action) {
   try {
+    yield put(freezeApp());
     const opts = {
       method: 'DELETE',
     };
@@ -90,9 +100,11 @@ export function* deleteLanguage(action) {
     const resp = yield call(request, requestUrl, opts, true);
 
     if (resp.ok) {
+      yield put(unfreezeApp());
       strapi.notification.success('settings-manager.strapi.notification.success.languageDelete');
     }
   } catch(error) {
+    yield put(unfreezeApp());
     yield put(languageActionError());
     strapi.notification.error('settings-manager.strapi.notification.error');
   }
@@ -151,6 +163,8 @@ export function* fetchLanguages() {
 
 export function* postLanguage() {
   try {
+    yield put(freezeApp());
+
     const newLanguage = yield select(makeSelectModifiedData());
 
     const body = {
@@ -165,10 +179,12 @@ export function* postLanguage() {
     const resp = yield call(request, requestUrl, opts, true);
 
     if (resp.ok) {
-      strapi.notification.success('settings-manager.strapi.notification.success.languageAdd');
       yield put(languageActionSucceeded());
+      yield put(unfreezeApp());
+      strapi.notification.success('settings-manager.strapi.notification.success.languageAdd');
     }
   } catch(error) {
+    yield put(unfreezeApp());
     yield put(languageActionError());
     strapi.notification.error('settings-manager.strapi.notification.error');
   }
@@ -176,6 +192,7 @@ export function* postLanguage() {
 
 export function* postDatabase(action) {
   try {
+    yield put(freezeApp());
     const body = {};
 
     forEach(action.data, (value, key) => {
@@ -191,6 +208,7 @@ export function* postDatabase(action) {
     const resp = yield call(request, requestUrl, opts, true);
 
     if (resp.ok) {
+      yield put(unfreezeApp());
       yield put(databaseActionSucceeded());
       strapi.notification.success('settings-manager.strapi.notification.success.databaseAdd');
     }
@@ -210,6 +228,7 @@ export function* postDatabase(action) {
 
 export function* settingsEdit(action) {
   try {
+    yield put(freezeApp());
     // Show button loader
     yield put(setLoader());
 
@@ -221,13 +240,16 @@ export function* settingsEdit(action) {
     const resp = yield  call(request, requestUrl, opts, true);
 
     if (resp.ok) {
-      strapi.notification.success('settings-manager.strapi.notification.success.settingsEdit');
       yield put(editSettingsSucceeded());
       yield put(unsetLoader());
+      yield put(unfreezeApp());
+
+      strapi.notification.success('settings-manager.strapi.notification.success.settingsEdit');
     }
   } catch(error) {
-    strapi.notification.error('settings-manager.strapi.notification.error');
     yield put(unsetLoader());
+    yield put(unfreezeApp());
+    strapi.notification.error('settings-manager.strapi.notification.error');
   }
 }