From 0d4730d6f81016190c98dd60f967ceb296d2b044 Mon Sep 17 00:00:00 2001
From: Arik Fraimovich <arik@arikfr.com>
Date: Thu, 5 Dec 2019 15:40:29 +0200
Subject: [PATCH] eslint --fix fixes for missing dependencies for react hooks

---
 client/app/components/EditParameterSettingsDialog.jsx     | 2 +-
 client/app/components/TimeAgo.jsx                         | 2 +-
 client/app/components/Timer.jsx                           | 2 +-
 .../app-header/components/FavoritesDropdown.jsx           | 2 +-
 .../permissions-editor/PermissionsEditorDialog.jsx        | 8 ++++----
 client/app/pages/alert/components/MenuButton.jsx          | 2 +-
 client/app/pages/alert/components/Rearm.jsx               | 2 +-
 client/app/pages/home/Home.jsx                            | 2 +-
 client/app/visualizations/EditVisualizationDialog.jsx     | 2 +-
 client/app/visualizations/VisualizationRenderer.jsx       | 4 ++--
 client/app/visualizations/chart/Editor/SeriesSettings.jsx | 2 +-
 .../visualizations/chart/Renderer/CustomPlotlyChart.jsx   | 2 +-
 .../visualizations/choropleth/Editor/BoundsSettings.jsx   | 2 +-
 client/app/visualizations/choropleth/Renderer/index.jsx   | 2 +-
 client/app/visualizations/cohort/Cornelius.jsx            | 2 +-
 client/app/visualizations/funnel/Renderer/index.jsx       | 2 +-
 16 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/client/app/components/EditParameterSettingsDialog.jsx b/client/app/components/EditParameterSettingsDialog.jsx
index fbae2eb71d..b5af2fde63 100644
--- a/client/app/components/EditParameterSettingsDialog.jsx
+++ b/client/app/components/EditParameterSettingsDialog.jsx
@@ -92,7 +92,7 @@ function EditParameterSettingsDialog(props) {
         setInitialQuery(query);
       });
     }
-  }, []);
+  }, [props.parameter]);
 
   function isFulfilled() {
     // name
diff --git a/client/app/components/TimeAgo.jsx b/client/app/components/TimeAgo.jsx
index fd4e08b2ca..c2e5b1cb48 100644
--- a/client/app/components/TimeAgo.jsx
+++ b/client/app/components/TimeAgo.jsx
@@ -26,7 +26,7 @@ export function TimeAgo({ date, placeholder, autoUpdate }) {
       const timer = setInterval(forceUpdate, 30 * 1000);
       return () => clearInterval(timer);
     }
-  }, [autoUpdate]);
+  }, [autoUpdate, forceUpdate]);
 
   return (
     <Tooltip title={title}>
diff --git a/client/app/components/Timer.jsx b/client/app/components/Timer.jsx
index ebaa976b74..bdca500715 100644
--- a/client/app/components/Timer.jsx
+++ b/client/app/components/Timer.jsx
@@ -12,7 +12,7 @@ export function Timer({ from }) {
   useEffect(() => {
     const timer = setInterval(forceUpdate, 1000);
     return () => clearInterval(timer);
-  }, []);
+  }, [forceUpdate]);
 
   const diff = moment.now() - startTime;
   const format = diff > 1000 * 60 * 60 ? 'HH:mm:ss' : 'mm:ss'; // no HH under an hour
diff --git a/client/app/components/app-header/components/FavoritesDropdown.jsx b/client/app/components/app-header/components/FavoritesDropdown.jsx
index d21642792c..3849e43ea3 100644
--- a/client/app/components/app-header/components/FavoritesDropdown.jsx
+++ b/client/app/components/app-header/components/FavoritesDropdown.jsx
@@ -27,7 +27,7 @@ export default function FavoritesDropdown({ fetch, urlTemplate }) {
   }, [fetch]);
 
   // fetch items on init
-  useEffect(() => fetchItems(false), []);
+  useEffect(() => fetchItems(false), [fetchItems]);
 
   // fetch items on click
   const onVisibleChange = visible => visible && fetchItems();
diff --git a/client/app/components/permissions-editor/PermissionsEditorDialog.jsx b/client/app/components/permissions-editor/PermissionsEditorDialog.jsx
index caa2112f86..e9bf43ca0e 100644
--- a/client/app/components/permissions-editor/PermissionsEditorDialog.jsx
+++ b/client/app/components/permissions-editor/PermissionsEditorDialog.jsx
@@ -77,7 +77,7 @@ function UserSelect({ onSelect, shouldShowUser }) {
   useEffect(() => {
     setLoadingUsers(true);
     debouncedSearchUsers(searchTerm);
-  }, [searchTerm]);
+  }, [debouncedSearchUsers, searchTerm]);
 
   return (
     <Select
@@ -117,16 +117,16 @@ function PermissionsEditorDialog({ dialog, author, context, aclUrl }) {
       .then(setGrantees)
       .catch(() => notification.error('Failed to load grantees list'))
       .finally(() => setLoadingGrantees(false));
-  }, []);
+  }, [loadGrantees]);
 
   const userHasPermission = useCallback(
     user => (user.id === author.id || !!get(find(grantees, { id: user.id }), 'accessType')),
-    [grantees],
+    [author.id, grantees],
   );
 
   useEffect(() => {
     loadUsersWithPermissions();
-  }, [aclUrl]);
+  }, [aclUrl, loadUsersWithPermissions]);
 
   return (
     <Modal
diff --git a/client/app/pages/alert/components/MenuButton.jsx b/client/app/pages/alert/components/MenuButton.jsx
index 540314dfbd..d8ab8bed74 100644
--- a/client/app/pages/alert/components/MenuButton.jsx
+++ b/client/app/pages/alert/components/MenuButton.jsx
@@ -34,7 +34,7 @@ export default function MenuButton({ doDelete, canEdit, mute, unmute, muted }) {
       maskClosable: true,
       autoFocusButton: null,
     });
-  }, []);
+  }, [doDelete]);
 
   return (
     <Dropdown
diff --git a/client/app/pages/alert/components/Rearm.jsx b/client/app/pages/alert/components/Rearm.jsx
index 8c6fcb6ab1..0b24305b49 100644
--- a/client/app/pages/alert/components/Rearm.jsx
+++ b/client/app/pages/alert/components/Rearm.jsx
@@ -28,7 +28,7 @@ function RearmByDuration({ value, onChange, editMode }) {
         break;
       }
     }
-  }, []);
+  }, [value]);
 
   if (!isNumber(count) || !isNumber(durationIdx)) {
     return null;
diff --git a/client/app/pages/home/Home.jsx b/client/app/pages/home/Home.jsx
index 907ba24d03..c935afd56d 100644
--- a/client/app/pages/home/Home.jsx
+++ b/client/app/pages/home/Home.jsx
@@ -68,7 +68,7 @@ function FavoriteList({ title, resource, itemUrl, emptyState }) {
     resource.favorites().$promise
       .then(({ results }) => setItems(results))
       .finally(() => setLoading(false));
-  }, []);
+  }, [resource]);
 
   return (
     <>
diff --git a/client/app/visualizations/EditVisualizationDialog.jsx b/client/app/visualizations/EditVisualizationDialog.jsx
index 2701dc8b80..0687d9b6f0 100644
--- a/client/app/visualizations/EditVisualizationDialog.jsx
+++ b/client/app/visualizations/EditVisualizationDialog.jsx
@@ -84,7 +84,7 @@ function EditVisualizationDialog({ dialog, visualization, query, queryResult })
         originalOptions: options,
       };
     },
-    [visualization],
+    [data, isNew, visualization],
   );
 
   const [type, setType] = useState(defaultState.type);
diff --git a/client/app/visualizations/VisualizationRenderer.jsx b/client/app/visualizations/VisualizationRenderer.jsx
index 4e5d524587..26c4ad96ed 100644
--- a/client/app/visualizations/VisualizationRenderer.jsx
+++ b/client/app/visualizations/VisualizationRenderer.jsx
@@ -32,12 +32,12 @@ export function VisualizationRenderer(props) {
   // Reset local filters when query results updated
   useEffect(() => {
     setFilters(combineFilters(data.filters, props.filters));
-  }, [data]);
+  }, [data, props.filters]);
 
   // Update local filters when global filters changed
   useEffect(() => {
     setFilters(combineFilters(filters, props.filters));
-  }, [props.filters]);
+  }, [filters, props.filters]);
 
   const filteredData = useMemo(() => ({
     columns: data.columns,
diff --git a/client/app/visualizations/chart/Editor/SeriesSettings.jsx b/client/app/visualizations/chart/Editor/SeriesSettings.jsx
index a6665006f2..58912f90bc 100644
--- a/client/app/visualizations/chart/Editor/SeriesSettings.jsx
+++ b/client/app/visualizations/chart/Editor/SeriesSettings.jsx
@@ -89,7 +89,7 @@ export default function SeriesSettings({ options, data, onOptionsChange }) {
     const seriesOptions = [...series];
     seriesOptions.splice(newIndex, 0, ...seriesOptions.splice(oldIndex, 1));
     onOptionsChange({ seriesOptions: fromPairs(map(seriesOptions, ({ key }, zIndex) => ([key, { zIndex }]))) });
-  }, [series]);
+  }, [onOptionsChange, series]);
 
   const updateSeriesOption = useCallback((key, prop, value) => {
     onOptionsChange({
diff --git a/client/app/visualizations/chart/Renderer/CustomPlotlyChart.jsx b/client/app/visualizations/chart/Renderer/CustomPlotlyChart.jsx
index d60a43c213..5a998913f2 100644
--- a/client/app/visualizations/chart/Renderer/CustomPlotlyChart.jsx
+++ b/client/app/visualizations/chart/Renderer/CustomPlotlyChart.jsx
@@ -33,7 +33,7 @@ export default function CustomPlotlyChart({ options, data }) {
       });
       return unwatch;
     }
-  }, [container, plotlyData]);
+  }, [container, plotlyData, renderCustomChart]);
 
   // Cleanup when component destroyed
   useEffect(() => {
diff --git a/client/app/visualizations/choropleth/Editor/BoundsSettings.jsx b/client/app/visualizations/choropleth/Editor/BoundsSettings.jsx
index 79add2b3ad..99e468f8fb 100644
--- a/client/app/visualizations/choropleth/Editor/BoundsSettings.jsx
+++ b/client/app/visualizations/choropleth/Editor/BoundsSettings.jsx
@@ -28,7 +28,7 @@ export default function BoundsSettings({ options, onOptionsChange }) {
       setBounds(newBounds);
       onOptionsChangeDebounced({ bounds: newBounds });
     }
-  }, [bounds]);
+  }, [bounds, onOptionsChangeDebounced]);
 
   return (
     <React.Fragment>
diff --git a/client/app/visualizations/choropleth/Renderer/index.jsx b/client/app/visualizations/choropleth/Renderer/index.jsx
index d2bdf61f9e..2d399005c4 100644
--- a/client/app/visualizations/choropleth/Renderer/index.jsx
+++ b/client/app/visualizations/choropleth/Renderer/index.jsx
@@ -58,7 +58,7 @@ export default function Renderer({ data, options, onOptionsChange }) {
         options, // detect changes for all options except bounds, but pass them all!
       );
     }
-  }, [map, geoJson, data, optionsWithoutBounds]);
+  }, [map, geoJson, data, optionsWithoutBounds, options]);
 
   useEffect(() => {
     if (map) {
diff --git a/client/app/visualizations/cohort/Cornelius.jsx b/client/app/visualizations/cohort/Cornelius.jsx
index ec60f3f162..ed07a771b3 100644
--- a/client/app/visualizations/cohort/Cornelius.jsx
+++ b/client/app/visualizations/cohort/Cornelius.jsx
@@ -156,7 +156,7 @@ export default function Cornelius({ data, options }) {
   const maxRowLength = useMemo(() => min([
     max(map(data, d => d.length)) || 0,
     options.maxColumns + 1, // each row includes totals, but `maxColumns` is only for stage columns
-  ]), [data]);
+  ]), [data, options.maxColumns]);
 
   if (data.length === 0) {
     return null;
diff --git a/client/app/visualizations/funnel/Renderer/index.jsx b/client/app/visualizations/funnel/Renderer/index.jsx
index 1f46b8f9bc..43f5ccea61 100644
--- a/client/app/visualizations/funnel/Renderer/index.jsx
+++ b/client/app/visualizations/funnel/Renderer/index.jsx
@@ -16,7 +16,7 @@ function generateRowKeyPrefix() {
 
 export default function Renderer({ data, options }) {
   const funnelData = useMemo(() => prepareData(data.rows, options), [data, options]);
-  const rowKeyPrefix = useMemo(() => generateRowKeyPrefix(), [funnelData]);
+  const rowKeyPrefix = useMemo(() => generateRowKeyPrefix(), []);
 
   const formatValue = useMemo(() => createNumberFormatter(options.numberFormat), [options.numberFormat]);