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,263 +23,158 @@ 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,
-    };
-
-    this.handleSelectAll = this.handleSelectAll.bind(this);
-    this.handleSelect = this.handleSelect.bind(this);
-    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() {
-    this.loadHosts();
-  }
-
-  componentDidUpdate(prevProps) {
-    const { location } = this.props;
-    if (location !== prevProps.location) {
-      this.loadHosts();
     }
-  }
+  );
 
-  handleSelectAll(isSelected) {
+  useEffect(() => {
-    const { hosts } = this.state;
+    fetchHosts();
+  }, [fetchHosts]);
 
-    const selected = isSelected ? [...hosts] : [];
+  const isAllSelected = selected.length === hosts.length && selected.length > 0;
-    this.setState({ selected });
+  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,
+    }
+  );
 
-  handleSelect(row) {
+  const handleHostDelete = async () => {
-    const { selected } = this.state;
+    await deleteHosts();
+    setSelected([]);
+  };
 
-    if (selected.some(s => s.id === row.id)) {
+  const handleSelectAll = isSelected => {
-      this.setState({ selected: selected.filter(s => s.id !== row.id) });
+    setSelected(isSelected ? [...hosts] : []);
+  };
+
+  const handleSelect = host => {
+    if (selected.some(h => h.id === host.id)) {
+      setSelected(selected.filter(h => h.id !== host.id));
     } else {
-      this.setState({ selected: selected.concat(row) });
+      setSelected(selected.concat(host));
     }
-  }
+  };
 
-  handleDeleteErrorClose() {
+  const canAdd =
-    this.setState({ deletionError: null });
+    actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
-  }
 
-  handleHostToggleErrorClose() {
+  return (
-    this.setState({ toggleError: null });
+    <Fragment>
-  }
+      <Card>
-
+        <PaginatedDataList
-  async handleHostDelete() {
+          contentError={contentError}
-    const { selected } = this.state;
+          hasContentLoading={isLoading || isDeleteLoading}
-
+          items={hosts}
-    this.setState({ hasContentLoading: true });
+          itemCount={count}
-    try {
+          pluralizedItemName={i18n._(t`Hosts`)}
-      await Promise.all(selected.map(host => HostsAPI.destroy(host.id)));
+          qsConfig={QS_CONFIG}
-    } catch (err) {
+          onRowClick={handleSelect}
-      this.setState({ deletionError: err });
+          toolbarSearchColumns={[
-    } finally {
+            {
-      await this.loadHosts();
+              name: i18n._(t`Name`),
-    }
+              key: 'name',
-  }
+              isDefault: true,
-
+            },
-  async handleHostToggle(hostToToggle) {
+            {
-    const { hosts } = this.state;
+              name: i18n._(t`Created By (Username)`),
-    this.setState({ toggleLoading: hostToToggle.id });
+              key: 'created_by__username',
-    try {
+            },
-      const { data: updatedHost } = await HostsAPI.update(hostToToggle.id, {
+            {
-        enabled: !hostToToggle.enabled,
+              name: i18n._(t`Modified By (Username)`),
-      });
+              key: 'modified_by__username',
-      this.setState({
+            },
-        hosts: hosts.map(host =>
+          ]}
-          host.id === updatedHost.id ? updatedHost : host
+          toolbarSortColumns={[
-        ),
+            {
-      });
+              name: i18n._(t`Name`),
-    } catch (err) {
+              key: 'name',
-      this.setState({ toggleError: err });
+            },
-    } finally {
+          ]}
-      this.setState({ toggleLoading: null });
+          renderToolbar={props => (
-    }
+            <DataListToolbar
-  }
+              {...props}
-
+              showSelectAll
-  async loadActions() {
+              isAllSelected={isAllSelected}
-    const { actions: cachedActions } = this.state;
+              onSelectAll={handleSelectAll}
-    let optionsPromise;
+              qsConfig={QS_CONFIG}
-    if (cachedActions) {
+              additionalControls={[
-      optionsPromise = Promise.resolve({ data: { actions: cachedActions } });
+                <ToolbarDeleteButton
-    } else {
+                  key="delete"
-      optionsPromise = HostsAPI.readOptions();
+                  onDelete={handleHostDelete}
-    }
+                  itemsToDelete={selected}
-
+                  pluralizedItemName={i18n._(t`Hosts`)}
-    return optionsPromise;
+                />,
-  }
+                ...(canAdd ? [(
-
+                  <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />]
-  async loadHosts() {
+                ) : [],
-    const { location } = this.props;
+              ]}
-    const params = parseQueryString(QS_CONFIG, location.search);
+            />
-
+          )}
-    const promises = Promise.all([HostsAPI.read(params), this.loadActions()]);
+          renderItem={o => (
-
+            <HostListItem
-    this.setState({ contentError: null, hasContentLoading: true });
+              key={o.id}
-    try {
+              host={o}
-      const [
+              detailUrl={`${match.url}/${o.id}/details`}
-        {
+              isSelected={selected.some(row => row.id === o.id)}
-          data: { count, results },
+              onSelect={() => handleSelect(o)}
-        },
+            />
-        {
+          )}
-          data: { actions },
+          emptyStateControls={
-        },
+            canAdd ? (
-      ] = await promises;
+              <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
-      this.setState({
+            ) : null
-        actions,
+          }
-        itemCount: count,
+        />
-        hosts: results,
+      </Card>
-        selected: [],
+      {deletionError && (
-      });
+        <AlertModal
-    } catch (err) {
+          isOpen={deletionError}
-      this.setState({ contentError: err });
+          variant="error"
-    } finally {
+          title={i18n._(t`Error!`)}
-      this.setState({ hasContentLoading: false });
+          onClose={clearDeletionError}
-    }
+        >
-  }
+          {i18n._(t`Failed to delete one or more hosts.`)}
-
+          <ErrorDetail error={deletionError} />
-  render() {
+        </AlertModal>
-    const {
+      )}
-      actions,
+    </Fragment>
-      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}
-            items={hosts}
-            itemCount={itemCount}
-            pluralizedItemName={i18n._(t`Hosts`)}
-            qsConfig={QS_CONFIG}
-            onRowClick={this.handleSelect}
-            toolbarSearchColumns={[
-              {
-                name: i18n._(t`Name`),
-                key: 'name',
-                isDefault: true,
-              },
-              {
-                name: i18n._(t`Created By (Username)`),
-                key: 'created_by__username',
-              },
-              {
-                name: i18n._(t`Modified By (Username)`),
-                key: 'modified_by__username',
-              },
-            ]}
-            toolbarSortColumns={[
-              {
-                name: i18n._(t`Name`),
-                key: 'name',
-              },
-            ]}
-            renderToolbar={props => (
-              <DataListToolbar
-                {...props}
-                showSelectAll
-                isAllSelected={isAllSelected}
-                onSelectAll={this.handleSelectAll}
-                qsConfig={QS_CONFIG}
-                additionalControls={[
-                  <ToolbarDeleteButton
-                    key="delete"
-                    onDelete={this.handleHostDelete}
-                    itemsToDelete={selected}
-                    pluralizedItemName={i18n._(t`Hosts`)}
-                  />,
-                  ...(canAdd
-                    ? [
-                        <ToolbarAddButton
-                          key="add"
-                          linkTo={`${match.url}/add`}
-                        />,
-                      ]
-                    : []),
-                ]}
-              />
-            )}
-            renderItem={o => (
-              <HostListItem
-                key={o.id}
-                host={o}
-                detailUrl={`${match.url}/${o.id}/details`}
-                isSelected={selected.some(row => row.id === o.id)}
-                onSelect={() => this.handleSelect(o)}
-                onToggleHost={this.handleHostToggle}
-                toggleLoading={toggleLoading === o.id}
-              />
-            )}
-            emptyStateControls={
-              canAdd ? (
-                <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
-              ) : null
-            }
-          />
-        </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}
-          >
-            {i18n._(t`Failed to delete one or more hosts.`)}
-            <ErrorDetail error={deletionError} />
-          </AlertModal>
-        )}
-      </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);