update it

webui/src/components/Subscriber/Edit.js

@@ -215,7 +215,7 @@ class Edit extends Component {
       uiSchema
     };
     
-    if (action === 'change') {
+    if (action === 'update') {
       state = {
         ...state,
         uiSchema : {
@@ -277,11 +277,11 @@ class Edit extends Component {
     return (
       <Form 
         visible={visible}
-        title={(action === 'change') ? 'Edit Subscriber' : 'Create Subscriber'}
+        title={(action === 'update') ? 'Edit Subscriber' : 'Create Subscriber'}
         schema={this.state.schema}
         uiSchema={this.state.uiSchema}
         isLoading={isLoading}
-        formData={(action === 'change') ? this.props.formData : formData}
+        formData={(action === 'update') ? this.props.formData : formData}
         validate={validate}
         onHide={onHide}
         onSubmit={onSubmit} />

webui/src/containers/Subscriber/Collection.js

@@ -75,13 +75,13 @@ class Collection extends Component {
       })
     },
     actions: {
-      add: () => {
+      create: () => {
-        this.documentHandler.show('add');
+        this.documentHandler.show('create');
       },
       browser: (imsi) => {
       },
-      change: (imsi) => {
+      update: (imsi) => {
-        this.documentHandler.show('change', { imsi });
+        this.documentHandler.show('update', { imsi });
       },
       delete: (imsi) => {
         const { dispatch } = this.props
@@ -120,7 +120,7 @@ class Collection extends Component {
         <Subscriber.List
           subscribers={data}
           onShow={documentHandler.actions.browser}
-          onEdit={documentHandler.actions.change}
+          onEdit={documentHandler.actions.update}
           onDelete={documentHandler.actions.delete}
           search={search}
         />
@@ -129,9 +129,9 @@ class Collection extends Component {
           visible={!isLoading && !data.length}
           title="ADD A SUBSCRIBER"
           body="You have no subscribers... yet!"
-          onTitle={documentHandler.actions.add}
+          onTitle={documentHandler.actions.create}
           />
-        <FloatingButton onClick={documentHandler.actions.add}/>
+        <FloatingButton onClick={documentHandler.actions.create}/>
         <Document 
           { ...document }
           onHide={documentHandler.hide} />

webui/src/containers/Subscriber/Document.js

@@ -8,7 +8,15 @@ import {
   createSubscriber,
   updateSubscriber
 } from 'modules/crud/subscriber';
-import { select } from 'modules/crud/selectors';
+
+import {
+  clearActionStatus
+} from 'modules/crud/actions';
+
+import { 
+  select, 
+  selectActionStatus 
+} from 'modules/crud/selectors';
 
 import { Subscriber } from 'components';
 
@@ -29,18 +37,23 @@ class Document extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    const { subscriber } = nextProps
+    const { subscriber, status } = nextProps
-    const { dispatch } = this.props
+    const { dispatch, action, onHide } = this.props
     if (subscriber.needsFetch) {
       dispatch(subscriber.fetch)
     }
+
+    if (status.response) {
+      dispatch(clearActionStatus('subscribers', action));
+      onHide();
+    }
   }
 
   validate = (formData, errors) => {
     const { subscribers, action } = this.props;
     const { imsi } = formData;
     
-    if (action === 'add' && subscribers && subscribers.data &&
+    if (action === 'create' && subscribers && subscribers.data &&
       subscribers.data.filter(subscriber => subscriber.imsi === imsi).length > 0) {
       errors.imsi.addError(`'${imsi}' is duplicated`);
     }
@@ -50,15 +63,13 @@ class Document extends Component {
 
   handleSubmit = (formData) => {
     const { dispatch, action } = this.props;
-    if (action === 'add') {
+    if (action === 'create') {
       dispatch(createSubscriber({}, formData));
-    } else if (action === 'change') {
+    } else if (action === 'update') {
       dispatch(updateSubscriber(formData.imsi, {}, formData));
     } else {
       throw new Error(`Action type '${action}' is invalid.`);
     }
-    console.log(formData);
-    this.props.onHide();
   }
 
   render() {
@@ -95,7 +106,8 @@ class Document extends Component {
 Document = connect(
   (state, props) => ({ 
     subscribers: select(fetchSubscribers(), state.crud),
-    subscriber: select(fetchSubscriber(props.imsi), state.crud)
+    subscriber: select(fetchSubscriber(props.imsi), state.crud),
+    status: selectActionStatus('subscribers', state.crud, props.action)
   })
 )(Document);
 

webui/src/modules/crud/actions.js

@@ -14,6 +14,7 @@ export const CRUD = {
   DELETE: 'crud/DELETE',
   DELETE_SUCCESS: 'crud/DELETE_SUCCESS',
   DELETE_FAILURE: 'crud/DELETE_FAILURE',
+  CLEAR_ACTION_STATUS: 'crud/CLEAR_ACTION_STATUS',
 };
 
 export const fetchCollection = (model, url, params = {}, options = {}) => {
@@ -111,3 +112,10 @@ export const deleteDocument = (model, id, url, params = {}, options = {}) => {
     }
   }
 }
+
+export const clearActionStatus = (model, action) => {
+  return {
+    type: CRUD.CLEAR_ACTION_STATUS,
+    payload: { model, action }
+  }
+}

webui/src/modules/crud/reducers.js

@@ -130,6 +130,8 @@ function actionStatusReducer(state = actionStatusInitialState, action) {
   const idProperty = action.meta ? action.meta.idProperty : '_id';
   const id = action.meta ? action.meta.id : undefined;
   switch(action.type) {
+    case CRUD.CLEAR_ACTION_STATUS:
+      return state.set(action.payload.action, fromJS({}))
     case CRUD.CREATE:
       return state.set('create', fromJS({
         pending: true,
@@ -221,6 +223,9 @@ function crud(state = initialState, action) {
                             (s) => collectionsReducer(s, action))
                   .updateIn([action.meta.model, 'actionStatus'],
                             (s) => actionStatusReducer(s, action))
+    case CRUD.CLEAR_ACTION_STATUS:
+      return state.updateIn([action.payload.model, 'actionStatus'],
+                            (s) => actionStatusReducer(s, action))
     default:
       return state;
   }

webui/src/modules/crud/selectors.js

@@ -115,3 +115,26 @@ export function select(action, crud) {
   selection.fetch = action;
   return selection;
 }
+
+export function selectActionStatus(modelName, crud, action) {
+  const rawStatus = (crud.getIn([modelName, 'actionStatus', action]) || fromJS({})).toJS();
+  const { pending = false, id = null, isSuccess = null, payload = null } = rawStatus;
+
+  if (pending === true) {
+    return { id, pending }
+  }
+
+  if (isSuccess === true) {
+    return {
+      id,
+      pending,
+      response: payload
+    }
+  }
+
+  return {
+    id,
+    pending,
+    error: payload
+  }
+}