convert PaginatedDataList to function

awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx

@@ -1,9 +1,10 @@
 import React, { Fragment } from 'react';
+
 import PropTypes from 'prop-types';
 import { DataList } from '@patternfly/react-core';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { withRouter } from 'react-router-dom';
+import { withRouter, useHistory, useLocation } from 'react-router-dom';
 
 import ListHeader from '../ListHeader';
 import ContentEmpty from '../ContentEmpty';
@@ -22,49 +23,12 @@ import { QSConfig, SearchColumns, SortColumns } from '../../types';
 
 import PaginatedDataListItem from './PaginatedDataListItem';
 
-class PaginatedDataList 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 {
+function PaginatedDataList({
+  items,
+  onRowClick,
   contentError,
   hasContentLoading,
   emptyStateControls,
-      items,
   itemCount,
   qsConfig,
   renderItem,
@@ -77,7 +41,29 @@ class PaginatedDataList extends React.Component {
   location,
   i18n,
   renderToolbar,
-    } = this.props;
+}) {
+  const { search, pathname } = useLocation();
+  const history = useHistory();
+  const handleListItemSelect = (id = 0) => {
+    const match = items.find(item => item.id === Number(id));
+    onRowClick(match);
+  };
+
+  const handleSetPage = (event, pageNumber) => {
+    const oldParams = parseQueryString(qsConfig, search);
+    pushHistoryState(replaceParams(oldParams, { page: pageNumber }));
+  };
+
+  const handleSetPageSize = (event, pageSize, page) => {
+    const oldParams = parseQueryString(qsConfig, search);
+    pushHistoryState(replaceParams(oldParams, { page_size: pageSize, page }));
+  };
+
+  const pushHistoryState = params => {
+    const encodedParams = encodeNonDefaultQueryString(qsConfig, params);
+    history.push(encodedParams ? `${pathname}?${encodedParams}` : pathname);
+  };
+
   const searchColumns = toolbarSearchColumns.length
     ? toolbarSearchColumns
     : [
@@ -116,7 +102,7 @@ class PaginatedDataList extends React.Component {
     Content = (
       <DataList
         aria-label={dataListLabel}
-          onSelectDataListItem={id => this.handleListItemSelect(id)}
+        onSelectDataListItem={id => handleListItemSelect(id)}
       >
         {items.map(renderItem)}
       </DataList>
@@ -140,8 +126,8 @@ class PaginatedDataList extends React.Component {
             ]
           : []
       }
-        onSetPage={this.handleSetPage}
-        onPerPageSelect={this.handleSetPageSize}
+      onSetPage={handleSetPage}
+      onPerPageSelect={handleSetPageSize}
     />
   );
 
@@ -175,14 +161,13 @@ class PaginatedDataList extends React.Component {
                 ]
               : []
           }
-            onSetPage={this.handleSetPage}
-            onPerPageSelect={this.handleSetPageSize}
+          onSetPage={handleSetPage}
+          onPerPageSelect={handleSetPageSize}
         />
       ) : null}
     </Fragment>
   );
 }
-}
 
 const Item = PropTypes.shape({
   id: PropTypes.number.isRequired,