Enable ESlint rules for React Hooks

web/.eslintrc.json

@@ -16,6 +16,7 @@
     "plugin:jsx-a11y/recommended",
     "plugin:react/jsx-runtime",
     "plugin:unicorn/recommended",
+    "plugin:react-hooks/recommended",
     "plugin:react-prefer-function-component/recommended",
     "prettier"
   ],

web/src/api/getZone.ts

@@ -4,7 +4,7 @@ import { useAtom } from 'jotai';
 import invariant from 'tiny-invariant';
 import type { ZoneDetails } from 'types';
 import { TimeAverages } from 'utils/constants';
-import { getZoneFromPath } from 'utils/helpers';
+import { useGetZoneFromPath } from 'utils/helpers';
 import { timeAverageAtom } from 'utils/state/atoms';
 
 import { getBasePath, getHeaders, QUERY_KEYS } from './helpers';
@@ -36,7 +36,7 @@ const getZone = async (
 // TODO: The frontend (graphs) expects that the datetimes in state are the same as in zone
 // should we add a check for this?
 const useGetZone = (): UseQueryResult<ZoneDetails> => {
-  const zoneId = getZoneFromPath();
+  const zoneId = useGetZoneFromPath();
   const [timeAverage] = useAtom(timeAverageAtom);
   return useQuery<ZoneDetails>(
     [QUERY_KEYS.ZONE, { zone: zoneId, aggregate: timeAverage }],

web/src/components/Accordion.tsx

@@ -20,11 +20,9 @@ export default function Accordion({
   icon?: React.ReactNode;
   children?: React.ReactNode;
   title: string;
-  isCollapsedAtom?: PrimitiveAtom<boolean>;
+  isCollapsedAtom: PrimitiveAtom<boolean>;
 }) {
-  const [collapsedAtom, setCollapsedAtom] = isCollapsedAtom
-    ? useAtom(isCollapsedAtom)
-    : [null, null];
+  const [collapsedAtom, setCollapsedAtom] = useAtom(isCollapsedAtom);
   const [isCollapsed, setIsCollapsed] = useState(isCollapsedDefault);
 
   useEffect(() => {

web/src/components/LoadingOverlay.tsx

@@ -31,7 +31,7 @@ function FadingOverlay({ isVisible }: { isVisible: boolean }) {
       clearTimeout(timeoutId);
       setShowButton(false);
     };
-  }, [isVisible]);
+  }, [isVisible, showButton]);
 
   return transitions(
     (styles, isVisible) =>

web/src/components/TimeSlider.tsx

@@ -4,7 +4,7 @@ import { useNightTimes } from 'hooks/nightTimes';
 import { useDarkMode } from 'hooks/theme';
 import { useAtom } from 'jotai/react';
 import { TimeAverages } from 'utils/constants';
-import { getZoneFromPath } from 'utils/helpers';
+import { useGetZoneFromPath } from 'utils/helpers';
 import { timeAverageAtom } from 'utils/state/atoms';
 
 type NightTimeSet = number[];
@@ -137,7 +137,7 @@ export function TimeSliderWithNight(props: TimeSliderProps) {
 }
 
 function TimeSlider(props: TimeSliderProps) {
-  const zoneId = getZoneFromPath();
+  const zoneId = useGetZoneFromPath();
   const [timeAverage] = useAtom(timeAverageAtom);
   const showNightTime = zoneId && timeAverage === TimeAverages.HOURLY;
 

web/src/components/tooltips/TooltipWrapper.tsx

@@ -21,10 +21,11 @@ export default function TooltipWrapper({
   tooltipClassName,
   isMobile,
 }: TooltipWrapperProperties): ReactElement {
+  const [isOpen, setIsOpen] = useState(false);
+
   if (!tooltipContent) {
     return children;
   }
-  const [isOpen, setIsOpen] = useState(false);
 
   // Helpers
   const openTooltip = () => setIsOpen(true);

web/src/features/charts/bar-breakdown/BarBreakdownEmissionsChart.tsx

@@ -7,7 +7,7 @@ import { ElectricityModeType, ZoneDetail, ZoneKey } from 'types';
 import { modeColor } from 'utils/constants';
 import { formatCo2 } from 'utils/formatting';
 
-import { LABEL_MAX_WIDTH, PADDING_X, PADDING_Y } from './constants';
+import { LABEL_MAX_WIDTH, PADDING_X } from './constants';
 import Axis from './elements/Axis';
 import HorizontalBar from './elements/HorizontalBar';
 import Row from './elements/Row';

web/src/features/charts/hooks/useNetExchangeChartData.ts

@@ -31,11 +31,13 @@ export function getFills(data: AreaGraphElement[]) {
 
 export function useNetExchangeChartData() {
   const { data: zoneData, isLoading, isError } = useGetZone();
+  const [displayByEmissions] = useAtom(displayByEmissionsAtom);
+  const [timeAggregate] = useAtom(timeAverageAtom);
+
   if (isLoading || isError) {
     return { isLoading, isError };
   }
-  const [displayByEmissions] = useAtom(displayByEmissionsAtom);
-  const [timeAggregate] = useAtom(timeAverageAtom);
+
   const { valueFactor, valueAxisLabel } = getValuesInfo(
     Object.values(zoneData.zoneStates),
     displayByEmissions,

web/src/features/charts/tooltips/NetExchangeChartTooltip.tsx

@@ -11,13 +11,14 @@ import AreaGraphToolTipHeader from './AreaGraphTooltipHeader';
 export default function NetExchangeChartTooltip({
   zoneDetail,
 }: InnerAreaGraphTooltipProps) {
-  if (!zoneDetail) {
-    return null;
-  }
   const [timeAverage] = useAtom(timeAverageAtom);
   const [displayByEmissions] = useAtom(displayByEmissionsAtom);
   const { t } = useTranslation();
 
+  if (!zoneDetail) {
+    return null;
+  }
+
   const isHourly = timeAverage === TimeAverages.HOURLY;
   const { stateDatetime } = zoneDetail;
 

web/src/features/exchanges/ExchangeArrow.tsx

@@ -26,15 +26,28 @@ function ExchangeArrow({
   isMobile,
 }: ExchangeArrowProps) {
   const { co2intensity, lonlat, netFlow, rotation, key } = data;
-  if (!lonlat) {
-    return null;
-  }
+
+  const setIsMoving = useSetAtom(mapMovingAtom);
+
+  useEffect(() => {
+    const cancelWheel = (event: Event) => event.preventDefault();
+    const exchangeLayer = document.querySelector('#exchange-layer');
+    if (!exchangeLayer) {
+      return;
+    }
+    exchangeLayer.addEventListener('wheel', cancelWheel, {
+      passive: true,
+    });
+    return () => exchangeLayer.removeEventListener('wheel', cancelWheel);
+  }, []);
 
   const absFlow = Math.abs(netFlow ?? 0);
-  // Don't render if the flow is very low ...
-  if (absFlow < 1) {
+
+  // Don't render if there is no position or if flow is very low ...
+  if (!lonlat || absFlow < 1) {
     return null;
   }
+
   const mapZoom = map.getZoom();
   const projection = map.project(lonlat);
   const transform = {
@@ -56,20 +69,6 @@ function ExchangeArrow({
     return null;
   }
 
-  const setIsMoving = useSetAtom(mapMovingAtom);
-
-  useEffect(() => {
-    const cancelWheel = (event: Event) => event.preventDefault();
-    const exchangeLayer = document.querySelector('#exchange-layer');
-    if (!exchangeLayer) {
-      return;
-    }
-    exchangeLayer.addEventListener('wheel', cancelWheel, {
-      passive: true,
-    });
-    return () => exchangeLayer.removeEventListener('wheel', cancelWheel);
-  }, []);
-
   const prefix = colorBlindMode ? 'colorblind-' : '';
   const intensity = quantizedCo2IntensityScale(co2intensity);
   const speed = quantizedExchangeSpeedScale(absFlow);

web/src/features/map/Map.tsx

@@ -145,6 +145,10 @@ export default function MapPage({ onMapLoad }: MapPageProps): ReactElement {
     isSourceLoaded,
     spatialAggregate,
     isSuccess,
+    isLoading,
+    isError,
+    worldGeometries.features,
+    theme.clickableFill,
   ]);
 
   useEffect(() => {
@@ -156,7 +160,7 @@ export default function MapPage({ onMapLoad }: MapPageProps): ReactElement {
       map.flyTo({ center: [data.callerLocation[0], data.callerLocation[1]] });
       setIsFirstLoad(false);
     }
-  }, [map, isSuccess]);
+  }, [map, isSuccess, isError, isFirstLoad, data?.callerLocation, selectedZoneId]);
 
   useEffect(() => {
     // Run when the selected zone changes
@@ -186,7 +190,15 @@ export default function MapPage({ onMapLoad }: MapPageProps): ReactElement {
         map.flyTo({ center: isMobile ? center : centerMinusLeftPanelWidth, zoom: 3.5 });
       }
     }
-  }, [map, location.pathname, isLoadingMap]);
+  }, [
+    map,
+    location.pathname,
+    isLoadingMap,
+    selectedZoneId,
+    setHoveredZone,
+    worldGeometries.features,
+    setLeftPanelOpen,
+  ]);
 
   const onClick = (event: maplibregl.MapLayerMouseEvent) => {
     if (!map || !event.features) {

web/src/features/map/MapWrapper.tsx

@@ -15,7 +15,7 @@ export default function MapWrapper() {
     if (shouldShowFallback) {
       setIsLoadingMap(false);
     }
-  }, [shouldShowFallback]);
+  }, [setIsLoadingMap, shouldShowFallback]);
 
   return (
     <>

web/src/features/panels/zone/EstimationCard.tsx

@@ -1,12 +1,14 @@
 import Accordion from 'components/Accordion';
 import Badge from 'components/Badge';
 import { useFeatureFlag } from 'features/feature-flags/api';
+import { TFunction } from 'i18next';
 import { useAtom } from 'jotai';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ZoneDetails } from 'types';
 import trackEvent from 'utils/analytics';
 import {
+  estimationCardCollapsed,
   feedbackCardCollapsedNumberAtom,
   hasEstimationFeedbackBeenSeenAtom,
 } from 'utils/state/atoms';
@@ -25,7 +27,7 @@
   estimatedPercentage?: number;
   outageMessage: ZoneDetails['zoneMessage'];
 }) {
-  const [isFeedbackCardVisibile, setIsFeedbackCardVisibile] = useState(false);
+  const [isFeedbackCardVisible, setIsFeedbackCardVisibile] = useState(false);
   const [feedbackCardCollapsedNumber, _] = useAtom(feedbackCardCollapsedNumberAtom);
   const feedbackEnabled = useFeatureFlag('feedback-estimation-labels');
   const [hasFeedbackCardBeenSeen, setHasFeedbackCardBeenSeen] = useAtom(
@@ -37,12 +39,18 @@
       feedbackEnabled &&
         showEstimationFeedbackCard(
           feedbackCardCollapsedNumber,
-          isFeedbackCardVisibile,
+          isFeedbackCardVisible,
           hasFeedbackCardBeenSeen,
           setHasFeedbackCardBeenSeen
         )
     );
-  }, [feedbackEnabled, feedbackCardCollapsedNumber]);
+  }, [
+    feedbackEnabled,
+    feedbackCardCollapsedNumber,
+    isFeedbackCardVisible,
+    hasFeedbackCardBeenSeen,
+    setHasFeedbackCardBeenSeen,
+  ]);
 
   switch (cardType) {
     case 'outage': {
@@ -55,14 +63,14 @@
       return (
         <div>
           <EstimatedCard estimationMethod={estimationMethod} />
-          {isFeedbackCardVisibile && <FeedbackCard estimationMethod={estimationMethod} />}
+          {isFeedbackCardVisible && <FeedbackCard estimationMethod={estimationMethod} />}
         </div>
       );
     }
   }
 }
 
-function getEstimationTranslation(
+function useGetEstimationTranslation(
   field: 'title' | 'pill' | 'body',
   estimationMethod?: string,
   estimatedPercentage?: number
@@ -117,13 +125,13 @@
   };
   const { t } = useTranslation();
 
-  const title = getEstimationTranslation('title', estimationMethod);
-  const pillText = getEstimationTranslation(
+  const title = useGetEstimationTranslation('title', estimationMethod);
+  const pillText = useGetEstimationTranslation(
     'pill',
     estimationMethod,
     estimatedPercentage
   );
-  const bodyText = getEstimationTranslation(
+  const bodyText = useGetEstimationTranslation(
     'body',
     estimationMethod,
     estimatedPercentage
@@ -150,6 +158,7 @@
         className={textColorTitle}
         icon={<div className={`h-[16px] w-[16px] bg-center ${icon}`} />}
         title={title}
+        isCollapsedAtom={estimationCardCollapsed}
       >
         <div className="gap-2">
           <div

web/src/features/panels/zone/FeedbackCard.tsx

@@ -1,5 +1,6 @@
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import Pill from 'components/Pill';
+import { TFunction } from 'i18next';
 import { ChangeEvent, Dispatch, SetStateAction, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { HiOutlineX } from 'react-icons/hi';
@@ -22,8 +23,8 @@
     setIsClosed(true);
   };
 
-  const title = getQuestionTranslation('title', feedbackState);
-  const subtitle = getQuestionTranslation('subtitle', feedbackState);
+  const title = useGetQuestionTranslation('title', feedbackState);
+  const subtitle = useGetQuestionTranslation('subtitle', feedbackState);
 
   if (isClosed) {
     return null;
@@ -81,9 +82,9 @@
   inputText: string;
   handleInputChange: (event: { target: { value: SetStateAction<string> } }) => void;
 }) {
-  const inputPlaceholder = getQuestionTranslation('placeholder');
-  const optional = getQuestionTranslation('optional');
-  const text = getQuestionTranslation('input-question');
+  const inputPlaceholder = useGetQuestionTranslation('placeholder');
+  const optional = useGetQuestionTranslation('optional');
+  const text = useGetQuestionTranslation('input-question');
 
   return (
     <div>
@@ -114,7 +115,7 @@
 }
 
 function SubmitButton({ handleSave }: { handleSave: () => void }) {
-  const buttonText = getQuestionTranslation('submit');
+  const buttonText = useGetQuestionTranslation('submit');
 
   return <Pill text={buttonText} onClick={handleSave} />;
 }
@@ -129,9 +130,9 @@
   estimationMethod?: string;
 }) {
   const [inputText, setInputText] = useState('');
-  const [feedbackScore, setfeedbackScore] = useState('');
+  const [feedbackScore, setFeedbackScore] = useState('');
 
-  const question = getQuestionTranslation('rate-question');
+  const question = useGetQuestionTranslation('rate-question');
 
   const handleInputChange = (event: { target: { value: SetStateAction<string> } }) => {
     setInputText(event.target.value);
@@ -160,7 +161,7 @@
       </div>
       <ActionPills
         setFeedbackState={setFeedbackState}
-        setFeedbackScore={setfeedbackScore}
+        setFeedbackScore={setFeedbackScore}
       />
       {feedbackState === FeedbackState.OPTIONAL && (
         <div>
@@ -182,9 +183,9 @@
   setFeedbackState: Dispatch<SetStateAction<FeedbackState>>;
   setFeedbackScore: Dispatch<SetStateAction<string>>;
 }) {
-  const agreeText = getQuestionTranslation('agree');
+  const agreeText = useGetQuestionTranslation('agree');
   const [pillContent] = useState(['1', '2', '3', '4', '5']);
-  const disagreeText = getQuestionTranslation('disagree');
+  const disagreeText = useGetQuestionTranslation('disagree');
   const [currentPillNumber, setPillNumber] = useState('');
 
   const handlePillClick = (identifier: string) => {
@@ -257,7 +258,7 @@
   );
 }
 
-function getQuestionTranslation(field: string, feedbackState?: FeedbackState) {
+function useGetQuestionTranslation(field: string, feedbackState?: FeedbackState) {
   const { t } = useTranslation();
   if (feedbackState != undefined) {
     if (