fix(eslint): finx eslint hooks warnings

ubilabs · Oct 28, 2019 · c1cb2a8 · c1cb2a8
1 parent f018fa5
commit c1cb2a8
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 14 deletions.
diff --git a/src/scripts/components/globes/globes.tsx b/src/scripts/components/globes/globes.tsx
@@ -7,7 +7,7 @@ import React, {
 import {useSelector, useDispatch} from 'react-redux';
 
 import {selectedLayersSelector} from '../../reducers/layers/selected';
-import {detailedLayersSelector} from '../../reducers/layers/details';
+import {activeLayersSelector} from '../../reducers/layers/details';
 import {globeViewSelector} from '../../reducers/globe/view';
 import {timeSelector} from '../../reducers/globe/time';
 import {projectionSelector} from '../../reducers/globe/projection';
@@ -24,7 +24,7 @@ const Globes: FunctionComponent = () => {
   const dispatch = useDispatch();
   const projection = useSelector(projectionSelector);
   const globalGlobeView = useSelector(globeViewSelector);
-  const detailedLayers = useSelector(detailedLayersSelector);
+  const activeLayers = useSelector(activeLayersSelector);
   const time = useSelector(timeSelector);
   const [currentView, setCurrentView] = useState(globalGlobeView);
   const [isMainActive, setIsMainActive] = useState(true);
@@ -39,16 +39,8 @@ const Globes: FunctionComponent = () => {
     [dispatch]
   );
 
-  const mainImageUrl = getLayerTileUrl(
-    selectedLayers.main,
-    detailedLayers,
-    time
-  );
-  const compareImageUrl = getLayerTileUrl(
-    selectedLayers.compare,
-    detailedLayers,
-    time
-  );
+  const mainImageUrl = getLayerTileUrl(activeLayers.main, time);
+  const compareImageUrl = getLayerTileUrl(activeLayers.compare, time);
 
   // apply changes in the app state view to our local view copy
   // we don't use the app state view all the time to keep store updates low

diff --git a/src/scripts/components/layer-loader/layer-loader.tsx b/src/scripts/components/layer-loader/layer-loader.tsx
@@ -13,7 +13,6 @@ const LayerLoader: FunctionComponent = () => {
   const dispatch = useDispatch();
   const selectedLayers = useSelector(selectedLayersSelector);
   const detailedLayers = useSelector(detailedLayersSelector);
-  const {main, compare} = selectedLayers;
 
   // load layer list on mount
   useEffect(() => {
@@ -22,6 +21,8 @@ const LayerLoader: FunctionComponent = () => {
 
   // fetch layer if it is selected and not already downloaded
   useEffect(() => {
+    const {main, compare} = selectedLayers;
+
     if (main && !detailedLayers[main]) {
       dispatch(fetchLayerAction(main));
     }

diff --git a/src/scripts/components/url-sync/url-sync.tsx b/src/scripts/components/url-sync/url-sync.tsx
@@ -22,7 +22,9 @@ const UrlSync: FunctionComponent = () => {
     const params = new URLSearchParams(location.search);
     params.set('globe', globeValue);
     history.replace({search: params.toString()});
-  }, [globeState]);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [globeState, history]); // we don't want to check for location.search changes
 
   return null;
 };