A few updates post eslint (#4425)

client/app/components/EditParameterSettingsDialog.jsx

@@ -86,13 +86,13 @@ function EditParameterSettingsDialog(props) {
 
   // fetch query by id
   useEffect(() => {
-    const { queryId } = props.parameter;
+    const queryId = props.parameter.queryId;
     if (queryId) {
       Query.get({ id: queryId }, (query) => {
         setInitialQuery(query);
       });
     }
-  }, [props.parameter]);
+  }, [props.parameter.queryId]);
 
   function isFulfilled() {
     // name

client/app/components/QuerySelector.jsx

@@ -2,22 +2,15 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { react2angular } from 'react2angular';
-import { debounce, find } from 'lodash';
+import { find } from 'lodash';
 import Input from 'antd/lib/input';
 import Select from 'antd/lib/select';
 import { Query } from '@/services/query';
 import notification from '@/services/notification';
 import { QueryTagsControl } from '@/components/tags-control/TagsControl';
+import useSearchResults from '@/lib/hooks/useSearchResults';
 
-const SEARCH_DEBOUNCE_DURATION = 200;
 const { Option } = Select;
-
-class StaleSearchError extends Error {
-  constructor() {
-    super('stale search');
-  }
-}
-
 function search(term) {
   // get recent
   if (!term) {
@@ -34,61 +27,23 @@ function search(term) {
 }
 
 export function QuerySelector(props) {
-  const [searchTerm, setSearchTerm] = useState();
-  const [searching, setSearching] = useState();
-  const [searchResults, setSearchResults] = useState([]);
+  const [searchTerm, setSearchTerm] = useState('');
   const [selectedQuery, setSelectedQuery] = useState();
+  const [doSearch, searchResults, searching] = useSearchResults(search, { initialResults: [] });
 
-  let isStaleSearch = false;
-  const debouncedSearch = debounce(_search, SEARCH_DEBOUNCE_DURATION);
   const placeholder = 'Search a query by name';
   const clearIcon = <i className="fa fa-times hide-in-percy" onClick={() => selectQuery(null)} />;
   const spinIcon = <i className={cx('fa fa-spinner fa-pulse hide-in-percy', { hidden: !searching })} />;
 
+  useEffect(() => { doSearch(searchTerm); }, [doSearch, searchTerm]);
+
   // set selected from prop
   useEffect(() => {
     if (props.selectedQuery) {
       setSelectedQuery(props.selectedQuery);
     }
   }, [props.selectedQuery]);
 
-  // on search term changed, debounced
-  useEffect(() => {
-    // clear results, no search
-    if (searchTerm === null) {
-      setSearchResults(null);
-      return () => {};
-    }
-
-    // search
-    debouncedSearch(searchTerm);
-    return () => {
-      debouncedSearch.cancel();
-      isStaleSearch = true;
-    };
-  }, [searchTerm]);
-
-  function _search(term) {
-    setSearching(true);
-    search(term)
-      .then(rejectStale)
-      .then((results) => {
-        setSearchResults(results);
-        setSearching(false);
-      })
-      .catch((err) => {
-        if (!(err instanceof StaleSearchError)) {
-          setSearching(false);
-        }
-      });
-  }
-
-  function rejectStale(results) {
-    return isStaleSearch
-      ? Promise.reject(new StaleSearchError())
-      : Promise.resolve(results);
-  }
-
   function selectQuery(queryId) {
     let query = null;
     if (queryId) {

client/app/components/app-header/components/FavoritesDropdown.jsx

@@ -27,7 +27,9 @@ export default function FavoritesDropdown({ fetch, urlTemplate }) {
   }, [fetch]);
 
   // fetch items on init
-  useEffect(() => fetchItems(false), [fetchItems]);
+  useEffect(() => {
+    fetchItems(false);
+  }, [fetchItems]);
 
   // fetch items on click
   const onVisibleChange = visible => visible && fetchItems();

client/app/lib/hooks/useQueryResult.js

@@ -11,8 +11,8 @@ function getQueryResultData(queryResult) {
 
 export default function useQueryResult(queryResult) {
   const [data, setData] = useState(getQueryResultData(queryResult));
-  let isCancelled = false;
   useEffect(() => {
+    let isCancelled = false;
     if (queryResult) {
       queryResult.toPromise()
         .then(() => {

client/app/lib/hooks/useSearchResults.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
 
 export default function useSearchResults(
@@ -7,17 +7,16 @@ export default function useSearchResults(
 ) {
   const [result, setResult] = useState(initialResults);
   const [isLoading, setIsLoading] = useState(false);
-
-  let currentSearchTerm = null;
-  let isDestroyed = false;
+  const currentSearchTerm = useRef(null);
+  const isDestroyed = useRef(false);
 
   const [doSearch] = useDebouncedCallback((searchTerm) => {
     setIsLoading(true);
-    currentSearchTerm = searchTerm;
+    currentSearchTerm.current = searchTerm;
     fetch(searchTerm)
       .catch(() => null)
       .then((data) => {
-        if ((searchTerm === currentSearchTerm) && !isDestroyed) {
+        if ((searchTerm === currentSearchTerm.current) && !isDestroyed.current) {
           setResult(data);
           setIsLoading(false);
         }
@@ -26,7 +25,7 @@ export default function useSearchResults(
 
   useEffect(() => (
     // ignore all requests after component destruction
-    () => { isDestroyed = true; }
+    () => { isDestroyed.current = true; }
   ), []);
 
   return [doSearch, result, isLoading];

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, options]);
+  }, [map, geoJson, data, optionsWithoutBounds]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     if (map) {

client/app/visualizations/funnel/Renderer/index.jsx

@@ -16,7 +16,8 @@ function generateRowKeyPrefix() {
 
 export default function Renderer({ data, options }) {
   const funnelData = useMemo(() => prepareData(data.rows, options), [data, options]);
-  const rowKeyPrefix = useMemo(() => generateRowKeyPrefix(), []);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const rowKeyPrefix = useMemo(() => generateRowKeyPrefix(), [funnelData]);
 
   const formatValue = useMemo(() => createNumberFormatter(options.numberFormat), [options.numberFormat]);