use axios instead of fetch

Author: chenkie

03-Calling-an-API/package.json

@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "auth0-js": "^8.7.0",
+    "axios": "^0.16.2",
     "bootstrap": "^3.3.7",
     "cors": "^2.8.1",
     "dotenv": "^4.0.0",

03-Calling-an-API/src/Auth/Auth.js

@@ -21,7 +21,6 @@ export default class Auth {
     this.isAuthenticated = this.isAuthenticated.bind(this);
     this.getAccessToken = this.getAccessToken.bind(this);
     this.getProfile = this.getProfile.bind(this);
-    this.authFetch = this.authFetch.bind(this);
   }
 
   login() {
@@ -87,29 +86,4 @@ export default class Auth {
     let expiresAt = JSON.parse(localStorage.getItem('expires_at'));
     return new Date().getTime() < expiresAt;
   }
-
-  authFetch(url, options) {
-    const headers = {
-      Accept: 'application/json',
-      'Content-Type': 'application/json'
-    };
-
-    if (this.isAuthenticated()) {
-      headers['Authorization'] = 'Bearer ' + this.getAccessToken();
-    }
-
-    return fetch(url, { headers, ...options })
-      .then(this.checkStatus)
-      .then(response => response.json());
-  }
-
-  checkStatus(response) {
-    if (response.status >= 200 && response.status < 300) {
-      return response;
-    } else {
-      let error = new Error(response.statusText);
-      error.response = response;
-      throw error;
-    }
-  }
 }

03-Calling-an-API/src/Auth/auth0-variables.js.example

@@ -2,5 +2,5 @@ export const AUTH_CONFIG = {
   domain: '{DOMAIN}',
   clientId: '{CLIENT_ID}',
   callbackUrl: 'http://localhost:3000/callback',
-  apiUrl: {API_IDENTIFIER}
+  apiUrl: '{API_IDENTIFIER}'
 }

03-Calling-an-API/src/Home/Home.js

@@ -1,7 +1,9 @@
 import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
 
 class Home extends Component {
+  login() {
+    this.props.auth.login();
+  }
   render() {
     const { isAuthenticated } = this.props.auth;
     return (
@@ -17,11 +19,12 @@ class Home extends Component {
           !isAuthenticated() && (
               <h4>
                 You are not logged in! Please{' '}
-                <Link
-                  to={'/login'}
+                <a
+                  style={{ cursor: 'pointer' }}
+                  onClick={this.login.bind(this)}
                 >
                   Log In
-                </Link>
+                </a>
                 {' '}to continue.
               </h4>
             )

03-Calling-an-API/src/Ping/Ping.js

@@ -1,20 +1,22 @@
 import React, { Component } from 'react';
 import { Button } from 'react-bootstrap';
 import { API_URL } from './../constants';
+import axios from 'axios';
 
 class Ping extends Component {
   componentWillMount() {
     this.setState({ message: '' });
   }
   ping() {
-    fetch(`${API_URL}/public`)
-      .then(res => res.json())
-      .then(data => this.setState({ message: data.message }));
+    axios.get(`${API_URL}/public`)
+      .then(response => this.setState({ message: response.data.message }))
+      .catch(error => this.setState({ message: error.message }));
   }
   securedPing() {
-    const { authFetch } = this.props.auth;
-    authFetch(`${API_URL}/private`)
-      .then(data => this.setState({ message: data.message }))
+    const { getAccessToken } = this.props.auth;
+    const headers = { 'Authorization': `Bearer ${getAccessToken()}`}
+    axios.get(`${API_URL}/private`, { headers })
+      .then(response => this.setState({ message: response.data.message }))
       .catch(error => this.setState({ message: error.message }));
   }
   render() {