ContentViewRepositories.js in katello-4.2.0.rc1

- old
+ new

@@ -1,6 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
 import { useSelector, shallowEqual, useDispatch } from 'react-redux';
 import {
   Bullseye,
   Split,
   SplitItem,
@@ -72,11 +73,11 @@
     __('Content'),
     { title: __('Status') },
   ];
   const loading = status === STATUS.PENDING;
 
-  const buildRows = (results) => {
+  const buildRows = useCallback((results) => {
     const newRows = [];
     results.forEach((repo) => {
       const {
         id,
         content_type: contentType,
@@ -99,33 +100,33 @@
         },
       ];
       newRows.push({ repoId: id, cells });
     });
     return newRows;
-  };
+  }, [statusSelected]);
 
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     const { results, ...meta } = response;
     setMetadata(meta);
 
     if (!loading && results) {
       const newRows = buildRows(results);
       setRows(newRows);
     }
-  }, [JSON.stringify(response)]);
+  }, [response, loading, buildRows]);
 
   useEffect(() => {
     dispatch(getRepositoryTypes());
-  }, []);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     const rowsAreSelected = rows.some(row => row.selected);
     setBulkActionEnabled(rowsAreSelected);
   }, [rows]);
 
   // Get repo type filter selections dynamically from the API
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     if (repoTypesStatus === STATUS.RESOLVED && repoTypesResponse) {
       const allRepoTypes = {};
       allRepoTypes[allRepositories] = 'all';
       repoTypesResponse.forEach((type) => {
         const { name } = type;
@@ -133,11 +134,11 @@
           repoTypeNames[name] : capitalize(name);
         allRepoTypes[`${typeFullName} Repositories`] = name;
       });
       setRepoTypes(allRepoTypes);
     }
-  }, [JSON.stringify(repoTypesResponse), repoTypesStatus]);
+  }, [repoTypesResponse, repoTypesStatus]);
 
   const toggleBulkAction = () => {
     setBulkActionOpen(!bulkActionOpen);
   };
 
@@ -152,16 +153,18 @@
     const deletedRepos = repositoryIds.filter(x => !reposToDelete.includes(x));
     dispatch(updateContentView(cvId, { repository_ids: deletedRepos }));
   };
 
   const addBulk = () => {
+    setBulkActionOpen(false);
     const reposToAdd = [];
     rows.forEach(row => row.selected && reposToAdd.push(row.repoId));
     onAdd(reposToAdd);
   };
 
   const removeBulk = () => {
+    setBulkActionOpen(false);
     const reposToDelete = [];
     rows.forEach(row => row.selected && reposToDelete.push(row.repoId));
     onRemove(reposToDelete);
   };
 
@@ -184,29 +187,29 @@
         },
       },
     ];
   };
 
-  const getCVReposWithOptions = (params = {}) => {
+  const getCVReposWithOptions = useCallback((params = {}) => {
     const allParams = { ...params };
     if (typeSelected !== 'All repositories') allParams.content_type = repoTypes[typeSelected];
 
     return getContentViewRepositories(cvId, allParams, statusSelected);
-  };
+  }, [cvId, repoTypes, statusSelected, typeSelected]);
 
   const emptyContentTitle = __("You currently don't have any repositories to add to this content view.");
   const emptyContentBody = __('Please add some repositories.'); // needs link
   const emptySearchTitle = __('No matching repositories found');
   const emptySearchBody = __('Try changing your search settings.');
   const activeFilters = (typeSelected && typeSelected !== allRepositories) ||
     (statusSelected && statusSelected !== ALL_STATUSES);
   const dropdownItems = [
     <DropdownItem aria-label="bulk_add" key="bulk_add" isDisabled={!bulkActionEnabled} component="button" onClick={addBulk}>
-      Add
+      {__('Add')}
     </DropdownItem>,
     <DropdownItem aria-label="bulk_remove" key="bulk_remove" isDisabled={!bulkActionEnabled} component="button" onClick={removeBulk}>
-      Remove
+      {__('Remove')}
     </DropdownItem>,
   ];
 
   return (
     <TableWrapper
@@ -226,10 +229,10 @@
       }}
       onSelect={onSelect(rows, setRows)}
       cells={columnHeaders}
       variant={TableVariant.compact}
       autocompleteEndpoint="/repositories/auto_complete_search"
-      fetchItems={params => getCVReposWithOptions(params)}
+      fetchItems={useCallback(params => getCVReposWithOptions(params), [getCVReposWithOptions])}
       additionalListeners={[typeSelected, statusSelected]}
     >
       <Split hasGutter>
         <SplitItem>
           <SelectableDropdown