Add namespacing for query params (#205)

* use qs utils to namespace query params

* refactor Lookup and SelectResource Steps to use PaginatedDataList

* preserve query params when adding new ones

* require namespace for QS Configs

src/components/AddRole/SelectResourceStep.jsx

@@ -1,19 +1,11 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { withRouter } from 'react-router-dom';
 import { i18nMark } from '@lingui/react';
-import {
-  EmptyState,
-  EmptyStateBody,
-  EmptyStateIcon,
-  Title,
-  DataList,
-} from '@patternfly/react-core';
-import { CubesIcon } from '@patternfly/react-icons';
-
+import PaginatedDataList from '../PaginatedDataList';
 import CheckboxListItem from '../ListItem';
-import DataListToolbar from '../DataListToolbar';
-import Pagination from '../Pagination';
 import SelectedList from '../SelectedList';
+import { getQSConfig, parseNamespacedQueryString } from '../../util/qs';
 
 const paginationStyling = {
   paddingLeft: '0',
@@ -27,163 +19,113 @@ class SelectResourceStep extends React.Component {
   constructor (props) {
     super(props);
 
-    const { sortedColumnKey } = this.props;
-
     this.state = {
+      isInitialized: false,
       count: null,
       error: false,
-      page: 1,
-      page_size: 5,
       resources: [],
-      sortOrder: 'ascending',
-      sortedColumnKey
     };
 
-    this.handleSetPage = this.handleSetPage.bind(this);
-    this.handleSort = this.handleSort.bind(this);
-    this.readResourceList = this.readResourceList.bind(this);
+    this.qsConfig = getQSConfig('resource', {
+      page: 1,
+      page_size: 5,
+      order_by: props.sortedColumnKey,
+    });
   }
 
   componentDidMount () {
-    const { page_size, page, sortedColumnKey } = this.state;
-
-    this.readResourceList({ page_size, page, order_by: sortedColumnKey });
+    this.readResourceList();
   }
 
-  handleSetPage (pageNumber) {
-    const { page_size, sortedColumnKey, sortOrder } = this.state;
-    const page = parseInt(pageNumber, 10);
-
-    let order_by = sortedColumnKey;
-
-    if (sortOrder === 'descending') {
-      order_by = `-${order_by}`;
+  componentDidUpdate (prevProps) {
+    const { location } = this.props;
+    if (location !== prevProps.location) {
+      this.readResourceList();
     }
-
-    this.readResourceList({ page_size, page, order_by });
   }
 
-  handleSort (sortedColumnKey, sortOrder) {
-    const { page_size } = this.state;
-
-    let order_by = sortedColumnKey;
-
-    if (sortOrder === 'descending') {
-      order_by = `-${order_by}`;
-    }
-
-    this.readResourceList({ page: 1, page_size, order_by });
-  }
-
-  async readResourceList (queryParams) {
-    const { onSearch } = this.props;
-    const { page, order_by } = queryParams;
-
-    let sortOrder = 'ascending';
-    let sortedColumnKey = order_by;
-
-    if (order_by.startsWith('-')) {
-      sortOrder = 'descending';
-      sortedColumnKey = order_by.substring(1);
-    }
-
-    this.setState({ error: false });
+  async readResourceList () {
+    const { onSearch, location } = this.props;
+    const queryParams = parseNamespacedQueryString(this.qsConfig, location.search);
 
+    this.setState({
+      isLoading: true,
+      error: false,
+    });
     try {
       const { data } = await onSearch(queryParams);
       const { count, results } = data;
 
-      const stateToUpdate = {
-        count,
-        page,
+      this.setState({
         resources: results,
-        sortOrder,
-        sortedColumnKey
-      };
-
-      this.setState(stateToUpdate);
+        count,
+        isInitialized: true,
+        isLoading: false,
+        error: false,
+      });
     } catch (err) {
-      this.setState({ error: true });
+      this.setState({
+        isLoading: false,
+        error: true,
+      });
     }
   }
 
   render () {
     const {
+      isInitialized,
+      isLoading,
       count,
       error,
-      page,
-      page_size,
       resources,
-      sortOrder,
-      sortedColumnKey
     } = this.state;
 
     const {
       columns,
       displayKey,
-      emptyListBody,
-      emptyListTitle,
       onRowClick,
       selectedLabel,
-      selectedResourceRows
+      selectedResourceRows,
+      itemName,
     } = this.props;
 
     return (
       <Fragment>
-        <Fragment>
-          {(resources.length === 0) ? (
-            <EmptyState>
-              <EmptyStateIcon icon={CubesIcon} />
-              <Title size="lg">
-                {emptyListTitle}
-              </Title>
-              <EmptyStateBody>
-                {emptyListBody}
-              </EmptyStateBody>
-            </EmptyState>
-          ) : (
-            <Fragment>
-              {selectedResourceRows.length > 0 && (
-                <SelectedList
-                  displayKey={displayKey}
-                  label={selectedLabel}
-                  onRemove={onRowClick}
-                  selected={selectedResourceRows}
-                  showOverflowAfter={5}
+        {isLoading && (<div>Loading...</div>)}
+        {isInitialized && (
+          <Fragment>
+            {selectedResourceRows.length > 0 && (
+              <SelectedList
+                displayKey={displayKey}
+                label={selectedLabel}
+                onRemove={onRowClick}
+                selected={selectedResourceRows}
+                showOverflowAfter={5}
+              />
+            )}
+            <PaginatedDataList
+              items={resources}
+              itemCount={count}
+              itemName={itemName}
+              qsConfig={this.qsConfig}
+              toolbarColumns={
+                columns
+              }
+              renderItem={item => (
+                <CheckboxListItem
+                  isSelected={selectedResourceRows.some(i => i.id === item.id)}
+                  itemId={item.id}
+                  key={item.id}
+                  name={item[displayKey]}
+                  onSelect={() => onRowClick(item)}
                 />
               )}
-              <DataListToolbar
-                columns={columns}
-                noLeftMargin
-                onSearch={this.onSearch}
-                handleSort={this.handleSort}
-                sortOrder={sortOrder}
-                sortedColumnKey={sortedColumnKey}
-              />
-              <DataList aria-label={i18nMark('Roles List')}>
-                {resources.map(i => (
-                  <CheckboxListItem
-                    isSelected={selectedResourceRows.some(item => item.id === i.id)}
-                    itemId={i.id}
-                    key={i.id}
-                    name={i[displayKey]}
-                    onSelect={() => onRowClick(i)}
-                  />
-                ))}
-              </DataList>
-              <Pagination
-                count={count}
-                onSetPage={this.handleSetPage}
-                page={page}
-                pageCount={Math.ceil(count / page_size)}
-                pageSizeOptions={null}
-                page_size={page_size}
-                showPageSizeOptions={false}
-                style={paginationStyling}
-              />
-            </Fragment>
-          )}
-        </Fragment>
+              alignToolbarLeft
+              showPageSizeOptions={false}
+              paginationStyling={paginationStyling}
+            />
+          </Fragment>
+        )}
         { error ? <div>error</div> : '' }
       </Fragment>
     );
@@ -193,23 +135,22 @@ class SelectResourceStep extends React.Component {
 SelectResourceStep.propTypes = {
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
   displayKey: PropTypes.string,
-  emptyListBody: PropTypes.string,
-  emptyListTitle: PropTypes.string,
   onRowClick: PropTypes.func,
   onSearch: PropTypes.func.isRequired,
   selectedLabel: PropTypes.string,
   selectedResourceRows: PropTypes.arrayOf(PropTypes.object),
-  sortedColumnKey: PropTypes.string
+  sortedColumnKey: PropTypes.string,
+  itemName: PropTypes.string,
 };
 
 SelectResourceStep.defaultProps = {
   displayKey: 'name',
-  emptyListBody: i18nMark('Please add items to populate this list'),
-  emptyListTitle: i18nMark('No Items Found'),
   onRowClick: () => {},
   selectedLabel: i18nMark('Selected Items'),
   selectedResourceRows: [],
-  sortedColumnKey: 'name'
+  sortedColumnKey: 'name',
+  itemName: 'item',
 };
 
-export default SelectResourceStep;
+export { SelectResourceStep as _SelectResourceStep };
+export default withRouter(SelectResourceStep);