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,166 +23,150 @@ 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;
+function PaginatedDataList({
+  items,
+  onRowClick,
+  contentError,
+  hasContentLoading,
+  emptyStateControls,
+  itemCount,
+  qsConfig,
+  renderItem,
+  toolbarSearchColumns,
+  toolbarSearchableKeys,
+  toolbarRelatedSearchableKeys,
+  toolbarSortColumns,
+  pluralizedItemName,
+  showPageSizeOptions,
+  location,
+  i18n,
+  renderToolbar,
+}) {
+  const { search, pathname } = useLocation();
+  const history = useHistory();
+  const handleListItemSelect = (id = 0) => {
     const match = items.find(item => item.id === Number(id));
     onRowClick(match);
   };
 
-  handleSetPage(event, pageNumber) {
-    const { history, qsConfig } = this.props;
-    const { search } = history.location;
+  const handleSetPage = (event, pageNumber) => {
     const oldParams = parseQueryString(qsConfig, search);
-    this.pushHistoryState(replaceParams(oldParams, { page: pageNumber }));
-  }
+    pushHistoryState(replaceParams(oldParams, { page: pageNumber }));
+  };
 
-  handleSetPageSize(event, pageSize, page) {
-    const { history, qsConfig } = this.props;
-    const { search } = history.location;
+  const handleSetPageSize = (event, pageSize, page) => {
     const oldParams = parseQueryString(qsConfig, search);
-    this.pushHistoryState(
-      replaceParams(oldParams, { page_size: pageSize, page })
-    );
-  }
+    pushHistoryState(replaceParams(oldParams, { page_size: pageSize, page }));
+  };
 
-  pushHistoryState(params) {
-    const { history, qsConfig } = this.props;
-    const { pathname } = history.location;
+  const pushHistoryState = params => {
     const encodedParams = encodeNonDefaultQueryString(qsConfig, params);
     history.push(encodedParams ? `${pathname}?${encodedParams}` : pathname);
+  };
+
+  const searchColumns = toolbarSearchColumns.length
+    ? toolbarSearchColumns
+    : [
+        {
+          name: i18n._(t`Name`),
+          key: 'name',
+          isDefault: true,
+        },
+      ];
+  const sortColumns = toolbarSortColumns.length
+    ? toolbarSortColumns
+    : [
+        {
+          name: i18n._(t`Name`),
+          key: 'name',
+        },
+      ];
+  const queryParams = parseQueryString(qsConfig, location.search);
+
+  const dataListLabel = i18n._(t`${pluralizedItemName} List`);
+  const emptyContentMessage = i18n._(
+    t`Please add ${pluralizedItemName} to populate this list `
+  );
+  const emptyContentTitle = i18n._(t`No ${pluralizedItemName} Found `);
+
+  let Content;
+  if (hasContentLoading && items.length <= 0) {
+    Content = <ContentLoading />;
+  } else if (contentError) {
+    Content = <ContentError error={contentError} />;
+  } else if (items.length <= 0) {
+    Content = (
+      <ContentEmpty title={emptyContentTitle} message={emptyContentMessage} />
+    );
+  } else {
+    Content = (
+      <DataList
+        aria-label={dataListLabel}
+        onSelectDataListItem={id => handleListItemSelect(id)}
+      >
+        {items.map(renderItem)}
+      </DataList>
+    );
   }
 
-  render() {
-    const {
-      contentError,
-      hasContentLoading,
-      emptyStateControls,
-      items,
-      itemCount,
-      qsConfig,
-      renderItem,
-      toolbarSearchColumns,
-      toolbarSearchableKeys,
-      toolbarRelatedSearchableKeys,
-      toolbarSortColumns,
-      pluralizedItemName,
-      showPageSizeOptions,
-      location,
-      i18n,
-      renderToolbar,
-    } = this.props;
-    const searchColumns = toolbarSearchColumns.length
-      ? toolbarSearchColumns
-      : [
-          {
-            name: i18n._(t`Name`),
-            key: 'name',
-            isDefault: true,
-          },
-        ];
-    const sortColumns = toolbarSortColumns.length
-      ? toolbarSortColumns
-      : [
-          {
-            name: i18n._(t`Name`),
-            key: 'name',
-          },
-        ];
-    const queryParams = parseQueryString(qsConfig, location.search);
+  const ToolbarPagination = (
+    <Pagination
+      isCompact
+      dropDirection="down"
+      itemCount={itemCount}
+      page={queryParams.page || 1}
+      perPage={queryParams.page_size}
+      perPageOptions={
+        showPageSizeOptions
+          ? [
+              { title: '5', value: 5 },
+              { title: '10', value: 10 },
+              { title: '20', value: 20 },
+              { title: '50', value: 50 },
+            ]
+          : []
+      }
+      onSetPage={handleSetPage}
+      onPerPageSelect={handleSetPageSize}
+    />
+  );
 
-    const dataListLabel = i18n._(t`${pluralizedItemName} List`);
-    const emptyContentMessage = i18n._(
-      t`Please add ${pluralizedItemName} to populate this list `
-    );
-    const emptyContentTitle = i18n._(t`No ${pluralizedItemName} Found `);
-
-    let Content;
-    if (hasContentLoading && items.length <= 0) {
-      Content = <ContentLoading />;
-    } else if (contentError) {
-      Content = <ContentError error={contentError} />;
-    } else if (items.length <= 0) {
-      Content = (
-        <ContentEmpty title={emptyContentTitle} message={emptyContentMessage} />
-      );
-    } else {
-      Content = (
-        <DataList
-          aria-label={dataListLabel}
-          onSelectDataListItem={id => this.handleListItemSelect(id)}
-        >
-          {items.map(renderItem)}
-        </DataList>
-      );
-    }
-
-    const ToolbarPagination = (
-      <Pagination
-        isCompact
-        dropDirection="down"
+  return (
+    <Fragment>
+      <ListHeader
         itemCount={itemCount}
-        page={queryParams.page || 1}
-        perPage={queryParams.page_size}
-        perPageOptions={
-          showPageSizeOptions
-            ? [
-                { title: '5', value: 5 },
-                { title: '10', value: 10 },
-                { title: '20', value: 20 },
-                { title: '50', value: 50 },
-              ]
-            : []
-        }
-        onSetPage={this.handleSetPage}
-        onPerPageSelect={this.handleSetPageSize}
+        renderToolbar={renderToolbar}
+        emptyStateControls={emptyStateControls}
+        searchColumns={searchColumns}
+        sortColumns={sortColumns}
+        searchableKeys={toolbarSearchableKeys}
+        relatedSearchableKeys={toolbarRelatedSearchableKeys}
+        qsConfig={qsConfig}
+        pagination={ToolbarPagination}
       />
-    );
-
-    return (
-      <Fragment>
-        <ListHeader
+      {Content}
+      {items.length ? (
+        <Pagination
+          variant="bottom"
           itemCount={itemCount}
-          renderToolbar={renderToolbar}
-          emptyStateControls={emptyStateControls}
-          searchColumns={searchColumns}
-          sortColumns={sortColumns}
-          searchableKeys={toolbarSearchableKeys}
-          relatedSearchableKeys={toolbarRelatedSearchableKeys}
-          qsConfig={qsConfig}
-          pagination={ToolbarPagination}
+          page={queryParams.page || 1}
+          perPage={queryParams.page_size}
+          perPageOptions={
+            showPageSizeOptions
+              ? [
+                  { title: '5', value: 5 },
+                  { title: '10', value: 10 },
+                  { title: '20', value: 20 },
+                  { title: '50', value: 50 },
+                ]
+              : []
+          }
+          onSetPage={handleSetPage}
+          onPerPageSelect={handleSetPageSize}
         />
-        {Content}
-        {items.length ? (
-          <Pagination
-            variant="bottom"
-            itemCount={itemCount}
-            page={queryParams.page || 1}
-            perPage={queryParams.page_size}
-            perPageOptions={
-              showPageSizeOptions
-                ? [
-                    { title: '5', value: 5 },
-                    { title: '10', value: 10 },
-                    { title: '20', value: 20 },
-                    { title: '50', value: 50 },
-                  ]
-                : []
-            }
-            onSetPage={this.handleSetPage}
-            onPerPageSelect={this.handleSetPageSize}
-          />
-        ) : null}
-      </Fragment>
-    );
-  }
+      ) : null}
+    </Fragment>
+  );
 }
 
 const Item = PropTypes.shape({