redux and sagas is added for create action

webui/src/containers/Subscriber/Collection.js

@@ -2,7 +2,7 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { fetchSubscribers } from 'modules/crud/subscriber';
+import { fetchSubscribers, deleteSubscriber } from 'modules/crud/subscriber';
 import { select } from 'modules/crud/selectors';
 
 import { 
@@ -84,6 +84,8 @@ class Collection extends Component {
         this.documentHandler.show('change', { imsi });
       },
       delete: (imsi) => {
+        const { dispatch } = this.props
+        dispatch(deleteSubscriber(imsi));
       }
     }
   }

webui/src/containers/Subscriber/Document.js

@@ -2,7 +2,11 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { fetchSubscriber, fetchSubscribers } from 'modules/crud/subscriber';
+import { 
+  fetchSubscribers,
+  fetchSubscriber, 
+  createSubscriber
+} from 'modules/crud/subscriber';
 import { select } from 'modules/crud/selectors';
 
 import { Subscriber } from 'components';
@@ -44,6 +48,10 @@ class Document extends Component {
   }
 
   handleSubmit = (formData) => {
+    const { dispatch, action } = this.props;
+    if (action === 'add') {
+      dispatch(createSubscriber({}, formData));
+    }
     console.log(formData);
     this.props.onHide();
   }

webui/src/modules/crud/actions.js

@@ -44,7 +44,7 @@ export const fetchDocument = (model, id, url, params = {}, options = {}) => {
       failure: CRUD.FETCH_ONE_FAILURE,
       model,
       idProperty,
-      id,
+      id
     },
     payload: {
       method: 'get',
@@ -54,16 +54,35 @@ export const fetchDocument = (model, id, url, params = {}, options = {}) => {
   }
 }
 
+export const createDocument = (model, url, params = {}, data = {}, options = {}) => {
+  const idProperty = options.idProperty || '_id';
+  return {
+    type: CRUD.CREATE, 
+    meta: {
+      success: CRUD.CREATE_SUCCESS,
+      failure: CRUD.CREATE_FAILURE,
+      model,
+      idProperty,
+    },
+    payload: {
+      method: 'post',
+      url,
+      params,
+      data
+    }
+  }
+}
+
 export const deleteDocument = (model, id, url, params = {}, options = {}) => {
   const idProperty = options.idProperty || '_id';
   return {
-    type: CRUD.FETCH_ONE, 
+    type: CRUD.DELETE, 
     meta: {
-      success: CRUD.FETCH_ONE_SUCCESS,
-      failure: CRUD.FETCH_ONE_FAILURE,
+      success: CRUD.DELETE_SUCCESS,
+      failure: CRUD.DELETE_FAILURE,
       model,
       idProperty,
-      id,
+      id
     },
     payload: {
       method: 'delete',

webui/src/modules/crud/reducers.js

@@ -45,6 +45,12 @@ function byIdReducer(state = byIdInitialState, action) {
       return state.setIn([id, 'fetchedAt'], action.meta.fetchedAt)
                   .setIn([id, 'error'], action.payload)
                   .setIn([id, 'document'], null)
+    case CRUD.CREATE_SUCCESS:
+      return state.set(action.payload.data[idProperty], fromJS({
+        document: action.payload.data,
+        fetchedAt: action.meta.fetchedAt,
+        error: null
+      }))
     case CRUD.DELETE_SUCCESS:
       return state.delete(id)
     default:
@@ -87,6 +93,7 @@ function collectionsReducer(state = collectionsInitialState, action) {
         return state.push(collectionReducer(undefined, action));
       }
       return state.update(index, s => collectionReducer(s, action));
+    case CRUD.CREATE_SUCCESS:
     case CRUD.DELETE_SUCCESS:
       return state.map((item, idx) => (
         item.set('fetchedAt', null)
@@ -110,9 +117,15 @@ function crud(state = initialState, action) {
     case CRUD.FETCH_ONE_FAILURE:
       return state.updateIn([action.meta.model, 'byId'],
                             (s) => byIdReducer(s, action))
-    case CRUD.UPDATE:
-    case CRUD.UPDATE_SUCCESS:
-    case CRUD.UPDATE_FAILURE:
+    case CRUD.CREATE_SUCCESS:
+      return state.updateIn([action.meta.model, 'byId'],
+                            (s) => byIdReducer(s, action))
+                  .updateIn([action.meta.model, 'collections'],
+                            fromJS([]),
+                            (s) => collectionsReducer(s, action))
+    case CRUD.DELETE:
+    case CRUD.DELETE_SUCCESS:
+    case CRUD.DELETE_FAILURE:
       return state.updateIn([action.meta.model, 'byId'],
                             (s) => byIdReducer(s, action))
                   .updateIn([action.meta.model, 'collections'],

webui/src/modules/crud/sagas.js

@@ -36,6 +36,13 @@ function* watchFetchOne() {
   } 
 }
 
+function* watchCreate() {
+  while(true) {
+    const action = yield take(CRUD.CREATE);
+    yield fork(crudEntity, action);
+  } 
+}
+
 function* watchDelete() {
   while(true) {
     const action = yield take(CRUD.DELETE);
@@ -47,6 +54,7 @@ export default function* () {
   yield all([
     fork(watchFetch),
     fork(watchFetchOne),
+    fork(watchCreate),
     fork(watchDelete)
   ])
 }

webui/src/modules/crud/subscriber.js

@@ -1,6 +1,8 @@
 import {
   fetchCollection,
-  fetchDocument
+  fetchDocument,
+  createDocument,
+  deleteDocument
 } from './actions'
 
 const MODEL = 'subscribers';
@@ -14,6 +16,10 @@ export const fetchSubscriber = (imsi, params = {}) => {
   return fetchDocument(MODEL, imsi, `${URL}/${imsi}`, params, { idProperty: 'imsi' });
 }
 
+export const createSubscriber = (params = {}, data = {}) => {
+  return createDocument(MODEL, URL, params, data, { idProperty: 'imsi' });
+}
+
 export const deleteSubscriber = (imsi, params = {}) => {
   return deleteDocument(MODEL, imsi, `${URL}/${imsi}`, params, { idProperty: 'imsi' });
 }