Add action user-admin/fetchUsers

Change-Id: I6a956d118ffd352f8155650fee17219cdcefebc6

src/features/user-admin/redux/actions.js

@@ -0,0 +1 @@
+export { fetchUsers, dismissFetchUsersError } from './fetchUsers';

src/features/user-admin/redux/constants.js

@@ -0,0 +1,4 @@
+export const USER_ADMIN_FETCH_USERS_BEGIN = 'USER_ADMIN_FETCH_USERS_BEGIN';
+export const USER_ADMIN_FETCH_USERS_SUCCESS = 'USER_ADMIN_FETCH_USERS_SUCCESS';
+export const USER_ADMIN_FETCH_USERS_FAILURE = 'USER_ADMIN_FETCH_USERS_FAILURE';
+export const USER_ADMIN_FETCH_USERS_DISMISS_ERROR = 'USER_ADMIN_FETCH_USERS_DISMISS_ERROR';

src/features/user-admin/redux/fetchUsers.js

@@ -0,0 +1,89 @@
+import {
+  USER_ADMIN_FETCH_USERS_BEGIN,
+  USER_ADMIN_FETCH_USERS_SUCCESS,
+  USER_ADMIN_FETCH_USERS_FAILURE,
+  USER_ADMIN_FETCH_USERS_DISMISS_ERROR,
+} from './constants';
+
+export function fetchUsers(args = {}) {
+  return (dispatch, getState) => {
+    dispatch({
+      type: USER_ADMIN_FETCH_USERS_BEGIN,
+    });
+
+    // Return a promise so that you could control UI flow without states in the store.
+    // For example: after submit a form, you need to redirect the page to another when succeeds or show some errors message if fails.
+    // It's hard to use state to manage it, but returning a promise allows you to easily achieve it.
+    // e.g.: handleSubmit() { this.props.actions.submitForm(data).then(()=> {}).catch(() => {}); }
+    const promise = new Promise((resolve, reject) => {
+      const mtx = getState().common.mtx;
+      const doRequest = mtx._http.authedRequest(undefined, "GET", "/admin/users/" + mtx.credentials.userId)
+      doRequest.then(
+        (res) => {
+          dispatch({
+            type: USER_ADMIN_FETCH_USERS_SUCCESS,
+            data: res,
+          });
+          resolve(res);
+        },
+        // Use rejectHandler as the second argument so that render errors won't be caught.
+        (err) => {
+          dispatch({
+            type: USER_ADMIN_FETCH_USERS_FAILURE,
+            data: { error: err },
+          });
+          reject(err);
+        },
+      );
+    });
+
+    return promise;
+  };
+}
+
+// Async action saves request error by default, this method is used to dismiss the error info.
+// If you don't want errors to be saved in Redux store, just ignore this method.
+export function dismissFetchUsersError() {
+  return {
+    type: USER_ADMIN_FETCH_USERS_DISMISS_ERROR,
+  };
+}
+
+export function reducer(state, action) {
+  switch (action.type) {
+    case USER_ADMIN_FETCH_USERS_BEGIN:
+      // Just after a request is sent
+      return {
+        ...state,
+        fetchUsersPending: true,
+        fetchUsersError: null,
+      };
+
+    case USER_ADMIN_FETCH_USERS_SUCCESS:
+      // The request is success
+      return {
+        ...state,
+        userList: action.data,
+        fetchUsersPending: false,
+        fetchUsersError: null,
+      };
+
+    case USER_ADMIN_FETCH_USERS_FAILURE:
+      // The request is failed
+      return {
+        ...state,
+        fetchUsersPending: false,
+        fetchUsersError: action.data.error,
+      };
+
+    case USER_ADMIN_FETCH_USERS_DISMISS_ERROR:
+      // Dismiss the request failure error
+      return {
+        ...state,
+        fetchUsersError: null,
+      };
+
+    default:
+      return state;
+  }
+}

src/features/user-admin/redux/initialState.js

@@ -6,6 +6,9 @@
 
 // NOTE: initialState constant is necessary so that Rekit could auto add initial state when creating async actions.
 const initialState = {
+  userList: [],
+  fetchUsersPending: false,
+  fetchUsersError: null,
 };
 
 export default initialState;

src/features/user-admin/redux/reducer.js

@@ -7,8 +7,10 @@
 // https://medium.com/@nate_wang/a-new-approach-for-managing-redux-actions-91c26ce8b5da.
 
 import initialState from './initialState';
+import { reducer as fetchUsersReducer } from './fetchUsers';
 
 const reducers = [
+  fetchUsersReducer,
 ];
 
 export default function reducer(state = initialState, action) {