refactor OrganizationTeams/OrganizationTeamsList

src/pages/Organizations/components/OrganizationTeamsList.jsx

@@ -1,24 +1,17 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-
 import {
   DataList, DataListItem, DataListCell, Text,
   TextContent, TextVariants
 } from '@patternfly/react-core';
-
 import { I18n, i18nMark } from '@lingui/react';
 import { t } from '@lingui/macro';
-
+import { withRouter, Link } from 'react-router-dom';
-import {
-  Link
-} from 'react-router-dom';
 
 import Pagination from '../../../components/Pagination';
 import DataListToolbar from '../../../components/DataListToolbar';
 
-import {
+import { encodeQueryString } from '../../../qs';
-  parseQueryString,
-} from '../../../qs';
 
 const detailWrapperStyle = {
   display: 'grid',
@@ -45,125 +38,55 @@ class OrganizationTeamsList extends React.Component {
   constructor (props) {
     super(props);
 
-    const { page, page_size } = this.readQueryParams();
-
     this.state = {
-      page,
+      error: null,
-      page_size,
-      count: 0,
-      sortOrder: 'ascending',
-      sortedColumnKey: 'name',
-      results: [],
     };
 
-    this.readOrganizationTeamsList = this.readOrganizationTeamsList.bind(this);
     this.handleSetPage = this.handleSetPage.bind(this);
     this.handleSort = this.handleSort.bind(this);
-    this.readQueryParams = this.readQueryParams.bind(this);
   }
 
-  componentDidMount () {
+  getPageCount () {
-    const queryParams = this.readQueryParams();
+    const { itemCount, queryParams: { page_size } } = this.props;
-    try {
+    return Math.ceil(itemCount / page_size);
-      this.readOrganizationTeamsList(queryParams);
+  }
-    } catch (error) {
+
-      this.setState({ error });
+  getSortOrder () {
+    const { queryParams } = this.props;
+    if (queryParams.order_by && queryParams.order_by.startsWith('-')) {
+      return 'descending';
     }
+    return 'ascending';
   }
 
   handleSetPage (pageNumber, pageSize) {
-    const { sortOrder, sortedColumnKey } = this.state;
+    this.pushHistoryState({
-    const page = parseInt(pageNumber, 10);
+      page: pageNumber,
-    const page_size = parseInt(pageSize, 10);
+      page_size: pageSize,
-    let order_by = sortedColumnKey;
+    });
-
-    // Preserve sort order when paginating
-    if (sortOrder === 'descending') {
-      order_by = `-${order_by}`;
-    }
-
-    const queryParams = this.readQueryParams({ page, page_size, order_by });
-
-    this.readOrganizationTeamsList(queryParams);
   }
 
   handleSort (sortedColumnKey, sortOrder) {
-    const { page_size } = this.state;
+    this.pushHistoryState({
-
+      order_by: sortOrder === 'ascending' ? sortedColumnKey : `-${sortedColumnKey}`,
-    let order_by = sortedColumnKey;
+    });
-
-    if (sortOrder === 'descending') {
-      order_by = `-${order_by}`;
-    }
-
-    const queryParams = this.readQueryParams({ order_by, page_size });
-
-    this.readOrganizationTeamsList(queryParams);
   }
 
-  readQueryParams (overrides = {}) {
+  pushHistoryState (params) {
-    const { location } = this.props;
+    const { history } = this.props;
-    const { search } = location;
+    const { pathname } = history.location;
-
+    const qs = encodeQueryString(params);
-    const searchParams = parseQueryString(search.substring(1));
+    history.push(`${pathname}?${qs}`);
-
-    return Object.assign({}, this.defaultParams, searchParams, overrides);
-  }
-
-  async readOrganizationTeamsList (queryParams) {
-    const { match, onReadTeamsList } = this.props;
-
-    const { page, page_size, order_by } = queryParams;
-
-    let sortOrder = 'ascending';
-    let sortedColumnKey = order_by;
-
-    if (order_by.startsWith('-')) {
-      sortOrder = 'descending';
-      sortedColumnKey = order_by.substring(1);
-    }
-
-    try {
-      const { data:
-        { count = 0, results = [] }
-      } = await onReadTeamsList(match.params.id, queryParams);
-      const pageCount = Math.ceil(count / page_size);
-
-      const stateToUpdate = {
-        count,
-        page,
-        pageCount,
-        page_size,
-        sortOrder,
-        sortedColumnKey,
-        results
-      };
-
-      this.setState(stateToUpdate);
-    } catch (error) {
-      this.setState({ error });
-    }
   }
 
   render () {
-    const {
+    const { teams, itemCount, queryParams } = this.props;
-      results,
+    const { error } = this.state;
-      error,
-      count,
-      page_size,
-      pageCount,
-      page,
-      sortedColumnKey,
-      sortOrder
-    } = this.state;
     return (
       <I18n>
         {({ i18n }) => (
           <Fragment>
-            {!error && results.length <= 0 && (
+            {error && (
-              <h1>Loading...</h1> // TODO: replace with proper loading state
-            )}
-            {error && results.length <= 0 && (
               <Fragment>
                 <div>{error.message}</div>
                 {error.response && (
@@ -171,17 +94,17 @@ class OrganizationTeamsList extends React.Component {
                 )}
               </Fragment> // TODO: replace with proper error handling
             )}
-            {results.length > 0 && (
+            {teams.length > 0 && (
               <Fragment>
                 <DataListToolbar
-                  sortedColumnKey={sortedColumnKey}
+                  sortedColumnKey={queryParams.sort_by}
-                  sortOrder={sortOrder}
+                  sortOrder={this.getSortOrder()}
                   columns={this.columns}
                   onSearch={() => { }}
                   onSort={this.handleSort}
                 />
                 <DataList aria-label={i18n._(t`Teams List`)}>
-                  {results.map(({ url, id, name }) => (
+                  {teams.map(({ url, id, name }) => (
                     <DataListItem aria-labelledby={i18n._(t`teams-list-item`)} key={id}>
                       <DataListCell>
                         <TextContent style={detailWrapperStyle}>
@@ -194,10 +117,10 @@ class OrganizationTeamsList extends React.Component {
                   ))}
                 </DataList>
                 <Pagination
-                  count={count}
+                  count={itemCount}
-                  page={page}
+                  page={queryParams.page}
-                  pageCount={pageCount}
+                  pageCount={this.getPageCount()}
-                  page_size={page_size}
+                  page_size={queryParams.page_size}
                   onSetPage={this.handleSetPage}
                 />
               </Fragment>
@@ -210,7 +133,14 @@ class OrganizationTeamsList extends React.Component {
 }
 
 OrganizationTeamsList.propTypes = {
-  onReadTeamsList: PropTypes.func.isRequired,
+  teams: PropTypes.arrayOf({}).isRequired,
+  itemCount: PropTypes.number.isRequired,
+  queryParams: PropTypes.shape({
+    page: PropTypes.number,
+    page_size: PropTypes.number,
+    order_by: PropTypes.string,
+  }).isRequired
 };
 
-export default OrganizationTeamsList;
+export { OrganizationTeamsList as _OrganizationTeamsList };
+export default withRouter(OrganizationTeamsList);

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

@@ -159,10 +159,9 @@ class Organization extends Component {
               path="/organizations/:id/teams"
               render={() => (
                 <OrganizationTeams
+                  id={Number(match.params.id)}
+                  searchString={location.search}
                   api={api}
-                  match={match}
-                  location={location}
-                  history={history}
                 />
               )}
             />

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

@@ -1,34 +1,93 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router-dom';
 import OrganizationTeamsList from '../../components/OrganizationTeamsList';
+import { parseQueryString } from '../../../../qs';
+
+const DEFAULT_QUERY_PARAMS = {
+  page: 1,
+  page_size: 5,
+  order_by: 'name',
+};
 
 class OrganizationTeams extends React.Component {
   constructor (props) {
     super(props);
 
     this.readOrganizationTeamsList = this.readOrganizationTeamsList.bind(this);
+
+    this.state = {
+      isLoading: false,
+      error: null,
+      itemCount: 0,
+      teams: [],
+    };
   }
 
-  readOrganizationTeamsList (id, params) {
+  componentDidMount () {
-    const { api } = this.props;
+    this.readOrganizationTeamsList();
-    return api.readOrganizationTeamsList(id, params);
+  }
+
+  componentDidUpdate (prevProps) {
+    const { location } = this.props;
+    if (location !== prevProps.location) {
+      this.readOrganizationTeamsList();
+    }
+  }
+
+  getQueryParams () {
+    const { searchString } = this.props;
+    const searchParams = parseQueryString(searchString.substring(1));
+
+    return {
+      ...DEFAULT_QUERY_PARAMS,
+      ...searchParams,
+    };
+  }
+
+  async readOrganizationTeamsList () {
+    const { api, id } = this.props;
+    const params = this.getQueryParams();
+    this.setState({ isLoading: true });
+    try {
+      const {
+        data: { count = 0, results = [] },
+      } = await api.readOrganizationTeamsList(id, params);
+      this.setState({
+        itemCount: count,
+        teams: results,
+        isLoading: false,
+      });
+    } catch (error) {
+      this.setState({
+        error,
+        isLoading: false
+      });
+    }
   }
 
   render () {
-    const {
+    const { teams, itemCount, isLoading } = this.state;
-      location,
+
-      match,
+    if (isLoading) {
-      history,
+      return <div>Loading...</div>;
-    } = this.props;
+    }
 
     return (
       <OrganizationTeamsList
-        onReadTeamsList={this.readOrganizationTeamsList}
+        teams={teams}
-        match={match}
+        itemCount={itemCount}
-        location={location}
+        queryParams={this.getQueryParams()}
-        history={history}
       />
     );
   }
 }
 
-export default OrganizationTeams;
+OrganizationTeams.propTypes = {
+  id: PropTypes.number.isRequired,
+  searchString: PropTypes.string.isRequired,
+  api: PropTypes.shape().isRequired, // TODO: remove?
+};
+
+export { OrganizationTeams as _OrganizationTeams };
+export default withRouter(OrganizationTeams);