Add axios

Author: completejavascript

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "axios": "^0.19.1",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "customize-cra": "^0.9.1",
     "hookrouter": "^1.2.3",

src/constants/configs.js

@@ -3,23 +3,28 @@ const projectEnv = 'local';
 // const projectEnv = 'stg';
 // const projectEnv = 'prod';
 
-let domain;
+let domain, baseAPI;
 
 switch (projectEnv) {
   case 'dev':
     domain = 'your-dev-domain';
+    baseAPI = 'your-dev-api-url';
     break;
   case 'stg':
     domain = 'your-stg-domain';
+    baseAPI = 'your-stg-api-url';
     break;
   case 'prod':
     domain = 'your-prod-domain';
+    baseAPI = 'your-prod-api-url';
     break;
   default:
     domain = 'localhost'; // local
+    baseAPI = 'http://jsonplaceholder.typicode.com/';
     break;
 }
 
 export default {
-  domain
+  domain,
+  baseAPI
 };

src/constants/cookies.js

@@ -1 +1,2 @@
 export const LANGUAGE_TRANS = 'language_trans';
+export const ACCESS_TOKEN = 'access_token';

src/helpers/api.js

@@ -0,0 +1,33 @@
+import axios from 'axios';
+import Cookie from 'js-cookie';
+import Config from '../constants/configs';
+import { ACCESS_TOKEN } from '../constants/cookies';
+
+const api = axios.create({
+  baseURL: Config.baseAPI,
+  timeout: 1000
+});
+
+api.interceptors.request.use(
+  config => {
+    if (config.baseURL === Config.baseAPI && !config.headers.Authorization) {
+      const token = Cookie.get(ACCESS_TOKEN);
+      if (token) {
+        config.headers.Authorization = `Bearer ${token}`;
+      }
+    }
+    return config;
+  },
+  error => Promise.reject(error)
+);
+
+api.interceptors.response.use(
+  response => {
+    // Any status code that lie within the range of 2xx cause this function to trigger
+    // Do something with response data
+    return response;
+  },
+  error => Promise.reject(error)
+);
+
+export default api;

src/pages/HomePage/HomePage.js

@@ -1,10 +1,28 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 import Navigation from '../../components/Navigation/Navigation';
 import Title from '../../components/Title/Title';
+import api from '../../helpers/api';
 import './HomePage.scss';
 
 const HomePage = () => {
+  const testApi = async () => {
+    console.log('test api');
+    try {
+      const { data } = await api.request({
+        method: 'get',
+        url: 'users/1'
+      });
+      console.log({ data });
+    } catch (error) {
+      console.log('error to get users: ', error);
+    }
+  };
+
+  useEffect(() => {
+    testApi();
+  }, []);
+
   return (
     <div className="home-page-container">
       <Navigation />

yarn.lock

@@ -2004,6 +2004,13 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.9.0.tgz#24390e6ad61386b0a747265754d2a17219de862c"
   integrity sha512-Uvq6hVe90D0B2WEnUqtdgY1bATGz3mw33nH9Y+dmA+w5DHvUmBgkr5rM/KCHpCsiFNRUfokW/szpPPgMK2hm4A==
 
+axios@^0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.1.tgz#8a6a04eed23dfe72747e1dd43c604b8f1677b5aa"
+  integrity sha512-Yl+7nfreYKaLRvAvjNPkvfjnQHJM1yLBY3zhqAwcJSwR/6ETkanUgylgtIvkvz0xJ+p/vZuNw8X7Hnb7Whsbpw==
+  dependencies:
+    follow-redirects "1.5.10"
+
 axobject-query@^2.0.2:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.1.1.tgz#2a3b1271ec722d48a4cd4b3fcc20c853326a49a7"
@@ -3362,6 +3369,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6.
   dependencies:
     ms "2.0.0"
 
+debug@=3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+  dependencies:
+    ms "2.0.0"
+
 debug@^3.0.0, debug@^3.1.1, debug@^3.2.5, debug@^3.2.6:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
@@ -4409,6 +4423,13 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+follow-redirects@1.5.10:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
+  dependencies:
+    debug "=3.1.0"
+
 follow-redirects@^1.0.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.9.0.tgz#8d5bcdc65b7108fe1508649c79c12d732dcedb4f"