convert TeamList to hooks

awx/ui_next/src/screens/Team/TeamList/TeamList.jsx

@@ -1,10 +1,11 @@
-import React, { Component, Fragment } from 'react';
+import React, { Fragment, useState, useEffect, useCallback } from 'react';
-import { withRouter } from 'react-router-dom';
+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 { TeamsAPI } from '@api';
+import useRequest, { useDeleteItems } from '@util/useRequest';
 import AlertModal from '@components/AlertModal';
 import DataListToolbar from '@components/DataListToolbar';
 import ErrorDetail from '@components/ErrorDetail';
@@ -22,125 +23,76 @@ const QS_CONFIG = getQSConfig('team', {
   order_by: 'name',
 });
 
-class TeamsList extends Component {
+function TeamList({ i18n }) {
-  constructor(props) {
+  const location = useLocation();
-    super(props);
+  const match = useRouteMatch();
+  const [selected, setSelected] = useState([]);
 
-    this.state = {
+  const {
-      hasContentLoading: true,
+    result: { teams, itemCount, actions },
-      contentError: null,
+    error: contentError,
-      deletionError: null,
+    isLoading,
+    request: fetchTeams,
+  } = useRequest(
+    useCallback(async () => {
+      const params = parseQueryString(QS_CONFIG, location.search);
+      const [response, actionsResponse] = await Promise.all([
+        TeamsAPI.read(params),
+        TeamsAPI.readOptions(),
+      ]);
+      return {
+        teams: response.data.results,
+        itemCount: response.data.count,
+        actions: actionsResponse.data.actions,
+      };
+    }, [location]),
+    {
       teams: [],
-      selected: [],
       itemCount: 0,
-      actions: null,
+      actions: {},
+    }
+  );
+
+  useEffect(() => {
+    fetchTeams();
+  }, [fetchTeams]);
+
+  const isAllSelected = selected.length === teams.length && selected.length > 0;
+  const {
+    isLoading: isDeleteLoading,
+    deleteItems: deleteTeams,
+    deletionError,
+    clearDeletionError,
+  } = useDeleteItems(
+    useCallback(async () => {
+      return Promise.all(selected.map(team => TeamsAPI.destroy(team.id)));
+    }, [selected]),
+    {
+      qsConfig: QS_CONFIG,
+      allItemsSelected: isAllSelected,
+      fetchItems: fetchTeams,
+    }
+  );
+
+  const handleTeamDelete = async () => {
+    await deleteTeams();
+    setSelected([]);
   };
 
-    this.handleSelectAll = this.handleSelectAll.bind(this);
+  const hasContentLoading = isDeleteLoading || isLoading;
-    this.handleSelect = this.handleSelect.bind(this);
+  const canAdd = actions && actions.POST;
-    this.handleTeamDelete = this.handleTeamDelete.bind(this);
-    this.handleDeleteErrorClose = this.handleDeleteErrorClose.bind(this);
-    this.loadTeams = this.loadTeams.bind(this);
-  }
 
-  componentDidMount() {
+  const handleSelectAll = isSelected => {
-    this.loadTeams();
+    setSelected(isSelected ? [...teams] : []);
-  }
+  };
-
-  componentDidUpdate(prevProps) {
-    const { location } = this.props;
-    if (location !== prevProps.location) {
-      this.loadTeams();
-    }
-  }
-
-  handleSelectAll(isSelected) {
-    const { teams } = this.state;
-
-    const selected = isSelected ? [...teams] : [];
-    this.setState({ selected });
-  }
-
-  handleSelect(row) {
-    const { selected } = this.state;
 
+  const handleSelect = row => {
     if (selected.some(s => s.id === row.id)) {
-      this.setState({ selected: selected.filter(s => s.id !== row.id) });
+      setSelected(selected.filter(s => s.id !== row.id));
     } else {
-      this.setState({ selected: selected.concat(row) });
+      setSelected(selected.concat(row));
     }
-  }
+  };
-
-  handleDeleteErrorClose() {
-    this.setState({ deletionError: null });
-  }
-
-  async handleTeamDelete() {
-    const { selected } = this.state;
-
-    this.setState({ hasContentLoading: true });
-    try {
-      await Promise.all(selected.map(team => TeamsAPI.destroy(team.id)));
-    } catch (err) {
-      this.setState({ deletionError: err });
-    } finally {
-      await this.loadTeams();
-    }
-  }
-
-  async loadTeams() {
-    const { location } = this.props;
-    const { actions: cachedActions } = this.state;
-    const params = parseQueryString(QS_CONFIG, location.search);
-
-    let optionsPromise;
-    if (cachedActions) {
-      optionsPromise = Promise.resolve({ data: { actions: cachedActions } });
-    } else {
-      optionsPromise = TeamsAPI.readOptions();
-    }
-
-    const promises = Promise.all([TeamsAPI.read(params), optionsPromise]);
-
-    this.setState({ contentError: null, hasContentLoading: true });
-    try {
-      const [
-        {
-          data: { count, results },
-        },
-        {
-          data: { actions },
-        },
-      ] = await promises;
-      this.setState({
-        actions,
-        itemCount: count,
-        teams: results,
-        selected: [],
-      });
-    } catch (err) {
-      this.setState({ contentError: err });
-    } finally {
-      this.setState({ hasContentLoading: false });
-    }
-  }
-
-  render() {
-    const {
-      actions,
-      itemCount,
-      contentError,
-      hasContentLoading,
-      deletionError,
-      selected,
-      teams,
-    } = this.state;
-    const { match, i18n } = this.props;
-
-    const canAdd =
-      actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
-    const isAllSelected =
-      selected.length > 0 && selected.length === teams.length;
 
   return (
     <Fragment>
@@ -153,7 +105,7 @@ class TeamsList extends Component {
             itemCount={itemCount}
             pluralizedItemName={i18n._(t`Teams`)}
             qsConfig={QS_CONFIG}
-              onRowClick={this.handleSelect}
+            onRowClick={handleSelect}
             toolbarSearchColumns={[
               {
                 name: i18n._(t`Name`),
@@ -184,7 +136,7 @@ class TeamsList extends Component {
                 {...props}
                 showSelectAll
                 isAllSelected={isAllSelected}
-                  onSelectAll={this.handleSelectAll}
+                onSelectAll={handleSelectAll}
                 qsConfig={QS_CONFIG}
                 additionalControls={[
                   ...(canAdd
@@ -197,7 +149,7 @@ class TeamsList extends Component {
                     : []),
                   <ToolbarDeleteButton
                     key="delete"
-                      onDelete={this.handleTeamDelete}
+                    onDelete={handleTeamDelete}
                     itemsToDelete={selected}
                     pluralizedItemName={i18n._(t`Teams`)}
                   />,
@@ -210,7 +162,7 @@ class TeamsList extends Component {
                 team={o}
                 detailUrl={`${match.url}/${o.id}`}
                 isSelected={selected.some(row => row.id === o.id)}
-                  onSelect={() => this.handleSelect(o)}
+                onSelect={() => handleSelect(o)}
               />
             )}
             emptyStateControls={
@@ -225,7 +177,7 @@ class TeamsList extends Component {
         isOpen={deletionError}
         variant="error"
         title={i18n._(t`Error!`)}
-          onClose={this.handleDeleteErrorClose}
+        onClose={clearDeletionError}
       >
         {i18n._(t`Failed to delete one or more teams.`)}
         <ErrorDetail error={deletionError} />
@@ -233,7 +185,5 @@ class TeamsList extends Component {
     </Fragment>
   );
 }
-}
 
-export { TeamsList as _TeamsList };
+export default withI18n()(TeamList);
-export default withI18n()(withRouter(TeamsList));

awx/ui_next/src/screens/Team/TeamList/TeamList.test.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { TeamsAPI } from '@api';
-import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
 
-import TeamsList, { _TeamsList } from './TeamList';
+import TeamList from './TeamList';
 
 jest.mock('@api');
 
-const mockAPITeamsList = {
+const mockAPITeamList = {
   data: {
     count: 3,
     results: [
@@ -50,15 +51,14 @@ const mockAPITeamsList = {
   warningMsg: 'message',
 };
 
-describe('<TeamsList />', () => {
+describe('<TeamList />', () => {
-  let wrapper;
-
   beforeEach(() => {
-    TeamsAPI.read = () =>
+    TeamsAPI.read = jest.fn(() =>
       Promise.resolve({
-        data: mockAPITeamsList.data,
+        data: mockAPITeamList.data,
-      });
+      })
-    TeamsAPI.readOptions = () =>
+    );
+    TeamsAPI.readOptions = jest.fn(() =>
       Promise.resolve({
         data: {
           actions: {
@@ -66,105 +66,119 @@ describe('<TeamsList />', () => {
             POST: {},
           },
         },
-      });
+      })
-  });
-
-  test('initially renders succesfully', () => {
-    mountWithContexts(<TeamsList />);
-  });
-
-  test('Selects one team when row is checked', async () => {
-    wrapper = mountWithContexts(<TeamsList />);
-    await waitForElement(
-      wrapper,
-      'TeamsList',
-      el => el.state('hasContentLoading') === false
     );
+  });
+
+  test('should load and render teams', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(<TeamList />);
+    });
+    wrapper.update();
+
+    expect(wrapper.find('TeamListItem')).toHaveLength(3);
+  });
+
+  test('should select team when checked', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(<TeamList />);
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper
+        .find('TeamListItem')
+        .first()
+        .invoke('onSelect')();
+    });
+    wrapper.update();
+
     expect(
       wrapper
-        .find('input[type="checkbox"]')
+        .find('TeamListItem')
-        .findWhere(n => n.prop('checked') === true).length
+        .first()
-    ).toBe(0);
+        .prop('isSelected')
+    ).toEqual(true);
+  });
+
+  test('should select all', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(<TeamList />);
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('DataListToolbar').invoke('onSelectAll')(true);
+    });
+    wrapper.update();
+
+    const items = wrapper.find('TeamListItem');
+    expect(items).toHaveLength(3);
+    items.forEach(item => {
+      expect(item.prop('isSelected')).toEqual(true);
+    });
+
+    expect(
+      wrapper
+        .find('TeamListItem')
+        .first()
+        .prop('isSelected')
+    ).toEqual(true);
+  });
+
+  test('should call delete api', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(<TeamList />);
+    });
+    wrapper.update();
+
+    await act(async () => {
       wrapper
         .find('TeamListItem')
         .at(0)
-      .find('DataListCheck')
+        .invoke('onSelect')();
-      .props()
+    });
-      .onChange(true);
     wrapper.update();
-    expect(
+    await act(async () => {
       wrapper
-        .find('input[type="checkbox"]')
+        .find('TeamListItem')
-        .findWhere(n => n.prop('checked') === true).length
+        .at(1)
-    ).toBe(1);
+        .invoke('onSelect')();
     });
-
-  test('Select all checkbox selects and unselects all rows', async () => {
-    wrapper = mountWithContexts(<TeamsList />);
-    await waitForElement(
-      wrapper,
-      'TeamsList',
-      el => el.state('hasContentLoading') === false
-    );
-    expect(
-      wrapper
-        .find('input[type="checkbox"]')
-        .findWhere(n => n.prop('checked') === true).length
-    ).toBe(0);
-    wrapper
-      .find('Checkbox#select-all')
-      .props()
-      .onChange(true);
     wrapper.update();
-    expect(
+    await act(async () => {
-      wrapper
+      wrapper.find('ToolbarDeleteButton').invoke('onDelete')();
-        .find('input[type="checkbox"]')
+    });
-        .findWhere(n => n.prop('checked') === true).length
+
-    ).toBe(4);
+    expect(TeamsAPI.destroy).toHaveBeenCalledTimes(2);
-    wrapper
+  });
-      .find('Checkbox#select-all')
+
-      .props()
+  test('should re-fetch teams after team(s) have been deleted', async () => {
-      .onChange(false);
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(<TeamList />);
+    });
     wrapper.update();
-    expect(
+    expect(TeamsAPI.read).toHaveBeenCalledTimes(1);
+    await act(async () => {
       wrapper
-        .find('input[type="checkbox"]')
+        .find('TeamListItem')
-        .findWhere(n => n.prop('checked') === true).length
+        .at(0)
-    ).toBe(0);
+        .invoke('onSelect')();
+    });
+    wrapper.update();
+    await act(async () => {
+      wrapper.find('ToolbarDeleteButton').invoke('onDelete')();
     });
 
-  test('api is called to delete Teams for each team in selected.', () => {
+    expect(TeamsAPI.read).toHaveBeenCalledTimes(2);
-    wrapper = mountWithContexts(<TeamsList />);
-    const component = wrapper.find('TeamsList');
-    wrapper.find('TeamsList').setState({
-      teams: mockAPITeamsList.data.results,
-      itemCount: 3,
-      isInitialized: true,
-      isModalOpen: mockAPITeamsList.isModalOpen,
-      selected: mockAPITeamsList.data.results,
-    });
-    wrapper.find('ToolbarDeleteButton').prop('onDelete')();
-    expect(TeamsAPI.destroy).toHaveBeenCalledTimes(
-      component.state('selected').length
-    );
   });
 
-  test('call loadTeams after team(s) have been deleted', () => {
+  test('should show deletion error', async () => {
-    const fetchTeams = jest.spyOn(_TeamsList.prototype, 'loadTeams');
-    const event = { preventDefault: () => {} };
-    wrapper = mountWithContexts(<TeamsList />);
-    wrapper.find('TeamsList').setState({
-      teams: mockAPITeamsList.data.results,
-      itemCount: 3,
-      isInitialized: true,
-      selected: mockAPITeamsList.data.results.slice(0, 1),
-    });
-    const component = wrapper.find('TeamsList');
-    component.instance().handleTeamDelete(event);
-    expect(fetchTeams).toBeCalled();
-  });
-
-  test('error is shown when team not successfully deleted from api', async done => {
     TeamsAPI.destroy.mockRejectedValue(
       new Error({
         response: {
@@ -176,40 +190,41 @@ describe('<TeamsList />', () => {
         },
       })
     );
-
+    let wrapper;
-    wrapper = mountWithContexts(<TeamsList />);
+    await act(async () => {
-    wrapper.find('TeamsList').setState({
+      wrapper = mountWithContexts(<TeamList />);
-      teams: mockAPITeamsList.data.results,
-      itemCount: 3,
-      isInitialized: true,
-      selected: mockAPITeamsList.data.results.slice(0, 1),
     });
-    wrapper.find('ToolbarDeleteButton').prop('onDelete')();
+    wrapper.update();
-    await waitForElement(
+    expect(TeamsAPI.read).toHaveBeenCalledTimes(1);
-      wrapper,
+    await act(async () => {
-      'Modal',
+      wrapper
-      el => el.props().isOpen === true && el.props().title === 'Error!'
+        .find('TeamListItem')
-    );
+        .at(0)
-    done();
+        .invoke('onSelect')();
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('ToolbarDeleteButton').invoke('onDelete')();
+    });
+    wrapper.update();
+
+    const modal = wrapper.find('Modal');
+    expect(modal).toHaveLength(1);
+    expect(modal.prop('title')).toEqual('Error!');
   });
 
-  test('Add button shown for users without ability to POST', async done => {
+  test('Add button shown for users without ability to POST', async () => {
-    wrapper = mountWithContexts(<TeamsList />);
+    let wrapper;
-    await waitForElement(
+    await act(async () => {
-      wrapper,
+      wrapper = mountWithContexts(<TeamList />);
-      'TeamsList',
+    });
-      el => el.state('hasContentLoading') === true
+    wrapper.update();
-    );
+
-    await waitForElement(
-      wrapper,
-      'TeamsList',
-      el => el.state('hasContentLoading') === false
-    );
     expect(wrapper.find('ToolbarAddButton').length).toBe(1);
-    done();
   });
 
-  test('Add button hidden for users without ability to POST', async done => {
+  test('Add button hidden for users without ability to POST', async () => {
     TeamsAPI.readOptions = () =>
       Promise.resolve({
         data: {
@@ -218,18 +233,12 @@ describe('<TeamsList />', () => {
           },
         },
       });
-    wrapper = mountWithContexts(<TeamsList />);
+    let wrapper;
-    await waitForElement(
+    await act(async () => {
-      wrapper,
+      wrapper = mountWithContexts(<TeamList />);
-      'TeamsList',
+    });
-      el => el.state('hasContentLoading') === true
+    wrapper.update();
-    );
+
-    await waitForElement(
-      wrapper,
-      'TeamsList',
-      el => el.state('hasContentLoading') === false
-    );
     expect(wrapper.find('ToolbarAddButton').length).toBe(0);
-    done();
   });
 });