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 () {