instead of using redux-thunk, use fetch in middleware by redux-fetch-middleware

Author: AllenFang

src-react/actions/bootstrap.js

@@ -1,12 +1,11 @@
+import * as types from 'constants/action-types';
 import { fetchUngitConfig } from './ungit-config';
+import store from 'store';
 import { fetchLatestVersion, fetchGitVersion } from './version';
-import { pending } from './common';
 
 export function bootstrap() {
-  return dispatch => {
-    dispatch(pending(3));
-    dispatch(fetchUngitConfig());
-    dispatch(fetchLatestVersion());
-    dispatch(fetchGitVersion());
-  };
+  store.dispatch(fetchUngitConfig());
+  store.dispatch(fetchLatestVersion());
+  store.dispatch(fetchGitVersion());
+  return { type: types.NO_OP };
 }

src-react/actions/common.js

@@ -1,29 +1,21 @@
 import * as types from 'constants/action-types';
 import { fetchUserConfig } from './user-config';
-import { apiError, pending } from './common';
+import store from 'store';
 
 export function fetchUngitConfig() {
-  return dispatch => {
-    // consider wrap API call in separate modules
-    // it will be easy to stub module's function when testing
-    fetch('http://localhost:8448/ungit/config')
-      .then(response => response.json())
-      .then(json => {
-        if (!json.config.bugtracking) {
-          dispatch(pending());
-          dispatch(fetchUserConfig());
+  return {
+    type: types.FETCH_UNGIT_CONFIG,
+    meta: {},
+    $payload: {
+      url: 'http://localhost:8448/ungit/config',
+      onResponse: response => {
+        if (response.status === 200) {
+          store.dispatch(fetchUserConfig());
+          return;
+        } else {
+          return false;
         }
-        dispatch(receiveUngitConfig(json));
-      })
-      .catch(e => {
-        dispatch(apiError(e.message));
-      });
+      }
+    }
   };
 };
-
-function receiveUngitConfig(ungitConfig) {
-  return {
-    type: types.RECEIVE_UNGIT_CONFIG,
-    payload: ungitConfig
-  };
-};

src-react/actions/ungit-config.js

@@ -1,25 +1,11 @@
 import * as types from 'constants/action-types';
-import { apiError } from './common';
 
 export function fetchUserConfig() {
-  return dispatch => {
-    // consider wrap API call in separate modules
-    // it will be easy to stub module's function when testing
-    fetch('http://localhost:8448/api/userconfig')
-      .then(response => response.json())
-      .then(json => {
-        dispatch(receiveUserConfig(json));
-      })
-      .catch(e => {
-        dispatch(apiError(e.message));
-      });
-  };
-};
-
-
-function receiveUserConfig(userConfig) {
   return {
-    type: types.RECEIVE_USER_CONFIG,
-    payload: userConfig
+    type: types.FETCH_USER_CONFIG,
+    meta: {},
+    $payload: {
+      url: 'http://localhost:8448/api/userconfig'
+    }
   };
 };

src-react/actions/user-config.js

@@ -1,46 +1,21 @@
 import * as types from 'constants/action-types';
-import { apiError } from './common';
 
 export function fetchLatestVersion() {
-  return dispatch => {
-    // consider wrap API call in separate modules
-    // it will be easy to stub module's function when testing
-    fetch('http://localhost:8448/api/latestversion')
-      .then(response => response.json())
-      .then(json => {
-        dispatch(receiveLatestVersion(json));
-      })
-      .catch(e => {
-        dispatch(apiError(e.message));
-      });
+  return {
+    type: types.FETCH_LATEST_VERSION,
+    meta: {},
+    $payload: {
+      url: 'http://localhost:8448/api/latestversion'
+    }
   };
 }
 
 export function fetchGitVersion() {
-  return dispatch => {
-    // consider wrap API call in separate modules
-    // it will be easy to stub module's function when testing
-    fetch('http://localhost:8448/api/gitversion')
-      .then(response => response.json())
-      .then(json => {
-        dispatch(receiveGitVersion(json));
-      })
-      .catch(e => {
-        dispatch(apiError(e.message));
-      });
-  };
-}
-
-function receiveGitVersion(gitVersion) {
   return {
-    type: types.RECEIVE_GIT_VERSION,
-    payload: gitVersion
+    type: types.FETCH_GIT_VERSION,
+    meta: {},
+    $payload: {
+      url: 'http://localhost:8448/api/gitversion'
+    }
   };
 }
-
-function receiveLatestVersion(latestVersion) {
-  return {
-    type: types.RECEIVE_LATEST_VERSION,
-    payload: latestVersion
-  };
-};

src-react/actions/version.js

@@ -1,6 +1,20 @@
-export const RECEIVE_GIT_VERSION = 'RECEIVE_GIT_VERSION';
-export const RECEIVE_LATEST_VERSION = 'RECEIVE_LATEST_VERSION';
-export const RECEIVE_USER_CONFIG = 'RECEIVE_USER_CONFIG';
-export const RECEIVE_UNGIT_CONFIG = 'RECEIVE_UNGIT_CONFIG';
-export const PATH_PAGE_PENDING = 'PATH_PAGE_PENDING';
-export const PATH_PAGE_API_ERR = 'PATH_PAGE_API_ERR';
+export const NO_OP = 'no-op';
+export const FETCH_USER_CONFIG = 'FETCH_USER_CONFIG';
+export const FETCH_LATEST_VERSION = 'FETCH_LATEST_VERSION';
+export const FETCH_GIT_VERSION = 'FETCH_GIT_VERSION';
+export const FETCH_UNGIT_CONFIG = 'FETCH_UNGIT_CONFIG';
+
+export const FETCH_USER_CONFIG_REQUEST = 'FETCH_USER_CONFIG_REQUEST';
+export const FETCH_LATEST_VERSION_REQUEST = 'FETCH_LATEST_VERSION_REQUEST';
+export const FETCH_GIT_VERSION_REQUEST = 'FETCH_GIT_VERSION_REQUEST';
+export const FETCH_UNGIT_CONFIG_REQUEST = 'FETCH_UNGIT_CONFIG_REQUEST';
+
+export const FETCH_USER_CONFIG_FAILURE = 'FETCH_USER_CONFIG_FAILURE';
+export const FETCH_LATEST_VERSION_FAILURE = 'FETCH_LATEST_VERSION_FAILURE';
+export const FETCH_GIT_VERSION_FAILURE = 'FETCH_GIT_VERSION_FAILURE';
+export const FETCH_UNGIT_CONFIG_FAILURE = 'FETCH_UNGIT_CONFIG_FAILURE';
+
+export const FETCH_USER_CONFIG_SUCCESS = 'FETCH_USER_CONFIG_SUCCESS';
+export const FETCH_LATEST_VERSION_SUCCESS = 'FETCH_LATEST_VERSION_SUCCESS';
+export const FETCH_GIT_VERSION_SUCCESS = 'FETCH_GIT_VERSION_SUCCESS';
+export const FETCH_UNGIT_CONFIG_SUCCESS = 'FETCH_UNGIT_CONFIG_SUCCESS';

src-react/constants/action-types.js

@@ -3,15 +3,15 @@ import * as types from 'constants/action-types';
 function app(state, action, config) {
 
   switch(action.type) {
-    case types.RECEIVE_UNGIT_CONFIG: {
+    case types.FETCH_UNGIT_CONFIG_SUCCESS: {
       const { ungitConfig } = config;
       const bugtrackingNagscreenDismissed = localStorage.getItem('bugtrackingNagscreenDismissed') === 'true';
       const showBugtrackingNagscreen = !ungitConfig.config.bugtracking && !bugtrackingNagscreenDismissed;
 
       return { ...state, showBugtrackingNagscreen };
     }
 
-    case types.RECEIVE_GIT_VERSION: {
+    case types.FETCH_GIT_VERSION_SUCCESS: {
       const { ungitConfig, versions: { gitVersion } } = config;
       const gitVersionCheckOverride = ungitConfig.config && ungitConfig.config.gitVersionCheckOverride;
       const gitVersionErrorDismissed = localStorage.getItem('gitVersionErrorDismissed') === 'true';
@@ -21,7 +21,7 @@ function app(state, action, config) {
       return { ...state, gitVersionErrorVisible };
     }
 
-    case types.RECEIVE_LATEST_VERSION: {
+    case types.FETCH_LATEST_VERSION_SUCCESS: {
       const { ungitConfig, versions: { latestVersion } } = config;
       const gitVersionCheckOverride = ungitConfig.config && ungitConfig.config.gitVersionCheckOverride;
       const outdated = latestVersion && latestVersion.outdated;
@@ -30,7 +30,7 @@ function app(state, action, config) {
       return { ...state, showNewVersionAvailable };
     }
 
-    case types.RECEIVE_USER_CONFIG: {
+    case types.FETCH_USER_CONFIG_SUCCESS: {
       const { userConfig } = config;
       const bugtrackingNagscreenDismissed = localStorage.getItem('bugtrackingNagscreenDismissed') === 'true';
       const showBugtrackingNagscreen = !userConfig.bugtracking && !bugtrackingNagscreenDismissed;

src-react/reducers/app.js

@@ -2,16 +2,22 @@ import * as types from 'constants/action-types';
 
 function path(state, action) {
   switch(action.type) {
-    case types.PATH_PAGE_PENDING:
-      return { ...state, pending: state.pending + action.payload };
-    case types.RECEIVE_UNGIT_CONFIG:
-    case types.RECEIVE_USER_CONFIG:
-    case types.RECEIVE_GIT_VERSION:
-    case types.RECEIVE_LATEST_VERSION:
+    case types.FETCH_USER_CONFIG_REQUEST:
+    case types.FETCH_LATEST_VERSION_REQUEST:
+    case types.FETCH_GIT_VERSION_REQUEST:
+    case types.FETCH_UNGIT_CONFIG_REQUEST:
+      return { ...state, pending: state.pending + 1 };
+    case types.FETCH_USER_CONFIG_FAILURE:
+    case types.FETCH_LATEST_VERSION_FAILURE:
+    case types.FETCH_GIT_VERSION_FAILURE:
+    case types.FETCH_UNGIT_CONFIG_FAILURE:
+      const { err } = action;
+      return { ...state, pending: state.pending - 1, errMessage: [ ...state.errMessage, err ] };
+    case types.FETCH_USER_CONFIG_SUCCESS:
+    case types.FETCH_LATEST_VERSION_SUCCESS:
+    case types.FETCH_GIT_VERSION_SUCCESS:
+    case types.FETCH_UNGIT_CONFIG_SUCCESS:
       return { ...state, pending: state.pending - 1 };
-    case types.PATH_PAGE_API_ERR:
-      const { payload: errMessage } = action;
-      return { ...state, pending: state.pending - 1, errMessage: [ ...state.errMessage, errMessage ] };
     default:
       return { ...state };
   }

src-react/reducers/path.js

@@ -2,8 +2,8 @@ import * as types from 'constants/action-types';
 
 function ungitConfig(state, action) {
   switch(action.type) {
-    case types.RECEIVE_UNGIT_CONFIG:
-      const { payload: ungitConfig } = action;
+    case types.FETCH_UNGIT_CONFIG_SUCCESS:
+      const { data: ungitConfig } = action;
       return { ...ungitConfig };
     default:
       return { ...state };

src-react/reducers/ungit-config.js

@@ -2,8 +2,8 @@ import * as types from 'constants/action-types';
 
 function userConfig(state, action) {
   switch(action.type) {
-    case types.RECEIVE_USER_CONFIG:
-      const { payload: userConfig } = action;
+    case types.FETCH_USER_CONFIG_SUCCESS:
+      const { data: userConfig } = action;
       return { ...userConfig };
     default:
       return { ...state };