diff --git a/src/App.jsx b/src/App.jsx
index 3952904781..26cf0724b2 100644
--- a/src/App.jsx
+++ b/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 = () => {
- api.logout()
- .then(() => {
- this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' });
- });
+ onDevLogout = async () => {
+ await api.BaseGet(API_LOGOUT);
+ this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' });
}
render () {
diff --git a/src/api.js b/src/api.js
index 45b330755c..0671d6ea65 100644
--- a/src/api.js
+++ b/src/api.js
@@ -1,12 +1,6 @@
import axios from 'axios';
-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/`;
+import * as constant from './endpoints';
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 })
- .then(() => this.http.post(API_LOGIN, data, { headers }));
+ try {
+ 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 () {
- 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);
- }
+ BaseGet = (endpoint) => this.http.get(endpoint);
}
export default new APIClient();
diff --git a/src/endpoints.jsx b/src/endpoints.jsx
new file mode 100644
index 0000000000..d1499b00d6
--- /dev/null
+++ b/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/`;
\ No newline at end of file
diff --git a/src/index.jsx b/src/index.jsx
index aac9291f39..f5d675b04f 100644
--- a/src/index.jsx
+++ b/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 = () => {
- api.getRoot()
- .then(({ data }) => {
- const { custom_logo, custom_login_info } = data;
-
- render(, el);
- });
+const main = async () => {
+ const { custom_logo, custom_login_info } = await api.BaseGet(API_ROOT);
+ render(, el);
};
main();
diff --git a/src/pages/Organizations.jsx b/src/pages/Organizations.jsx
index d987ede528..99cad1650d 100644
--- a/src/pages/Organizations.jsx
+++ b/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 () {
- api.getOrganizations()
- .then(({ data }) => this.setState({ organizations: data.results }));
+ async componentDidMount () {
+ const { data } = await api.BaseGet(API_ORGANIZATIONS);
+ this.setState({ organizations: data.results });
}
render () {