Merge pull request #7759 from mabashian/convert-ProjectJobTemplatesList-hooks

Update ProjectJobTemplatesList to use useSelected, useRequest, useDeleteItems hooks

Reviewed-by: Jake McDermott <yo@jakemcdermott.me>
             https://github.com/jakemcdermott

awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesList.jsx

@@ -1,14 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect } from 'react';
-import { useParams, useLocation } 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';
-
+import { JobTemplatesAPI } from '../../../api';
-import {
-  JobTemplatesAPI,
-  UnifiedJobTemplatesAPI,
-  WorkflowJobTemplatesAPI,
-} from '../../../api';
 import AlertModal from '../../../components/AlertModal';
 import DatalistToolbar from '../../../components/DataListToolbar';
 import ErrorDetail from '../../../components/ErrorDetail';
@@ -17,144 +12,93 @@ import PaginatedDataList, {
   ToolbarDeleteButton,
 } from '../../../components/PaginatedDataList';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
+import useSelected from '../../../util/useSelected';
+import useRequest, { useDeleteItems } from '../../../util/useRequest';
 import ProjectTemplatesListItem from './ProjectJobTemplatesListItem';
 
-// The type value in const QS_CONFIG below does not have a space between job_template and
-// workflow_job_template so the params sent to the API match what the api expects.
 const QS_CONFIG = getQSConfig('template', {
   page: 1,
   page_size: 20,
   order_by: 'name',
-  type: 'job_template,workflow_job_template',
 });
 
 function ProjectJobTemplatesList({ i18n }) {
   const { id: projectId } = useParams();
-  const { pathname, search } = useLocation();
+  const location = useLocation();
 
-  const [deletionError, setDeletionError] = useState(null);
+  const {
-  const [contentError, setContentError] = useState(null);
+    result: { jobTemplates, itemCount, actions },
-  const [hasContentLoading, setHasContentLoading] = useState(true);
+    error: contentError,
-  const [jtActions, setJTActions] = useState(null);
+    isLoading,
-  const [wfjtActions, setWFJTActions] = useState(null);
+    request: fetchTemplates,
-  const [count, setCount] = useState(0);
+  } = useRequest(
-  const [templates, setTemplates] = useState([]);
+    useCallback(async () => {
-  const [selected, setSelected] = useState([]);
+      const params = parseQueryString(QS_CONFIG, location.search);
-
+      params.project = projectId;
-  useEffect(
+      const [response, actionsResponse] = await Promise.all([
-    () => {
+        JobTemplatesAPI.read(params),
-      const loadTemplates = async () => {
+        JobTemplatesAPI.readOptions(),
-        const params = {
+      ]);
-          ...parseQueryString(QS_CONFIG, search),
+      return {
-        };
+        jobTemplates: response.data.results,
-
+        itemCount: response.data.count,
-        let jtOptionsPromise;
+        actions: actionsResponse.data.actions,
-        if (jtActions) {
-          jtOptionsPromise = Promise.resolve({
-            data: { actions: jtActions },
-          });
-        } else {
-          jtOptionsPromise = JobTemplatesAPI.readOptions();
-        }
-
-        let wfjtOptionsPromise;
-        if (wfjtActions) {
-          wfjtOptionsPromise = Promise.resolve({
-            data: { actions: wfjtActions },
-          });
-        } else {
-          wfjtOptionsPromise = WorkflowJobTemplatesAPI.readOptions();
-        }
-        if (pathname.startsWith('/projects') && projectId) {
-          params.jobtemplate__project = projectId;
-        }
-
-        const promises = Promise.all([
-          UnifiedJobTemplatesAPI.read(params),
-          jtOptionsPromise,
-          wfjtOptionsPromise,
-        ]);
-        setDeletionError(null);
-
-        try {
-          const [
-            {
-              data: { count: itemCount, results },
-            },
-            {
-              data: { actions: jobTemplateActions },
-            },
-            {
-              data: { actions: workFlowJobTemplateActions },
-            },
-          ] = await promises;
-          setJTActions(jobTemplateActions);
-          setWFJTActions(workFlowJobTemplateActions);
-          setCount(itemCount);
-          setTemplates(results);
-          setHasContentLoading(false);
-        } catch (err) {
-          setContentError(err);
-        }
       };
-      loadTemplates();
+    }, [location, projectId]),
-    },
+    {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+      jobTemplates: [],
-    [pathname, search, count, projectId]
+      itemCount: 0,
+      actions: {},
+    }
   );
 
-  const handleSelectAll = isSelected => {
+  useEffect(() => {
-    const selectedItems = isSelected ? [...templates] : [];
+    fetchTemplates();
-    setSelected(selectedItems);
+  }, [fetchTemplates]);
-  };
 
-  const handleSelect = template => {
+  const { selected, isAllSelected, handleSelect, setSelected } = useSelected(
-    if (selected.some(s => s.id === template.id)) {
+    jobTemplates
-      setSelected(selected.filter(s => s.id !== template.id));
+  );
-    } else {
+
-      setSelected(selected.concat(template));
+  const {
+    isLoading: isDeleteLoading,
+    deleteItems: deleteTemplates,
+    deletionError,
+    clearDeletionError,
+  } = useDeleteItems(
+    useCallback(async () => {
+      return Promise.all(
+        selected.map(template => JobTemplatesAPI.destroy(template.id))
+      );
+    }, [selected]),
+    {
+      qsConfig: QS_CONFIG,
+      allItemsSelected: isAllSelected,
+      fetchItems: fetchTemplates,
     }
-  };
+  );
 
   const handleTemplateDelete = async () => {
-    setHasContentLoading(true);
+    await deleteTemplates();
-    try {
+    setSelected([]);
-      await Promise.all(
-        selected.map(({ type, id }) => {
-          let deletePromise;
-          if (type === 'job_template') {
-            deletePromise = JobTemplatesAPI.destroy(id);
-          } else if (type === 'workflow_job_template') {
-            deletePromise = WorkflowJobTemplatesAPI.destroy(id);
-          }
-          return deletePromise;
-        })
-      );
-      setCount(count - selected.length);
-    } catch (err) {
-      setDeletionError(err);
-    }
   };
 
   const canAddJT =
-    jtActions && Object.prototype.hasOwnProperty.call(jtActions, 'POST');
+    actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
 
   const addButton = (
     <ToolbarAddButton key="add" linkTo="/templates/job_template/add/" />
   );
 
-  const isAllSelected =
-    selected.length === templates.length && selected.length > 0;
-
   return (
     <>
       <Card>
         <PaginatedDataList
           contentError={contentError}
-          hasContentLoading={hasContentLoading}
+          hasContentLoading={isDeleteLoading || isLoading}
-          items={templates}
+          items={jobTemplates}
-          itemCount={count}
+          itemCount={itemCount}
-          pluralizedItemName={i18n._(t`Templates`)}
+          pluralizedItemName={i18n._(t`Job templates`)}
           qsConfig={QS_CONFIG}
           onRowClick={handleSelect}
           toolbarSearchColumns={[
@@ -163,24 +107,16 @@ function ProjectJobTemplatesList({ i18n }) {
               key: 'name',
               isDefault: true,
             },
-            {
-              name: i18n._(t`Type`),
-              key: 'type',
-              options: [
-                [`job_template`, i18n._(t`Job Template`)],
-                [`workflow_job_template`, i18n._(t`Workflow Template`)],
-              ],
-            },
             {
               name: i18n._(t`Playbook name`),
               key: 'job_template__playbook',
             },
             {
-              name: i18n._(t`Created By (Username)`),
+              name: i18n._(t`Created by (username)`),
               key: 'created_by__username',
             },
             {
-              name: i18n._(t`Modified By (Username)`),
+              name: i18n._(t`Modified by (username)`),
               key: 'modified_by__username',
             },
           ]}
@@ -190,7 +126,7 @@ function ProjectJobTemplatesList({ i18n }) {
               key: 'job_template__inventory__id',
             },
             {
-              name: i18n._(t`Last Job Run`),
+              name: i18n._(t`Last job run`),
               key: 'last_job_run',
             },
             {
@@ -216,7 +152,9 @@ function ProjectJobTemplatesList({ i18n }) {
               showSelectAll
               showExpandCollapse
               isAllSelected={isAllSelected}
-              onSelectAll={handleSelectAll}
+              onSelectAll={isSelected =>
+                setSelected(isSelected ? [...jobTemplates] : [])
+              }
               qsConfig={QS_CONFIG}
               additionalControls={[
                 ...(canAddJT ? [addButton] : []),
@@ -224,7 +162,7 @@ function ProjectJobTemplatesList({ i18n }) {
                   key="delete"
                   onDelete={handleTemplateDelete}
                   itemsToDelete={selected}
-                  pluralizedItemName="Templates"
+                  pluralizedItemName={i18n._(t`Job templates`)}
                 />,
               ]}
             />
@@ -246,9 +184,9 @@ function ProjectJobTemplatesList({ i18n }) {
         isOpen={deletionError}
         variant="danger"
         title={i18n._(t`Error!`)}
-        onClose={() => setDeletionError(null)}
+        onClose={clearDeletionError}
       >
-        {i18n._(t`Failed to delete one or more templates.`)}
+        {i18n._(t`Failed to delete one or more job templates.`)}
         <ErrorDetail error={deletionError} />
       </AlertModal>
     </>