Add overlayBlocker when deleting a role in users plugin

packages/strapi-plugin-users-permissions/admin/src/components/List/index.js

@@ -48,7 +48,7 @@ const generateListTitle = (data, settingType) => {
   }
 };
 
-function List({ data, deleteActionSucceeded, deleteData, noButton, onButtonClick, settingType }) {
+function List({ data, deleteData, noButton, onButtonClick, settingType }) {
   return (
     <div className={styles.list}>
       <div className={styles.flex}>
@@ -69,7 +69,6 @@ function List({ data, deleteActionSucceeded, deleteData, noButton, onButtonClick
         <ul className={noButton ? styles.listPadded : ''}>
           {map(data, item => (
             <ListRow
-              deleteActionSucceeded={deleteActionSucceeded}
               deleteData={deleteData}
               item={item}
               key={item.name}
@@ -89,7 +88,6 @@ List.defaultProps = {
 
 List.propTypes = {
   data: PropTypes.array.isRequired,
-  deleteActionSucceeded: PropTypes.bool.isRequired,
   deleteData: PropTypes.func.isRequired,
   noButton: PropTypes.bool,
   onButtonClick: PropTypes.func,

packages/strapi-plugin-users-permissions/admin/src/components/ListRow/index.js

@@ -19,12 +19,6 @@ import styles from './styles.scss';
 class ListRow extends React.Component { // eslint-disable-line react/prefer-stateless-function
   state = { showModalDelete: false };
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.deleteActionSucceeded !== this.props.deleteActionSucceeded) {
-      this.setState({ showModalDelete: false });
-    }
-  }
-
   // Roles that can't be deleted && modified
   // Don't delete this line
   protectedRoleIDs = ['0'];
@@ -148,7 +142,10 @@ class ListRow extends React.Component { // eslint-disable-line react/prefer-stat
     }
   }
 
-  handleDelete = () => this.props.deleteData(this.props.item, this.props.settingType);
+  handleDelete = () => {
+    this.props.deleteData(this.props.item, this.props.settingType);
+    this.setState({ showModalDelete: false });
+  }
 
   render() {
     return (
@@ -176,7 +173,6 @@ ListRow.defaultProps = {
 };
 
 ListRow.propTypes = {
-  deleteActionSucceeded: PropTypes.bool.isRequired,
   deleteData: PropTypes.func.isRequired,
   item: PropTypes.object,
   settingType: PropTypes.string,

packages/strapi-plugin-users-permissions/admin/src/containers/App/actions.js

@@ -3,3 +3,20 @@
  * App actions
  *
  */
+
+import {
+  FREEZE_APP,
+  UNFREEZE_APP,
+} from './constants';
+
+export function freezeApp() {
+  return {
+    type: FREEZE_APP,
+  };
+}
+
+export function unfreezeApp() {
+  return {
+    type: UNFREEZE_APP,
+  };
+}

packages/strapi-plugin-users-permissions/admin/src/containers/App/constants.js

@@ -3,3 +3,6 @@
  * App constants
  *
  */
+
+export const FREEZE_APP = 'UsersPermissions/App/FREEZE_APP';
+export const UNFREEZE_APP = 'UsersPermissions/App/UNFREEZE_APP';

packages/strapi-plugin-users-permissions/admin/src/containers/App/index.js

@@ -20,6 +20,9 @@ import AuthPage from 'containers/AuthPage';
 import EditPage from 'containers/EditPage';
 import HomePage from 'containers/HomePage';
 import NotFoundPage from 'containers/NotFoundPage';
+import OverlayBlocker from 'components/OverlayBlocker';
+
+import { makeSelectBlockApp } from './selectors';
 
 class App extends React.Component {
   componentDidMount() {
@@ -37,6 +40,7 @@ class App extends React.Component {
   render() {
     return (
       <div className={pluginId}>
+        <OverlayBlocker isOpen={this.props.blockApp} />
         <Switch>
           <Route path={`/plugins/${pluginId}/auth/:authType/:id?`} component={AuthPage} exact />
           <Route path={`/plugins/${pluginId}/:settingType/:actionType/:id?`} component={EditPage} exact />
@@ -55,6 +59,7 @@ App.contextTypes = {
 };
 
 App.propTypes = {
+  blockApp: PropTypes.bool.isRequired,
   history: PropTypes.object.isRequired,
   location: PropTypes.object.isRequired,
 };
@@ -66,7 +71,9 @@ export function mapDispatchToProps(dispatch) {
   );
 }
 
-const mapStateToProps = createStructuredSelector({});
+const mapStateToProps = createStructuredSelector({
+  blockApp: makeSelectBlockApp(),
+});
 
 // Wrap the component to inject dispatch and state into it
 const withConnect = connect(mapStateToProps, mapDispatchToProps);

packages/strapi-plugin-users-permissions/admin/src/containers/App/reducer.js

@@ -5,11 +5,21 @@
  */
 
 import { fromJS } from 'immutable';
+import {
+  FREEZE_APP,
+  UNFREEZE_APP,
+} from './constants';
 
-const initialState = fromJS({});
+const initialState = fromJS({
+  blockApp: false,
+});
 
 function appReducer(state = initialState, action) {
   switch (action.type) {
+    case FREEZE_APP:
+      return state.set('blockApp', true);
+    case UNFREEZE_APP:
+      return state.set('blockApp', false);
     default:
       return state;
   }

packages/strapi-plugin-users-permissions/admin/src/containers/App/selectors.js

@@ -1,9 +1,16 @@
-// import { createSelector } from 'reselect';
+import { createSelector } from 'reselect';
 
 /**
  * Direct selector to the list state domain
  */
 
-// const selectGlobalDomain = () => state => state.get('global');
+const selectGlobalDomain = () => state => state.get('global');
 
-export {};
+const makeSelectBlockApp = () => createSelector(
+  selectGlobalDomain(),
+  (globalState) => globalState.get('blockApp'),
+);
+
+export {
+  makeSelectBlockApp,
+};

packages/strapi-plugin-users-permissions/admin/src/containers/HomePage/index.js

@@ -116,7 +116,6 @@ export class HomePage extends React.Component {
       <EditForm onChange={this.props.onChange} values={this.props.modifiedData} /> : (
         <List
           data={this.props.data}
-          deleteActionSucceeded={this.props.deleteActionSucceeded}
           deleteData={this.props.deleteData}
           noButton={noButtonList}
           onButtonClick={this.handleButtonClick}
@@ -161,7 +160,6 @@ HomePage.defaultProps = {};
 
 HomePage.propTypes = {
   data: PropTypes.array.isRequired,
-  deleteActionSucceeded: PropTypes.bool.isRequired,
   deleteData: PropTypes.func.isRequired,
   fetchData: PropTypes.func.isRequired,
   history: PropTypes.object.isRequired,

packages/strapi-plugin-users-permissions/admin/src/containers/HomePage/reducer.js

@@ -17,7 +17,6 @@ import {
 const initialState = fromJS({
   data: List([]),
   dataToDelete: Map({}),
-  deleteActionSucceeded: false,
   deleteEndPoint: '',
   initialData: Map({}),
   modifiedData: Map({}),
@@ -34,8 +33,7 @@ function homePageReducer(state = initialState, action) {
       return state
         .update('data', list => list.splice(action.indexDataToDelete, 1))
         .set('deleteEndPoint', '')
-        .set('dataToDelete', Map({}))
-        .set('deleteActionSucceeded', !state.get('deleteActionSucceeded'));
+        .set('dataToDelete', Map({}));
     case FETCH_DATA_SUCCEEDED:
       return state.set('data', List(action.data));
     case ON_CHANGE:

packages/strapi-plugin-users-permissions/admin/src/containers/HomePage/saga.js

@@ -1,6 +1,9 @@
 import { LOCATION_CHANGE } from 'react-router-redux';
 import { findIndex } from 'lodash';
 import { takeLatest, put, fork, take, cancel, select, call } from 'redux-saga/effects';
+
+import { freezeApp, unfreezeApp } from 'containers/App/actions';
+
 import request from 'utils/request';
 
 import {
@@ -8,6 +11,7 @@ import {
   fetchDataSucceeded,
   setForm,
 } from './actions';
+
 import {
   DELETE_DATA,
   FETCH_DATA,
@@ -30,17 +34,19 @@ export function* dataDelete() {
     const endPointAPI = yield select(makeSelectDeleteEndPoint());
 
     if (indexDataToDelete !== -1) {
+      yield put(freezeApp());
       const id = dataToDelete.id;
       const requestURL = `/users-permissions/${endPointAPI}/${id}`;
-      // TODO watchServerRestart
       const response = yield call(request, requestURL, { method: 'DELETE' }, true);
 
       if (response.ok) {
         yield put(deleteDataSucceeded(indexDataToDelete));
+        yield put(unfreezeApp());
         strapi.notification.success('users-permissions.notification.success.delete');
       }
     }
   } catch(err) {
+    yield put(unfreezeApp());
     strapi.notification.error('users-permissions.notification.error.delete');
   }
 }