feat(client): group editor success and error alerts

cheminfo · Sep 8, 2017 · a3e00b4 · a3e00b4
1 parent f237270
commit a3e00b4
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 10 deletions.
diff --git a/src/client/actions/db.js b/src/client/actions/db.js
@@ -30,7 +30,6 @@ export const SET_MEMBERSHIPS = 'SET_MEMBERSHIPS';
 export const setMemberships = createAction(SET_MEMBERSHIPS);
 
 export const UPDATE_GROUP = 'UPDATE_GROUP';
-const updateGroupAction = createAction(UPDATE_GROUP);
 
 export function addValueToGroup(groupName, type, value) {
     return updateGroup(groupName, type, value, 'PUT');
@@ -55,7 +54,11 @@ function updateGroup(groupName, type, value, method) {
     } else {
         throw new Error('unreachable');
     }
-    return updateGroupAction(apiFetchJSON(url, {method}).then(() => apiFetchJSON(groupUrl)));
+    return {
+        type: UPDATE_GROUP,
+        meta: groupName,
+        payload: apiFetchJSON(url, {method}).then(() => apiFetchJSON(groupUrl))
+    }
 }
 
 export const CREATE_GROUP = 'CREATE_GROUP';
@@ -91,15 +94,23 @@ export function setLdapGroupProperties(groupName, properties) {
 }
 
 export function syncLdapGroup(groupName) {
-    const groupUrl = `db/${dbManager.currentDb}/group/${groupName}`;
-    const syncUrl = `${groupUrl}/ldap/sync`;
     return {
         type: UPDATE_GROUP,
         meta: groupName,
-        payload: apiFetchJSON(syncUrl).then(() => apiFetchJSON(groupUrl))
+        payload: doLdapSync(groupName)
     };
 }
 
+async function doLdapSync(groupName) {
+    const groupUrl = `db/${dbManager.currentDb}/group/${groupName}`;
+    const syncUrl = `${groupUrl}/ldap/sync`;
+    let res = await apiFetchJSON(syncUrl);
+    if(!res.error) {
+        res = await apiFetchJSON(groupUrl);
+    }
+    return res;
+}
+
 export function addDefaultGroup(user, group) {
     return editDefaultGroup(user, group, 'add');
 }

diff --git a/src/client/components/Ephemere.js b/src/client/components/Ephemere.js
@@ -0,0 +1,28 @@
+import React, {Component} from 'react';
+
+class Ephemere extends Component {
+    render() {
+        return (
+            <div ref="ephemere">
+                {this.props.children}
+            </div>
+        );
+    }
+
+    componentWillUpdate() {
+        if(this.refs.ephemere) {
+            this.refs.ephemere.style.display = 'block';
+        }
+        if(this.timeout) {
+            clearTimeout(this.timeout);
+        }
+    }
+
+    componentDidUpdate() {
+        this.timeout = setTimeout(() => {
+            this.refs.ephemere.style.display = 'none';
+        }, this.props.timeout || 3000)
+    }
+}
+
+export default Ephemere;
diff --git a/src/client/components/GroupEditor.js b/src/client/components/GroupEditor.js
@@ -2,6 +2,7 @@ import React, {PropTypes} from 'react';
 
 import GroupDataEditor from './GroupDataEditor';
 import EditableTextField from './EditableTextField';
+import Ephemere from './Ephemere';
 
 const GroupEditor = ({group, addValueToGroup, removeValueFromGroup, removeGroup, setLdapGroupProperties, syncLdapGroup}) => {
     return (
@@ -64,6 +65,11 @@ const GroupEditor = ({group, addValueToGroup, removeValueFromGroup, removeGroup,
                             />
                         </div>
                     </div>
+                    <Ephemere>
+                        {group.error ? <div className="alert alert-danger">{group.error}</div> : null }
+                        {group.success ? <div className="alert alert-success">{group.success}</div> : null }
+                    </Ephemere>
+
                 </div>
             </div>
         </div>

diff --git a/src/client/reducers/db.js b/src/client/reducers/db.js
@@ -34,14 +34,34 @@ const dbReducer = (state = initialState, action) => {
             return Object.assign({}, state, {userGroups: newGroupList});
         }
         case `${UPDATE_GROUP}_FULFILLED`: {
-            const groupName = action.payload.name;
-            const index = state.userGroups.findIndex(group => group.name === groupName);
-            if (index === -1) {
+            const index = state.userGroups.findIndex(group => group.name === action.meta);
+            if(index === -1) {
                 throw new Error('should not happen');
             }
             const newGroupList = state.userGroups.slice();
-            newGroupList[index] = action.payload;
-            return Object.assign({}, state, {userGroups: newGroupList});
+            if(action.payload.error) {
+                newGroupList[index] = Object.assign({}, newGroupList[index], {error: action.payload.error, success: null});
+                return Object.assign({}, state, {
+                    userGroups: newGroupList
+                });
+            } else {
+                if(action.payload.name !== action.meta) {
+                    throw new Error('should not happen')
+                }
+                newGroupList[index] = action.payload;
+                newGroupList[index].success = 'Group sucessfully updated';
+                newGroupList[index].error = null;
+                return Object.assign({}, state, {
+                    userGroups: newGroupList
+                });
+            }
+
+
+        }
+        case CLEAR_MESSAGE: {
+            return Object.assign({}, state, {
+                messages: state.messages.delete(state.messages.findIndex(el => el.id === action.payload))
+            });
         }
         case `${SET_DEFAULT_GROUPS}`: {
             return Object.assign({}, state, {defaultGroups: action.payload});