Merge pull request #20 from ansible/async-await

Start using async-await

__tests__/App.test.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { shallow, mount } from 'enzyme';
 import App from '../src/App';
 import api from '../src/api';
+import { API_LOGOUT } from '../src/endpoints';
+
 import Dashboard from '../src/pages/Dashboard';
 import Login from '../src/pages/Login';
 import { asyncFlush } from '../jest.setup';
@@ -64,12 +66,13 @@ describe('<App />', () => {
   });
 
   test('api.logout called from logout button', async () => {
-    api.logout = jest.fn().mockImplementation(() => Promise.resolve({}));
+    api.get = jest.fn().mockImplementation(() => Promise.resolve({}));
     const appWrapper = mount(<App />);
     const logoutButton = appWrapper.find('LogoutButton');
     logoutButton.props().onDevLogout();
     appWrapper.setState({ activeGroup: 'foo', activeItem: 'bar' });
-    expect(api.logout).toHaveBeenCalledTimes(1);
+    expect(api.get).toHaveBeenCalledTimes(1);
+    expect(api.get).toHaveBeenCalledWith(API_LOGOUT);
     await asyncFlush();
     expect(appWrapper.state().activeItem).toBe(DEFAULT_ACTIVE_ITEM);
     expect(appWrapper.state().activeGroup).toBe(DEFAULT_ACTIVE_GROUP);

__tests__/api.test.js

@@ -1,14 +1,7 @@
 
 import mockAxios from 'axios';
 import APIClient from '../src/api';
-
+import * as endpoints from '../src/endpoints';
-const API_ROOT = '/api/';
-const API_LOGIN = `${API_ROOT}login/`;
-const API_LOGOUT = `${API_ROOT}logout/`;
-const API_V2 = `${API_ROOT}v2/`;
-const API_CONFIG = `${API_V2}config/`;
-const API_PROJECTS = `${API_V2}projects/`;
-const API_ORGANIZATIONS = `${API_V2}organizations/`;
 
 const CSRF_COOKIE_NAME = 'csrftoken';
 const CSRF_HEADER_NAME = 'X-CSRFToken';
@@ -52,9 +45,9 @@ describe('APIClient (api.js)', () => {
     APIClient.setCookie = jest.fn();
     APIClient.login(un, pw, next).then(() => {
       expect(mockAxios.get).toHaveBeenCalledTimes(1);
-      expect(mockAxios.get).toHaveBeenCalledWith(API_LOGIN, { headers });
+      expect(mockAxios.get).toHaveBeenCalledWith(endpoints.API_LOGIN, { headers });
       expect(mockAxios.post).toHaveBeenCalledTimes(1);
-      expect(mockAxios.post).toHaveBeenCalledWith(API_LOGIN, data, { headers });
+      expect(mockAxios.post).toHaveBeenCalledWith(endpoints.API_LOGIN, data, { headers });
       done();
     });
   });
@@ -67,7 +60,7 @@ describe('APIClient (api.js)', () => {
     const data = `username=${encodeURIComponent(un)}&password=${encodeURIComponent(pw)}&next=${encodeURIComponent(next)}`;
     APIClient.login(un, pw, next).then(() => {
       expect(mockAxios.post).toHaveBeenCalledTimes(1);
-      expect(mockAxios.post).toHaveBeenCalledWith(API_LOGIN, data, { headers });
+      expect(mockAxios.post).toHaveBeenCalledWith(endpoints.API_LOGIN, data, { headers });
       done();
     });
   });
@@ -76,42 +69,13 @@ describe('APIClient (api.js)', () => {
     const un = 'foo';
     const pw = 'bar';
     const headers = { 'Content-Type': LOGIN_CONTENT_TYPE };
-    const data = `username=${un}&password=${pw}&next=${encodeURIComponent(API_CONFIG)}`;
+    const data = `username=${un}&password=${pw}&next=${encodeURIComponent(endpoints.API_CONFIG)}`;
     APIClient.setCookie = jest.fn();
     APIClient.login(un, pw).then(() => {
       expect(mockAxios.post).toHaveBeenCalledTimes(1);
-      expect(mockAxios.post).toHaveBeenCalledWith(API_LOGIN, data, { headers });
+      expect(mockAxios.post).toHaveBeenCalledWith(endpoints.API_LOGIN, data, { headers });
       done();
     });
   });
 
-  test('logout calls get to logout route', () => {
-    APIClient.logout();
-    expect(mockAxios.get).toHaveBeenCalledTimes(1);
-    expect(mockAxios.get).toHaveBeenCalledWith(API_LOGOUT);
-  });
-
-  test('getConfig calls get to config route', () => {
-    APIClient.getConfig();
-    expect(mockAxios.get).toHaveBeenCalledTimes(1);
-    expect(mockAxios.get).toHaveBeenCalledWith(API_CONFIG);
-  });
-
-  test('getProjects calls get to projects route', () => {
-    APIClient.getProjects();
-    expect(mockAxios.get).toHaveBeenCalledTimes(1);
-    expect(mockAxios.get).toHaveBeenCalledWith(API_PROJECTS);
-  });
-
-  test('getOrganigzations calls get to organizations route', () => {
-    APIClient.getOrganizations();
-    expect(mockAxios.get).toHaveBeenCalledTimes(1);
-    expect(mockAxios.get).toHaveBeenCalledWith(API_ORGANIZATIONS);
-  });
-
-  test('getRoot calls get to root route', () => {
-    APIClient.getRoot();
-    expect(mockAxios.get).toHaveBeenCalledTimes(1);
-    expect(mockAxios.get).toHaveBeenCalledWith(API_ROOT);
-  });
 });

__tests__/pages/Organizations.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { API_ORGANIZATIONS } from '../../src/endpoints';
 import Organizations from '../../src/pages/Organizations';
 
 describe('<Organizations />', () => {
@@ -51,4 +52,9 @@ describe('<Organizations />', () => {
     expect(galleryItems.length).toBe(3);
     expect(orgCards.length).toBe(3);
   });
+
+  test('API Organization endpoint is valid', () => {
+    expect(API_ORGANIZATIONS).toBeDefined();
+  });
+
 });

src/App.jsx

@@ -22,6 +22,7 @@ import {
 import { global_breakpoint_md as breakpointMd } from '@patternfly/react-tokens';
 
 import api from './api';
+import { API_LOGOUT } from './endpoints';
 
 // import About from './components/About';
 import LogoutButton from './components/LogoutButton';
@@ -79,11 +80,9 @@ class App extends React.Component {
     this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' });
   }
 
-  onDevLogout = () => {
+  onDevLogout = async () => {
-    api.logout()
+    await api.get(API_LOGOUT);
-      .then(() => {
+    this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' });
-        this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' });
-      });
   }
 
   render () {

src/api.js

@@ -1,12 +1,6 @@
 import axios from 'axios';
 
-const API_ROOT = '/api/';
+import * as endpoints from './endpoints';
-const API_LOGIN = `${API_ROOT}login/`;
-const API_LOGOUT = `${API_ROOT}logout/`;
-const API_V2 = `${API_ROOT}v2/`;
-const API_CONFIG = `${API_V2}config/`;
-const API_PROJECTS = `${API_V2}projects/`;
-const API_ORGANIZATIONS = `${API_V2}organizations/`;
 
 const CSRF_COOKIE_NAME = 'csrftoken';
 const CSRF_HEADER_NAME = 'X-CSRFToken';
@@ -38,7 +32,7 @@ class APIClient {
     return authenticated;
   }
 
-  login (username, password, redirect = API_CONFIG) {
+  async login (username, password, redirect = endpoints.API_CONFIG) {
     const un = encodeURIComponent(username);
     const pw = encodeURIComponent(password);
     const next = encodeURIComponent(redirect);
@@ -46,29 +40,11 @@ class APIClient {
     const data = `username=${un}&password=${pw}&next=${next}`;
     const headers = { 'Content-Type': LOGIN_CONTENT_TYPE };
 
-    return this.http.get(API_LOGIN, { headers })
+    await this.http.get(endpoints.API_LOGIN, { headers });
-      .then(() => this.http.post(API_LOGIN, data, { headers }));
+    await this.http.post(endpoints.API_LOGIN, data, { headers });
   }
 
-  logout () {
+  get = (endpoint) => this.http.get(endpoint);
-    return this.http.get(API_LOGOUT);
-  }
-
-  getConfig () {
-    return this.http.get(API_CONFIG);
-  }
-
-  getProjects () {
-    return this.http.get(API_PROJECTS);
-  }
-
-  getOrganizations () {
-    return this.http.get(API_ORGANIZATIONS);
-  }
-
-  getRoot () {
-    return this.http.get(API_ROOT);
-  }
 }
 
 export default new APIClient();

src/endpoints.jsx

@@ -0,0 +1,7 @@
+export const API_ROOT = '/api/';
+export const API_LOGIN = `${API_ROOT}login/`;
+export const API_LOGOUT = `${API_ROOT}logout/`;
+export const API_V2 = `${API_ROOT}v2/`;
+export const API_CONFIG = `${API_V2}config/`;
+export const API_PROJECTS = `${API_V2}projects/`;
+export const API_ORGANIZATIONS = `${API_V2}organizations/`;

src/index.jsx

@@ -3,6 +3,7 @@ import { render } from 'react-dom';
 
 import App from './App';
 import api from './api';
+import { API_ROOT } from './endpoints';
 
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/patternfly-next/patternfly.css';
@@ -11,13 +12,9 @@ import './app.scss';
 
 const el = document.getElementById('app');
 
-const main = () => {
+const main = async () => {
-  api.getRoot()
+    const { custom_logo, custom_login_info } = await api.get(API_ROOT);
-    .then(({ data }) => {
+    render(<App logo={custom_logo} loginInfo={custom_login_info} />, el);
-      const { custom_logo, custom_login_info } = data;
-
-      render(<App logo={custom_logo} loginInfo={custom_login_info} />, el);
-    });
 };
 
 main();

src/pages/Organizations.jsx

@@ -9,22 +9,30 @@ import {
 
 import OrganizationCard from '../components/OrganizationCard';
 import api from '../api';
+import { API_ORGANIZATIONS } from '../endpoints';
 
 class Organizations extends Component {
   constructor (props) {
     super(props);
 
-    this.state = { organizations: [] };
+    this.state = {
+      organizations: [],
+      error: false,
+    };
   }
 
-  componentDidMount () {
+  async componentDidMount () {
-    api.getOrganizations()
+    try {
-      .then(({ data }) => this.setState({ organizations: data.results }));
+      const { data } = await api.get(API_ORGANIZATIONS);
+      this.setState({ organizations: data.results });
+    } catch (err) {
+      this.setState({ error: err });
+    }
   }
 
   render () {
     const { light, medium } = PageSectionVariants;
-    const { organizations } = this.state;
+    const { organizations, error } = this.state;
 
     return (
       <Fragment>
@@ -38,6 +46,7 @@ class Organizations extends Component {
                 <OrganizationCard key={o.id} organization={o} />
               </GalleryItem>
             ))}
+            { error ? <div>error</div> : '' }
           </Gallery>
         </PageSection>
       </Fragment>