update api calls to utilized network context

src/pages/Organizations/screens/Organization/Organization.jsx

@@ -13,13 +13,16 @@ import {
   PageSection
 } from '@patternfly/react-core';
 
+import { withNetwork } from '../../../../contexts/Network';
+
+import Tabs from '../../../../components/Tabs/Tabs';
+import Tab from '../../../../components/Tabs/Tab';
+
 import OrganizationAccess from './OrganizationAccess';
 import OrganizationDetail from './OrganizationDetail';
 import OrganizationEdit from './OrganizationEdit';
 import OrganizationNotifications from './OrganizationNotifications';
 import OrganizationTeams from './OrganizationTeams';
-import Tabs from '../../../../components/Tabs/Tabs';
-import Tab from '../../../../components/Tabs/Tab';
 
 class Organization extends Component {
   constructor (props) {
@@ -47,18 +50,18 @@ class Organization extends Component {
 
   async fetchOrganization () {
     const {
-      api,
       match,
-      setBreadcrumb
+      setBreadcrumb,
+      api,
+      handleHttpError
     } = this.props;
+
     try {
-      const { data } = await api.getOrganizationDetails(+match.params.id);
-      this.setState({ organization: data });
+      const { data } = await api.getOrganizationDetails(parseInt(match.params.id, 10));
       setBreadcrumb(data);
+      this.setState({ organization: data, loading: false });
     } catch (error) {
-      this.setState({ error: true });
-    } finally {
-      this.setState({ loading: false });
+      handleHttpError(error) || this.setState({ error: true, loading: false });
     }
   }
 
@@ -66,7 +69,6 @@ class Organization extends Component {
     const {
       location,
       match,
-      api,
       history
     } = this.props;
 
@@ -125,7 +127,6 @@ class Organization extends Component {
                 path="/organizations/:id/edit"
                 render={() => (
                   <OrganizationEdit
-                    api={api}
                     match={match}
                     organization={organization}
                   />
@@ -137,7 +138,6 @@ class Organization extends Component {
                 path="/organizations/:id/details"
                 render={() => (
                   <OrganizationDetail
-                    api={api}
                     match={match}
                     organization={organization}
                   />
@@ -148,7 +148,6 @@ class Organization extends Component {
               path="/organizations/:id/access"
               render={() => (
                 <OrganizationAccess
-                  api={api}
                   match={match}
                   location={location}
                   history={history}
@@ -160,7 +159,9 @@ class Organization extends Component {
               render={() => (
                 <OrganizationTeams
                   id={Number(match.params.id)}
-                  api={api}
+                  match={match}
+                  location={location}
+                  history={history}
                 />
               )}
             />
@@ -168,7 +169,6 @@ class Organization extends Component {
               path="/organizations/:id/notifications"
               render={() => (
                 <OrganizationNotifications
-                  api={api}
                   match={match}
                   location={location}
                   history={history}
@@ -184,4 +184,4 @@ class Organization extends Component {
   }
 }
 
-export default withRouter(Organization);
+export default withNetwork(withRouter(Organization));

src/pages/Organizations/screens/Organization/OrganizationAccess.jsx

@@ -1,4 +1,7 @@
 import React from 'react';
+
+import { withNetwork } from '../../../../contexts/Network';
+
 import OrganizationAccessList from '../../components/OrganizationAccessList';
 
 class OrganizationAccess extends React.Component {
@@ -38,4 +41,4 @@ class OrganizationAccess extends React.Component {
   }
 }
 
-export default OrganizationAccess;
+export default withNetwork(OrganizationAccess);

src/pages/Organizations/screens/Organization/OrganizationDetail.jsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import { I18n } from '@lingui/react';
 import { Trans, t } from '@lingui/macro';
+
 import {
   CardBody,
   Button,
@@ -9,6 +10,9 @@ import {
   TextContent,
   TextVariants,
 } from '@patternfly/react-core';
+
+import { withNetwork } from '../../../../contexts/Network';
+
 import BasicChip from '../../../../components/BasicChip/BasicChip';
 
 const detailWrapperStyle = {
@@ -68,6 +72,7 @@ class OrganizationDetail extends Component {
   async loadInstanceGroups () {
     const {
       api,
+      handleHttpError,
       match
     } = this.props;
     try {
@@ -78,7 +83,7 @@ class OrganizationDetail extends Component {
         instanceGroups: [...data.results]
       });
     } catch (err) {
-      this.setState({ error: true });
+      handleHttpError(err) || this.setState({ error: true });
     }
   }
 
@@ -173,4 +178,4 @@ class OrganizationDetail extends Component {
   }
 }
 
-export default OrganizationDetail;
+export default withNetwork(OrganizationDetail);

src/pages/Organizations/screens/Organization/OrganizationEdit.jsx

@@ -2,8 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { CardBody } from '@patternfly/react-core';
-
 import OrganizationForm from '../../components/OrganizationForm';
+import { withNetwork } from '../../../../contexts/Network';
 
 class OrganizationEdit extends Component {
   constructor (props) {
@@ -20,14 +20,13 @@ class OrganizationEdit extends Component {
   }
 
   async handleSubmit (values, groupsToAssociate, groupsToDisassociate) {
-    const { api, organization } = this.props;
+    const { api, organization, handleHttpError } = this.props;
     try {
       await api.updateOrganizationDetails(organization.id, values);
       await this.submitInstanceGroups(groupsToAssociate, groupsToDisassociate);
-    } catch (err) {
-      this.setState({ error: err });
-    } finally {
       this.handleSuccess();
+    } catch (err) {
+      handleHttpError(err) || this.setState({ error: err });
     }
   }
 
@@ -42,7 +41,7 @@ class OrganizationEdit extends Component {
   }
 
   async submitInstanceGroups (groupsToAssociate, groupsToDisassociate) {
-    const { api, organization } = this.props;
+    const { api, organization, handleHttpError } = this.props;
     const url = organization.related.instance_groups;
 
     try {
@@ -53,18 +52,17 @@ class OrganizationEdit extends Component {
         await api.disassociate(url, id);
       }));
     } catch (err) {
-      this.setState({ error: err });
+      handleHttpError(err) || this.setState({ error: err });
     }
   }
 
   render () {
-    const { api, organization } = this.props;
+    const { organization } = this.props;
     const { error } = this.state;
 
     return (
       <CardBody>
         <OrganizationForm
-          api={api}
           organization={organization}
           handleSubmit={this.handleSubmit}
           handleCancel={this.handleCancel}
@@ -76,7 +74,6 @@ class OrganizationEdit extends Component {
 }
 
 OrganizationEdit.propTypes = {
-  api: PropTypes.shape().isRequired,
   organization: PropTypes.shape().isRequired,
 };
 
@@ -85,4 +82,4 @@ OrganizationEdit.contextTypes = {
 };
 
 export { OrganizationEdit as _OrganizationEdit };
-export default withRouter(OrganizationEdit);
+export default withNetwork(withRouter(OrganizationEdit));

src/pages/Organizations/screens/Organization/OrganizationNotifications.jsx

@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
 
+import { withNetwork } from '../../../../contexts/Network';
+
 import NotificationsList from '../../../../components/NotificationsList/Notifications.list';
 
 class OrganizationNotifications extends Component {
@@ -60,4 +62,4 @@ class OrganizationNotifications extends Component {
   }
 }
 
-export default OrganizationNotifications;
+export default withNetwork(OrganizationNotifications);

src/pages/Organizations/screens/Organization/OrganizationTeams.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import OrganizationTeamsList from '../../components/OrganizationTeamsList';
 import { parseQueryString } from '../../../../qs';
+import { withNetwork } from '../../../../contexts/Network';
 
 const DEFAULT_QUERY_PARAMS = {
   page: 1,
@@ -47,7 +48,7 @@ class OrganizationTeams extends React.Component {
   }
 
   async readOrganizationTeamsList () {
-    const { api, id } = this.props;
+    const { api, handleHttpError, id } = this.props;
     const params = this.getQueryParams();
     this.setState({ isLoading: true });
     try {
@@ -61,7 +62,7 @@ class OrganizationTeams extends React.Component {
         isInitialized: true,
       });
     } catch (error) {
-      this.setState({
+      handleHttpError(error) && this.setState({
         error,
         isLoading: false,
         isInitialized: true,
@@ -94,9 +95,8 @@ class OrganizationTeams extends React.Component {
 }
 
 OrganizationTeams.propTypes = {
-  id: PropTypes.number.isRequired,
-  api: PropTypes.shape().isRequired,
+  id: PropTypes.number.isRequired
 };
 
 export { OrganizationTeams as _OrganizationTeams };
-export default withRouter(OrganizationTeams);
+export default withNetwork(withRouter(OrganizationTeams));

src/pages/Organizations/screens/OrganizationAdd.jsx

@@ -13,6 +13,8 @@ import {
 } from '@patternfly/react-core';
 import { TimesIcon } from '@patternfly/react-icons';
 
+import { withNetwork } from '../../../contexts/Network';
+
 import OrganizationForm from '../components/OrganizationForm';
 
 class OrganizationAdd extends React.Component {
@@ -29,7 +31,7 @@ class OrganizationAdd extends React.Component {
   }
 
   async handleSubmit (values, groupsToAssociate) {
-    const { api } = this.props;
+    const { api, handleHttpError } = this.props;
     try {
       const { data: response } = await api.createOrganization(values);
       const instanceGroupsUrl = response.related.instance_groups;
@@ -37,10 +39,9 @@ class OrganizationAdd extends React.Component {
         await Promise.all(groupsToAssociate.map(async id => {
           await api.associateInstanceGroup(instanceGroupsUrl, id);
         }));
-      } catch (err) {
-        this.setState({ error: err });
-      } finally {
         this.handleSuccess(response.id);
+      } catch (err) {
+        handleHttpError(err) || this.setState({ error: err });
       }
     } catch (err) {
       this.setState({ error: err });
@@ -58,7 +59,6 @@ class OrganizationAdd extends React.Component {
   }
 
   render () {
-    const { api } = this.props;
     const { error } = this.state;
 
     return (
@@ -82,7 +82,6 @@ class OrganizationAdd extends React.Component {
               </CardHeader>
               <CardBody>
                 <OrganizationForm
-                  api={api}
                   handleSubmit={this.handleSubmit}
                   handleCancel={this.handleCancel}
                 />
@@ -105,4 +104,4 @@ OrganizationAdd.contextTypes = {
 };
 
 export { OrganizationAdd as _OrganizationAdd };
-export default withRouter(OrganizationAdd);
+export default withNetwork(withRouter(OrganizationAdd));

src/pages/Organizations/screens/OrganizationsList.jsx

@@ -21,6 +21,9 @@ import {
 } from '@patternfly/react-core';
 
 import { CubesIcon } from '@patternfly/react-icons';
+
+import { withNetwork } from '../../../contexts/Network';
+
 import DataListToolbar from '../../../components/DataListToolbar';
 import OrganizationListItem from '../components/OrganizationListItem';
 import Pagination from '../../../components/Pagination';
@@ -170,14 +173,21 @@ class OrganizationsList extends Component {
   }
 
   async handleOrgDelete (event) {
-    const { orgsToDelete } = this.state;
+    const { orgsToDelete, handleHttpError } = this.state;
     const { api } = this.props;
+    let errorHandled;
 
-    orgsToDelete.forEach(async (org) => {
-      await api.destroyOrganization(org.id);
+    try {
+      await Promise.all(orgsToDelete.map(async (org) => api.destroyOrganization(org.id)));
+      this.handleClearOrgsToDelete();
+    } catch (err) {
+      errorHandled = handleHttpError(err);
+    } finally {
+      if (!errorHandled) {
         const queryParams = this.getQueryParams();
         this.fetchOrganizations(queryParams);
-    });
+      }
+    }
     event.preventDefault();
   }
 
@@ -192,7 +202,7 @@ class OrganizationsList extends Component {
   }
 
   async fetchOrganizations (queryParams) {
-    const { api } = this.props;
+    const { api, handleHttpError } = this.props;
     const { page, page_size, order_by } = queryParams;
 
     let sortOrder = 'ascending';
@@ -220,6 +230,7 @@ class OrganizationsList extends Component {
         sortedColumnKey,
         results,
         selected: [],
+        loading: false
       };
 
       // This is in place to track whether or not the initial request
@@ -233,9 +244,7 @@ class OrganizationsList extends Component {
       this.setState(stateToUpdate);
       this.updateUrl(queryParams);
     } catch (err) {
-      this.setState({ error: true });
-    } finally {
-      this.setState({ loading: false });
+      handleHttpError(err) || this.setState({ error: true, loading: false });
     }
   }
 
@@ -271,8 +280,8 @@ class OrganizationsList extends Component {
               isOpen={isModalOpen}
               onClose={this.handleClearOrgsToDelete}
               actions={[
-                <Button variant="danger" aria-label="confirm-delete" onClick={this.handleOrgDelete}>Delete</Button>,
-                <Button variant="secondary" aria-label="cancel-delete" onClick={this.handleClearOrgsToDelete}>Cancel</Button>
+                <Button variant="danger" key="delete" aria-label="confirm-delete" onClick={this.handleOrgDelete}>Delete</Button>,
+                <Button variant="secondary" key="cancel" aria-label="cancel-delete" onClick={this.handleClearOrgsToDelete}>Cancel</Button>
               ]}
             >
               {warningMsg}
@@ -350,4 +359,4 @@ class OrganizationsList extends Component {
   }
 }
 
-export default withRouter(OrganizationsList);
+export default withNetwork(withRouter(OrganizationsList));