Convert HostList to hooks

use useRequest and useDeleteItems
add HostToggle component

awx/ui_next/src/screens/Host/HostList/HostList.jsx

@@ -1,5 +1,5 @@
-import React, { Component, Fragment } from 'react';
+import React, { Fragment, useState, useEffect, useCallback } from 'react';
-import { withRouter } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Card } from '@patternfly/react-core';
@@ -12,6 +12,7 @@ import PaginatedDataList, {
   ToolbarAddButton,
   ToolbarDeleteButton,
 } from '@components/PaginatedDataList';
+import useRequest, { useDeleteItems } from '@util/useRequest';
 import { getQSConfig, parseQueryString } from '@util/qs';
 
 import HostListItem from './HostListItem';
@@ -22,173 +23,88 @@ const QS_CONFIG = getQSConfig('host', {
   order_by: 'name',
 });
 
-class HostsList extends Component {
+function HostList({ i18n }) {
-  constructor(props) {
+  const location = useLocation();
-    super(props);
+  const match = useParams();
+  const [selected, setSelected] = useState([]);
 
-    this.state = {
+  const {
-      hasContentLoading: true,
+    result: { hosts, count, actions },
-      contentError: null,
+    error: contentError,
-      deletionError: null,
+    isLoading,
+    request: fetchHosts,
+  } = useRequest(
+    useCallback(async () => {
+      const params = parseQueryString(QS_CONFIG, location.search);
+      const results = await Promise.all([
+        HostsAPI.read(params),
+        HostsAPI.readOptions(),
+      ]);
+      return {
+        hosts: results[0].data.results,
+        count: results[0].data.count,
+        actions: results[1].data.actions,
+      };
+    }, [location]),
+    {
       hosts: [],
-      selected: [],
+      count: 0,
-      itemCount: 0,
+      actions: {},
-      actions: null,
+    }
-      toggleError: null,
+  );
-      toggleLoading: null,
+
+  useEffect(() => {
+    fetchHosts();
+  }, [fetchHosts]);
+
+  const isAllSelected = selected.length === hosts.length && selected.length > 0;
+  const {
+    isLoading: isDeleteLoading,
+    deleteItems: deleteHosts,
+    deletionError,
+    clearDeletionError,
+  } = useDeleteItems(
+    useCallback(async () => {
+      return Promise.all(selected.map(host => HostsAPI.destroy(host.id)));
+    }, [selected]),
+    {
+      qsConfig: QS_CONFIG,
+      allItemsSelected: isAllSelected,
+      fetchItems: fetchHosts,
+    }
+  );
+
+  const handleHostDelete = async () => {
+    await deleteHosts();
+    setSelected([]);
   };
 
-    this.handleSelectAll = this.handleSelectAll.bind(this);
+  const handleSelectAll = isSelected => {
-    this.handleSelect = this.handleSelect.bind(this);
+    setSelected(isSelected ? [...hosts] : []);
-    this.handleHostDelete = this.handleHostDelete.bind(this);
+  };
-    this.handleDeleteErrorClose = this.handleDeleteErrorClose.bind(this);
-    this.loadActions = this.loadActions.bind(this);
-    this.loadHosts = this.loadHosts.bind(this);
-    this.handleHostToggle = this.handleHostToggle.bind(this);
-    this.handleHostToggleErrorClose = this.handleHostToggleErrorClose.bind(
-      this
-    );
-  }
 
-  componentDidMount() {
+  const handleSelect = host => {
-    this.loadHosts();
+    if (selected.some(h => h.id === host.id)) {
-  }
+      setSelected(selected.filter(h => h.id !== host.id));
-
-  componentDidUpdate(prevProps) {
-    const { location } = this.props;
-    if (location !== prevProps.location) {
-      this.loadHosts();
-    }
-  }
-
-  handleSelectAll(isSelected) {
-    const { hosts } = this.state;
-
-    const selected = isSelected ? [...hosts] : [];
-    this.setState({ selected });
-  }
-
-  handleSelect(row) {
-    const { selected } = this.state;
-
-    if (selected.some(s => s.id === row.id)) {
-      this.setState({ selected: selected.filter(s => s.id !== row.id) });
     } else {
-      this.setState({ selected: selected.concat(row) });
+      setSelected(selected.concat(host));
     }
-  }
+  };
-
-  handleDeleteErrorClose() {
-    this.setState({ deletionError: null });
-  }
-
-  handleHostToggleErrorClose() {
-    this.setState({ toggleError: null });
-  }
-
-  async handleHostDelete() {
-    const { selected } = this.state;
-
-    this.setState({ hasContentLoading: true });
-    try {
-      await Promise.all(selected.map(host => HostsAPI.destroy(host.id)));
-    } catch (err) {
-      this.setState({ deletionError: err });
-    } finally {
-      await this.loadHosts();
-    }
-  }
-
-  async handleHostToggle(hostToToggle) {
-    const { hosts } = this.state;
-    this.setState({ toggleLoading: hostToToggle.id });
-    try {
-      const { data: updatedHost } = await HostsAPI.update(hostToToggle.id, {
-        enabled: !hostToToggle.enabled,
-      });
-      this.setState({
-        hosts: hosts.map(host =>
-          host.id === updatedHost.id ? updatedHost : host
-        ),
-      });
-    } catch (err) {
-      this.setState({ toggleError: err });
-    } finally {
-      this.setState({ toggleLoading: null });
-    }
-  }
-
-  async loadActions() {
-    const { actions: cachedActions } = this.state;
-    let optionsPromise;
-    if (cachedActions) {
-      optionsPromise = Promise.resolve({ data: { actions: cachedActions } });
-    } else {
-      optionsPromise = HostsAPI.readOptions();
-    }
-
-    return optionsPromise;
-  }
-
-  async loadHosts() {
-    const { location } = this.props;
-    const params = parseQueryString(QS_CONFIG, location.search);
-
-    const promises = Promise.all([HostsAPI.read(params), this.loadActions()]);
-
-    this.setState({ contentError: null, hasContentLoading: true });
-    try {
-      const [
-        {
-          data: { count, results },
-        },
-        {
-          data: { actions },
-        },
-      ] = await promises;
-      this.setState({
-        actions,
-        itemCount: count,
-        hosts: results,
-        selected: [],
-      });
-    } catch (err) {
-      this.setState({ contentError: err });
-    } finally {
-      this.setState({ hasContentLoading: false });
-    }
-  }
-
-  render() {
-    const {
-      actions,
-      itemCount,
-      contentError,
-      hasContentLoading,
-      deletionError,
-      selected,
-      hosts,
-      toggleLoading,
-      toggleError,
-    } = this.state;
-    const { match, i18n } = this.props;
 
   const canAdd =
     actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
-    const isAllSelected =
-      selected.length > 0 && selected.length === hosts.length;
 
   return (
     <Fragment>
       <Card>
         <PaginatedDataList
           contentError={contentError}
-            hasContentLoading={hasContentLoading}
+          hasContentLoading={isLoading || isDeleteLoading}
           items={hosts}
-            itemCount={itemCount}
+          itemCount={count}
           pluralizedItemName={i18n._(t`Hosts`)}
           qsConfig={QS_CONFIG}
-            onRowClick={this.handleSelect}
+          onRowClick={handleSelect}
           toolbarSearchColumns={[
             {
               name: i18n._(t`Name`),
@@ -215,23 +131,18 @@ class HostsList extends Component {
               {...props}
               showSelectAll
               isAllSelected={isAllSelected}
-                onSelectAll={this.handleSelectAll}
+              onSelectAll={handleSelectAll}
               qsConfig={QS_CONFIG}
               additionalControls={[
                 <ToolbarDeleteButton
                   key="delete"
-                    onDelete={this.handleHostDelete}
+                  onDelete={handleHostDelete}
                   itemsToDelete={selected}
                   pluralizedItemName={i18n._(t`Hosts`)}
                 />,
-                  ...(canAdd
+                ...(canAdd ? [(
-                    ? [
+                  <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />]
-                        <ToolbarAddButton
+                ) : [],
-                          key="add"
-                          linkTo={`${match.url}/add`}
-                        />,
-                      ]
-                    : []),
               ]}
             />
           )}
@@ -241,9 +152,7 @@ class HostsList extends Component {
               host={o}
               detailUrl={`${match.url}/${o.id}/details`}
               isSelected={selected.some(row => row.id === o.id)}
-                onSelect={() => this.handleSelect(o)}
+              onSelect={() => handleSelect(o)}
-                onToggleHost={this.handleHostToggle}
-                toggleLoading={toggleLoading === o.id}
             />
           )}
           emptyStateControls={
@@ -253,23 +162,12 @@ class HostsList extends Component {
           }
         />
       </Card>
-        {toggleError && !toggleLoading && (
-          <AlertModal
-            variant="error"
-            title={i18n._(t`Error!`)}
-            isOpen={toggleError && !toggleLoading}
-            onClose={this.handleHostToggleErrorClose}
-          >
-            {i18n._(t`Failed to toggle host.`)}
-            <ErrorDetail error={toggleError} />
-          </AlertModal>
-        )}
       {deletionError && (
         <AlertModal
           isOpen={deletionError}
           variant="error"
           title={i18n._(t`Error!`)}
-            onClose={this.handleDeleteErrorClose}
+          onClose={clearDeletionError}
         >
           {i18n._(t`Failed to delete one or more hosts.`)}
           <ErrorDetail error={deletionError} />
@@ -278,7 +176,5 @@ class HostsList extends Component {
     </Fragment>
   );
 }
-}
 
-export { HostsList as _HostsList };
+export default withI18n()(HostList);
-export default withI18n()(withRouter(HostsList));

awx/ui_next/src/screens/Host/HostList/HostListItem.jsx

@@ -10,7 +10,6 @@ import {
   DataListItem,
   DataListItemRow,
   DataListItemCells,
-  Switch,
   Tooltip,
 } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
@@ -18,6 +17,7 @@ import { PencilAltIcon } from '@patternfly/react-icons';
 
 import Sparkline from '@components/Sparkline';
 import { Host } from '@types';
+import HostToggle from './HostToggle';
 import styled from 'styled-components';
 
 const DataListAction = styled(_DataListAction)`
@@ -36,15 +36,7 @@ class HostListItem extends React.Component {
   };
 
   render() {
-    const {
+    const { host, isSelected, onSelect, detailUrl, i18n } = this.props;
-      host,
-      isSelected,
-      onSelect,
-      detailUrl,
-      onToggleHost,
-      toggleLoading,
-      i18n,
-    } = this.props;
 
     const recentPlaybookJobs = host.summary_fields.recent_jobs.map(job => ({
       ...job,
@@ -87,6 +79,22 @@ class HostListItem extends React.Component {
                   </Fragment>
                 )}
               </DataListCell>,
+              <DataListCell key="enable" alignRight isFilled={false}>
+                <HostToggle host={host} />
+              </DataListCell>,
+              <DataListCell key="edit" alignRight isFilled={false}>
+                {host.summary_fields.user_capabilities.edit && (
+                  <Tooltip content={i18n._(t`Edit Host`)} position="top">
+                    <Button
+                      variant="plain"
+                      component={Link}
+                      to={`/hosts/${host.id}/edit`}
+                    >
+                      <PencilAltIcon />
+                    </Button>
+                  </Tooltip>
+                )}
+              </DataListCell>,
             ]}
           />
           <DataListAction
@@ -94,25 +102,7 @@ class HostListItem extends React.Component {
             aria-labelledby={labelId}
             id={labelId}
           >
-            <Tooltip
+            <HostToggle host={host} />
-              content={i18n._(
-                t`Indicates if a host is available and should be included in running jobs.  For hosts that are part of an external inventory, this may be reset by the inventory sync process.`
-              )}
-              position="top"
-            >
-              <Switch
-                css="display: inline-flex;"
-                id={`host-${host.id}-toggle`}
-                label={i18n._(t`On`)}
-                labelOff={i18n._(t`Off`)}
-                isChecked={host.enabled}
-                isDisabled={
-                  toggleLoading || !host.summary_fields.user_capabilities.edit
-                }
-                onChange={() => onToggleHost(host)}
-                aria-label={i18n._(t`Toggle host`)}
-              />
-            </Tooltip>
             {host.summary_fields.user_capabilities.edit && (
               <Tooltip content={i18n._(t`Edit Host`)} position="top">
                 <Button

awx/ui_next/src/screens/Host/HostList/HostToggle.jsx

@@ -0,0 +1,72 @@
+import React, { Fragment, useState, useEffect, useCallback } from 'react';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Switch, Tooltip } from '@patternfly/react-core';
+import AlertModal from '@components/AlertModal';
+import ErrorDetail from '@components/ErrorDetail';
+import useRequest from '@util/useRequest';
+import { HostsAPI } from '@api';
+
+function HostToggle({ host, i18n }) {
+  const [isEnabled, setIsEnabled] = useState(host.enabled);
+  const [showError, setShowError] = useState(false);
+
+  const { result, isLoading, error, request: toggleHost } = useRequest(
+    useCallback(async () => {
+      await HostsAPI.update(host.id, {
+        enabled: !isEnabled,
+      });
+      return !isEnabled;
+    }, [host, isEnabled]),
+    host.enabled
+  );
+
+  useEffect(() => {
+    if (result !== isEnabled) {
+      setIsEnabled(result);
+    }
+  }, [result, isEnabled]);
+
+  useEffect(() => {
+    if (error) {
+      setShowError(true);
+    }
+  }, [error]);
+
+  return (
+    <Fragment>
+      <Tooltip
+        content={i18n._(
+          t`Indicates if a host is available and should be included in running
+          jobs.  For hosts that are part of an external inventory, this may be
+          reset by the inventory sync process.`
+        )}
+        position="top"
+      >
+        <Switch
+          css="display: inline-flex;"
+          id={`host-${host.id}-toggle`}
+          label={i18n._(t`On`)}
+          labelOff={i18n._(t`Off`)}
+          isChecked={isEnabled}
+          isDisabled={isLoading || !host.summary_fields.user_capabilities.edit}
+          onChange={toggleHost}
+          aria-label={i18n._(t`Toggle host`)}
+        />
+      </Tooltip>
+      {showError && error && !isLoading && (
+        <AlertModal
+          variant="danger"
+          title={i18n._(t`Error!`)}
+          isOpen={error && !isLoading}
+          onClose={() => setShowError(false)}
+        >
+          {i18n._(t`Failed to toggle host.`)}
+          <ErrorDetail error={error} />
+        </AlertModal>
+      )}
+    </Fragment>
+  );
+}
+
+export default withI18n()(HostToggle);