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/pages/Organizations/screens/Organization/OrganizationAccess.jsx

@@ -6,14 +6,14 @@ import OrganizationAccessItem from '../../components/OrganizationAccessItem';
 import DeleteRoleConfirmationModal from '../../components/DeleteRoleConfirmationModal';
 import AddResourceRole from '../../../../components/AddRole/AddResourceRole';
 import { withNetwork } from '../../../../contexts/Network';
-import { parseQueryString } from '../../../../util/qs';
+import { getQSConfig, parseNamespacedQueryString } from '../../../../util/qs';
 import { Organization } from '../../../../types';
 
-const DEFAULT_QUERY_PARAMS = {
+const QS_CONFIG = getQSConfig('access', {
   page: 1,
   page_size: 5,
   order_by: 'first_name',
-};
+});
 
 class OrganizationAccess extends React.Component {
   static propTypes = {
@@ -54,12 +54,12 @@ class OrganizationAccess extends React.Component {
   }
 
   async readOrgAccessList () {
-    const { organization, api, handleHttpError } = this.props;
+    const { organization, api, handleHttpError, location } = this.props;
     this.setState({ isLoading: true });
     try {
       const { data } = await api.getOrganizationAccessList(
         organization.id,
-        this.getQueryParams()
+        parseNamespacedQueryString(QS_CONFIG, location.search)
       );
       this.setState({
         itemCount: data.count || 0,
@@ -75,16 +75,6 @@ class OrganizationAccess extends React.Component {
     }
   }
 
-  getQueryParams () {
-    const { location } = this.props;
-    const searchParams = parseQueryString(location.search.substring(1));
-
-    return {
-      ...DEFAULT_QUERY_PARAMS,
-      ...searchParams,
-    };
-  }
-
   confirmRemoveRole (role, accessRecord) {
     this.setState({
       roleToDelete: role,
@@ -175,7 +165,7 @@ class OrganizationAccess extends React.Component {
             items={accessRecords}
             itemCount={itemCount}
             itemName="role"
-            queryParams={this.getQueryParams()}
+            qsConfig={QS_CONFIG}
             toolbarColumns={[
               { name: i18nMark('Name'), key: 'first_name', isSortable: true },
               { name: i18nMark('Username'), key: 'username', isSortable: true },

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

@@ -4,13 +4,13 @@ import { withRouter } from 'react-router-dom';
 import { withNetwork } from '../../../../contexts/Network';
 import PaginatedDataList from '../../../../components/PaginatedDataList';
 import NotificationListItem from '../../../../components/NotificationsList/NotificationListItem';
-import { parseQueryString } from '../../../../util/qs';
+import { getQSConfig, parseNamespacedQueryString } from '../../../../util/qs';
 
-const DEFAULT_QUERY_PARAMS = {
+const QS_CONFIG = getQSConfig('notification', {
   page: 1,
   page_size: 5,
   order_by: 'name',
-};
+});
 
 const COLUMNS = [
   { key: 'name', name: 'Name', isSortable: true },
@@ -48,19 +48,9 @@ class OrganizationNotifications extends Component {
     }
   }
 
-  getQueryParams () {
-    const { location } = this.props;
-    const searchParams = parseQueryString(location.search.substring(1));
-
-    return {
-      ...DEFAULT_QUERY_PARAMS,
-      ...searchParams,
-    };
-  }
-
   async readNotifications () {
-    const { api, handleHttpError, id } = this.props;
-    const params = this.getQueryParams();
+    const { id, api, handleHttpError, location } = this.props;
+    const params = parseNamespacedQueryString(QS_CONFIG, location.search);
     this.setState({ isLoading: true });
     try {
       const { data } = await api.getOrganizationNotifications(id, params);
@@ -191,7 +181,7 @@ class OrganizationNotifications extends Component {
             items={notifications}
             itemCount={itemCount}
             itemName="notification"
-            queryParams={this.getQueryParams()}
+            qsConfig={QS_CONFIG}
             toolbarColumns={COLUMNS}
             renderItem={(notification) => (
               <NotificationListItem

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

@@ -2,14 +2,14 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import PaginatedDataList from '../../../../components/PaginatedDataList';
-import { parseQueryString } from '../../../../util/qs';
+import { getQSConfig, parseNamespacedQueryString } from '../../../../util/qs';
 import { withNetwork } from '../../../../contexts/Network';
 
-const DEFAULT_QUERY_PARAMS = {
+const QS_CONFIG = getQSConfig('team', {
   page: 1,
   page_size: 5,
   order_by: 'name',
-};
+});
 
 class OrganizationTeams extends React.Component {
   constructor (props) {
@@ -37,19 +37,9 @@ class OrganizationTeams extends React.Component {
     }
   }
 
-  getQueryParams () {
-    const { location } = this.props;
-    const searchParams = parseQueryString(location.search.substring(1));
-
-    return {
-      ...DEFAULT_QUERY_PARAMS,
-      ...searchParams,
-    };
-  }
-
   async readOrganizationTeamsList () {
-    const { api, handleHttpError, id } = this.props;
-    const params = this.getQueryParams();
+    const { id, api, handleHttpError, location } = this.props;
+    const params = parseNamespacedQueryString(QS_CONFIG, location.search);
     this.setState({ isLoading: true, error: null });
     try {
       const {
@@ -86,7 +76,7 @@ class OrganizationTeams extends React.Component {
             items={teams}
             itemCount={itemCount}
             itemName="team"
-            queryParams={this.getQueryParams()}
+            qsConfig={QS_CONFIG}
           />
         )}
       </Fragment>