Begin using async/await.

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.BaseGet(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 constant 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 = constant.API_CONFIG) {
     const un = encodeURIComponent(username);
     const pw = encodeURIComponent(password);
     const next = encodeURIComponent(redirect);
@@ -46,29 +40,15 @@ class APIClient {
     const data = `username=${un}&password=${pw}&next=${next}`;
     const headers = { 'Content-Type': LOGIN_CONTENT_TYPE };
 
-    return this.http.get(API_LOGIN, { headers })
+    try {
-      .then(() => this.http.post(API_LOGIN, data, { headers }));
+      await this.http.get(constant.API_LOGIN, { headers });
+      await this.http.post(constant.API_LOGIN, data, { headers });
+    } catch (err) {
+      alert(`There was a problem logging in: ${err}`);
+    }
   }
 
-  logout () {
+  BaseGet = (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.BaseGet(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,6 +9,7 @@ import {
 
 import OrganizationCard from '../components/OrganizationCard';
 import api from '../api';
+import { API_ORGANIZATIONS } from '../endpoints';
 
 class Organizations extends Component {
   constructor (props) {
@@ -17,9 +18,9 @@ class Organizations extends Component {
     this.state = { organizations: [] };
   }
 
-  componentDidMount () {
+  async componentDidMount () {
-    api.getOrganizations()
+    const { data } = await api.BaseGet(API_ORGANIZATIONS);
-      .then(({ data }) => this.setState({ organizations: data.results }));
+    this.setState({ organizations: data.results });
   }
 
   render () {