convert PaginatedTable to function component

awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx

@@ -23,7 +23,7 @@ export default function HeaderRow({
   const onSort = (key, order) => {
     console.log({ key, order });
     const newParams = replaceParams(params, {
-      order_by: order === 'desc' ? key : `-${key}`,
+      order_by: order === 'asc' ? key : `-${key}`,
       page: null,
     });
     const encodedParams = encodeNonDefaultQueryString(qsConfig, newParams);
@@ -37,7 +37,7 @@ export default function HeaderRow({
   const sortKey = params.order_by?.replace('-', '');
   const sortBy = {
     index: sortKey || defaultSortKey,
-    direction: params.order_by?.startsWith('-') ? 'asc' : 'desc',
+    direction: params.order_by?.startsWith('-') ? 'desc' : 'asc',
   };
 
   return (

awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { TableComposable, Tbody } from '@patternfly/react-table';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 
 import ListHeader from '../ListHeader';
 import ContentEmpty from '../ContentEmpty';
@@ -17,50 +17,10 @@ import {
   parseQueryString,
   replaceParams,
 } from '../../util/qs';
-
+import PaginatedTableRow from './PaginatedTableRow';
 import { QSConfig, SearchColumns, SortColumns } from '../../types';
 
-import PaginatedTableRow from './PaginatedTableRow';
+function PaginatedTable({
-
-class PaginatedTable extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleSetPage = this.handleSetPage.bind(this);
-    this.handleSetPageSize = this.handleSetPageSize.bind(this);
-    this.handleListItemSelect = this.handleListItemSelect.bind(this);
-  }
-
-  handleListItemSelect = (id = 0) => {
-    const { items, onRowClick } = this.props;
-    const match = items.find(item => item.id === Number(id));
-    onRowClick(match);
-  };
-
-  handleSetPage(event, pageNumber) {
-    const { history, qsConfig } = this.props;
-    const { search } = history.location;
-    const oldParams = parseQueryString(qsConfig, search);
-    this.pushHistoryState(replaceParams(oldParams, { page: pageNumber }));
-  }
-
-  handleSetPageSize(event, pageSize, page) {
-    const { history, qsConfig } = this.props;
-    const { search } = history.location;
-    const oldParams = parseQueryString(qsConfig, search);
-    this.pushHistoryState(
-      replaceParams(oldParams, { page_size: pageSize, page })
-    );
-  }
-
-  pushHistoryState(params) {
-    const { history, qsConfig } = this.props;
-    const { pathname } = history.location;
-    const encodedParams = encodeNonDefaultQueryString(qsConfig, params);
-    history.push(encodedParams ? `${pathname}?${encodedParams}` : pathname);
-  }
-
-  render() {
-    const {
   contentError,
   hasContentLoading,
   emptyStateControls,
@@ -75,10 +35,33 @@ class PaginatedTable extends React.Component {
   toolbarSortColumns,
   pluralizedItemName,
   showPageSizeOptions,
-      location,
   i18n,
   renderToolbar,
-    } = this.props;
+  // onRowClick,
+}) {
+  const history = useHistory();
+
+  // const handleListItemSelect = (id = 0) => {
+  //   const match = items.find(item => item.id === Number(id));
+  //   onRowClick(match);
+  // };
+
+  const pushHistoryState = params => {
+    const { pathname } = history.location;
+    const encodedParams = encodeNonDefaultQueryString(qsConfig, params);
+    history.push(encodedParams ? `${pathname}?${encodedParams}` : pathname);
+  };
+
+  const handleSetPage = (event, pageNumber) => {
+    const oldParams = parseQueryString(qsConfig, history.location.search);
+    pushHistoryState(replaceParams(oldParams, { page: pageNumber }));
+  };
+
+  const handleSetPageSize = (event, pageSize, page) => {
+    const oldParams = parseQueryString(qsConfig, history.location.search);
+    pushHistoryState(replaceParams(oldParams, { page_size: pageSize, page }));
+  };
+
   const searchColumns = toolbarSearchColumns.length
     ? toolbarSearchColumns
     : [
@@ -96,7 +79,7 @@ class PaginatedTable extends React.Component {
           key: 'name',
         },
       ];
-    const queryParams = parseQueryString(qsConfig, location.search);
+  const queryParams = parseQueryString(qsConfig, history.location.search);
 
   const dataListLabel = i18n._(t`${pluralizedItemName} List`);
   const emptyContentMessage = i18n._(
@@ -117,7 +100,7 @@ class PaginatedTable extends React.Component {
     Content = (
       <TableComposable
         aria-label={dataListLabel}
-          onSelectDataListItem={id => this.handleListItemSelect(id)}
+        // onSelectDataListItem={handleListItemSelect}
       >
         {headerRow}
         <Tbody>{items.map(renderRow)}</Tbody>
@@ -142,8 +125,8 @@ class PaginatedTable extends React.Component {
             ]
           : []
       }
-        onSetPage={this.handleSetPage}
+      onSetPage={handleSetPage}
-        onPerPageSelect={this.handleSetPageSize}
+      onPerPageSelect={handleSetPageSize}
     />
   );
 
@@ -177,14 +160,13 @@ class PaginatedTable extends React.Component {
                 ]
               : []
           }
-            onSetPage={this.handleSetPage}
+          onSetPage={handleSetPage}
-            onPerPageSelect={this.handleSetPageSize}
+          onPerPageSelect={handleSetPageSize}
         />
       ) : null}
     </Fragment>
   );
 }
-}
 
 const Item = PropTypes.shape({
   id: PropTypes.number.isRequired,
@@ -206,7 +188,7 @@ PaginatedTable.propTypes = {
   renderToolbar: PropTypes.func,
   hasContentLoading: PropTypes.bool,
   contentError: PropTypes.shape(),
-  onRowClick: PropTypes.func,
+  // onRowClick: PropTypes.func,
 };
 
 PaginatedTable.defaultProps = {
@@ -220,8 +202,8 @@ PaginatedTable.defaultProps = {
   showPageSizeOptions: true,
   renderRow: item => <PaginatedTableRow key={item.id} item={item} />,
   renderToolbar: props => <DataListToolbar {...props} />,
-  onRowClick: () => null,
+  // onRowClick: () => null,
 };
 
 export { PaginatedTable as _PaginatedTable };
-export default withI18n()(withRouter(PaginatedTable));
+export default withI18n()(PaginatedTable);

awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx

@@ -3,7 +3,6 @@ import { useLocation, useRouteMatch } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Card, PageSection } from '@patternfly/react-core';
-import { Thead, Tr, Th } from '@patternfly/react-table';
 
 import { OrganizationsAPI } from '../../../api';
 import useRequest, { useDeleteItems } from '../../../util/useRequest';
@@ -118,10 +117,6 @@ function OrganizationsList({ i18n }) {
     }
   };
 
-  const onSort = (e, index, direction) => {
-    console.log(index, direction);
-  };
-
   return (
     <>
       <PageSection>
@@ -174,55 +169,6 @@ function OrganizationsList({ i18n }) {
                 <HeaderCell>{i18n._(t`Teams`)}</HeaderCell>
               </HeaderRow>
             }
-            _headerRow={
-              // TODO: move sorting into <PaginatedTableHeader> w/ friendly API
-              <Thead>
-                <Tr>
-                  <Th
-                    select={{
-                      onSelect: handleSelectAll,
-                      isSelected: isAllSelected,
-                    }}
-                  />
-                  <Th
-                    sort={{
-                      onSort,
-                      sortBy: {
-                        index: 'name',
-                        direction: 'asc',
-                      },
-                      columnIndex: 'name',
-                    }}
-                  >
-                    {i18n._(t`Name`)}
-                  </Th>
-                  <Th
-                    sort={{
-                      onSort,
-                      sortBy: {
-                        index: 'name',
-                        direction: 'asc',
-                      },
-                      columnIndex: 'members',
-                    }}
-                  >
-                    {i18n._(t`Members`)}
-                  </Th>
-                  <Th
-                    sort={{
-                      onSort,
-                      sortBy: {
-                        index: 'name',
-                        direction: 'asc',
-                      },
-                      columnIndex: 'teams',
-                    }}
-                  >
-                    {i18n._(t`Teams`)}
-                  </Th>
-                </Tr>
-              </Thead>
-            }
             renderToolbar={props => (
               <DataListToolbar
                 {...props}