Adding a UI reducer to manage UI state

client/coral-admin/src/components/UserDetail.js

@@ -116,6 +116,7 @@ class UserDetail extends React.Component {
       toggleSelectAll,
       unbanUser,
       unsuspendUser,
+      modal,
     } = this.props;
 
     // if totalComments is 0, you're dividing by zero
@@ -129,7 +130,7 @@ class UserDetail extends React.Component {
     const suspended = isSuspended(user);
     
     return (
-      <ClickOutside onClickOutside={hideUserDetail}>
+      <ClickOutside onClickOutside={!modal && hideUserDetail}>
         <Drawer className="talk-admin-user-detail-drawer" onClose={hideUserDetail}>
           <h3 className={cn(styles.username, 'talk-admin-user-detail-username')}>
             {user.username}

client/coral-admin/src/containers/UserDetail.js

@@ -230,6 +230,7 @@ const mapStateToProps = (state) => ({
   selectedCommentIds: state.userDetail.selectedCommentIds,
   statuses: state.userDetail.statuses,
   activeTab: state.userDetail.activeTab,
+  modal: state.ui.modal
 });
 
 const mapDispatchToProps = (dispatch) => ({

client/coral-admin/src/reducers/index.js

@@ -8,6 +8,7 @@ import config from './config';
 import banUserDialog from './banUserDialog';
 import suspendUserDialog from './suspendUserDialog';
 import userDetail from './userDetail';
+import ui from './ui';
 
 export default {
   auth,
@@ -20,4 +21,5 @@ export default {
   moderation,
   install,
   config,
+  ui,
 };

client/coral-admin/src/reducers/ui.js

@@ -0,0 +1,33 @@
+import {SHOW_BAN_USER_DIALOG, HIDE_BAN_USER_DIALOG} from '../constants/banUserDialog';
+import {SHOW_SUSPEND_USER_DIALOG, HIDE_SUSPEND_USER_DIALOG} from '../constants/suspendUserDialog';
+
+const initialState = {
+  modal: false
+};
+
+export default function config (state = initialState, action) {
+  switch (action.type) {
+  case SHOW_BAN_USER_DIALOG:
+    return {
+      ...state,
+      modal: true,
+    };
+  case SHOW_SUSPEND_USER_DIALOG:
+    return {
+      ...state,
+      modal: true,
+    };
+  case HIDE_BAN_USER_DIALOG:
+    return {
+      ...state,
+      modal: false,
+    };
+  case HIDE_SUSPEND_USER_DIALOG:
+    return {
+      ...state,
+      modal: false,
+    };
+  default:
+    return state;
+  }
+}