Merge pull request #332 from bertho-zero/axios

Axios

Author: bertho-zero

docs/ApiConfig.md

@@ -8,15 +8,14 @@ First things first, you need to add `APIHOST` settings in `package.json`. If you
 
 If the port you use differs between your dev & prod API hosts, you may want to get rid of the `APIPORT` setting, including it right in `APIHOST`. Same with the protocol – if you use HTTP in dev but HTTPS in prod, you may want to include the protocol right in `APIHOST`, and then get rid of the explicit `"http://"` found in the next section.
 
-## Update `ApiClient`
+## Update `apiClient`
 
-Open up `src/helpers/ApiClient.js`. You'll see this line:
+Open up `src/helpers/apiClient.js`. You'll see this line:
 
 ``` javascript
-   if (__SERVER__) {
-     // Prepend host and port of the API server to the path.
-    return 'http://' + config.apiHost + adjustedPath;
-   }
+  const instance = axios.create({
+    baseURL: __SERVER__ ? `http://${config.apiHost}:${config.apiPort}` : '/api'
+  });
 ```
 
 If you added `http://` or `https://` to your APIHOST setting, then you need to remove it here.

package.json

@@ -119,6 +119,7 @@
   },
   "dependencies": {
     "async": "^2.1.4",
+    "axios": "^0.16.2",
     "babel-core": "^6.26.0",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
@@ -149,6 +150,7 @@
     "feathers-rest": "^1.7.3",
     "feathers-socketio": "^2.0.0",
     "http-proxy": "^1.16.2",
+    "is-promise": "^2.1.0",
     "js-cookie": "^2.1.3",
     "localforage": "^1.4.3",
     "lru-memoize": "^1.0.1",
@@ -176,7 +178,6 @@
     "serve-favicon": "^2.3.2",
     "socket.io": "^2.0.1",
     "socket.io-client": "^2.0.1",
-    "superagent": "^3.4.4",
     "verror": "^1.10.0"
   },
   "devDependencies": {

src/app.js

@@ -6,7 +6,7 @@ import rest from 'feathers-rest/client';
 import socketio from 'feathers-socketio/client';
 import authentication from 'feathers-authentication-client';
 import io from 'socket.io-client';
-import superagent from 'superagent';
+import axios from 'axios';
 import config from './config';
 
 const storage = __SERVER__ ? null : require('localforage');
@@ -23,17 +23,19 @@ export const socket = io('', { path: host('/ws'), autoConnect: false });
 
 export function createApp(req) {
   if (req === 'rest') {
-    return configureApp(rest(host('/api')).superagent(superagent));
+    return configureApp(rest(host('/api')).axios(axios));
   }
 
   if (__SERVER__ && req) {
     const app = configureApp(
-      rest(host('/api')).superagent(superagent, {
-        headers: {
-          Cookie: req.get('cookie'),
-          authorization: req.header('authorization') || ''
-        }
-      })
+      rest(host('/api')).axios(
+        axios.create({
+          headers: {
+            Cookie: req.get('cookie'),
+            authorization: req.header('authorization') || ''
+          }
+        })
+      )
     );
 
     const accessToken = req.header('authorization') || (req.cookies && req.cookies['feathers-jwt']);

src/client.js

@@ -15,7 +15,7 @@ import localForage from 'localforage';
 import { socket, createApp } from 'app';
 import { Provider } from 'components';
 import createStore from './redux/create';
-import ApiClient from './helpers/ApiClient';
+import apiClient from './helpers/apiClient';
 import getRoutes from './routes';
 import isOnline from './utils/isOnline';
 
@@ -24,7 +24,7 @@ const offlinePersistConfig = {
   whitelist: ['auth', 'info', 'chat']
 };
 
-const client = new ApiClient();
+const client = apiClient();
 const app = createApp();
 const restApp = createApp('rest');
 const dest = document.getElementById('content');

src/components/__tests__/InfoBar-test.js

@@ -9,9 +9,9 @@ import { InfoBar } from 'components';
 import { Provider } from 'react-redux';
 import { browserHistory } from 'react-router';
 import createStore from 'redux/create';
-import ApiClient from 'helpers/ApiClient';
+import apiClient from 'helpers/apiClient';
 
-const client = new ApiClient();
+const client = apiClient();
 
 describe('InfoBar', () => {
   const mockStore = {

src/helpers/ApiClient.js

@@ -0,0 +1,36 @@
+import axios from 'axios';
+import config from '../config';
+
+export default function apiClient(req) {
+  const instance = axios.create({
+    baseURL: __SERVER__ ? `http://${config.apiHost}:${config.apiPort}` : '/api'
+  });
+
+  let token;
+
+  instance.setJwtToken = newToken => {
+    token = newToken;
+  };
+
+  instance.interceptors.request.use(
+    conf => {
+      if (__SERVER__) {
+        if (req.header('cookie')) {
+          conf.headers.Cookie = req.header('cookie');
+        }
+        if (req.header('authorization')) {
+          conf.headers.authorization = token || req.header('authorization') || '';
+        }
+      }
+      return conf;
+    },
+    error => Promise.reject(error)
+  );
+
+  instance.interceptors.response.use(
+    response => response.data,
+    error => Promise.reject(error.response ? error.response.data : error)
+  );
+
+  return instance;
+}

src/helpers/apiClient.js

@@ -11,9 +11,6 @@ export default function reducer(state = initialState /* , action = {} */) {
 export function isValidEmail(data) {
   return {
     types: [IS_VALID, IS_VALID_SUCCESS, IS_VALID_FAIL],
-    promise: ({ client }) =>
-      client.post('/survey/isValid', {
-        data
-      })
+    promise: ({ client }) => client.post('/survey/isValid', data)
   };
 }

src/redux/modules/survey.js

@@ -100,10 +100,7 @@ export function save(widget) {
   return {
     types: [SAVE, SAVE_SUCCESS, SAVE_FAIL],
     id: widget.id,
-    promise: ({ client }) =>
-      client.post('/widget/update', {
-        data: widget
-      })
+    promise: ({ client }) => client.post('/widget/update', widget)
   };
 }
 

src/redux/modules/widgets.js

@@ -16,7 +16,7 @@ import createHistory from 'react-router/lib/createMemoryHistory';
 import { Provider } from 'components';
 import config from 'config';
 import createStore from 'redux/create';
-import ApiClient from 'helpers/ApiClient';
+import apiClient from 'helpers/apiClient';
 import Html from 'helpers/Html';
 import getRoutes from 'routes';
 import { createApp } from 'app';
@@ -82,7 +82,7 @@ app.use((req, res) => {
     webpackIsomorphicTools.refresh();
   }
   const providers = {
-    client: new ApiClient(req),
+    client: apiClient(req),
     app: createApp(req),
     restApp: createApp(req)
   };