initialize and pass api client to subviews

src/pages/Login.jsx

@@ -8,7 +8,6 @@ import {
 } from '@patternfly/react-core';
 
 import towerLogo from '../../images/tower-logo-header.svg';
-import api from '../api';
 
 class AtLogin extends Component {
   constructor (props) {
@@ -34,6 +33,7 @@ class AtLogin extends Component {
 
   handleSubmit = async event => {
     const { username, password, loading } = this.state;
+    const { api } = this.props;
 
     event.preventDefault();
 
@@ -54,7 +54,7 @@ class AtLogin extends Component {
 
   render () {
     const { username, password, isValidPassword } = this.state;
-    const { logo, alt } = this.props;
+    const { api, alt, logo } = this.props;
     const logoSrc = logo ? `data:image/jpeg;${logo}` : towerLogo;
 
     if (api.isAuthenticated()) {

src/pages/Organizations/index.jsx

@@ -5,12 +5,31 @@ import OrganizationAdd from './views/Organization.add';
 import OrganizationView from './views/Organization.view';
 import OrganizationsList from './views/Organizations.list';
 
-const Organizations = ({ match }) => (
+export default ({ api, match }) => (
   <Switch>
-    <Route path={`${match.path}/add`} component={OrganizationAdd} />
-    <Route path={`${match.path}/:id`} component={OrganizationView} />
-    <Route path={`${match.path}`} component={OrganizationsList} />
+    <Route
+      path={`${match.path}/add`}
+      render={() => (
+        <OrganizationAdd
+          api={api}
+        />
+      )}
+    />
+    <Route
+      path={`${match.path}/:id`}
+      render={() => (
+        <OrganizationView
+          api={api}
+        />
+      )}
+    />
+    <Route
+      path={`${match.path}`}
+      render={() => (
+        <OrganizationsList
+          api={api}
+        />
+      )}
+    />
   </Switch>
 );
-
-export default Organizations;

src/pages/Organizations/views/Organization.view.jsx

@@ -2,16 +2,13 @@ import React, { Component, Fragment } from 'react';
 import { i18nMark } from '@lingui/react';
 import {
   Switch,
-  Route
+  Route,
+  withRouter,
 } from 'react-router-dom';
-
 import OrganizationBreadcrumb from '../components/OrganizationBreadcrumb';
 import OrganizationDetail from '../components/OrganizationDetail';
 import OrganizationEdit from '../components/OrganizationEdit';
 
-import api from '../../../api';
-import { API_ORGANIZATIONS } from '../../../endpoints';
-
 class OrganizationView extends Component {
   constructor (props) {
     super(props);
@@ -47,13 +44,15 @@ class OrganizationView extends Component {
 
   async fetchOrganization () {
     const { mounted } = this.state;
+    const { api } = this.props;
+
     if (mounted) {
       this.setState({ error: false, loading: true });
 
       const { match } = this.props;
       const { parentBreadcrumbObj, organization } = this.state;
       try {
-        const { data } = await api.get(`${API_ORGANIZATIONS}${match.params.id}/`);
+        const { data } = await api.getOrganizationDetails(match.params.id);
         if (organization === 'loading') {
           this.setState({ organization: data });
         }
@@ -118,4 +117,4 @@ class OrganizationView extends Component {
   }
 }
 
-export default OrganizationView;
+export default withRouter(OrganizationView);

src/pages/Organizations/views/Organizations.list.jsx

@@ -17,9 +17,6 @@ import DataListToolbar from '../../../components/DataListToolbar';
 import OrganizationListItem from '../components/OrganizationListItem';
 import Pagination from '../../../components/Pagination';
 
-import api from '../../../api';
-import { API_ORGANIZATIONS } from '../../../endpoints';
-
 import {
   encodeQueryString,
   parseQueryString,
@@ -132,6 +129,7 @@ class Organizations extends Component {
   }
 
   async fetchOrganizations (queryParams) {
+    const { api } = this.props;
     const { page, page_size, order_by } = queryParams;
 
     let sortOrder = 'ascending';
@@ -145,7 +143,7 @@ class Organizations extends Component {
     this.setState({ error: false, loading: true });
 
     try {
-      const { data } = await api.get(API_ORGANIZATIONS, queryParams);
+      const { data } = await api.getOrganizations(queryParams);
       const { count, results } = data;
 
       const pageCount = Math.ceil(count / page_size);