fix infinite API calls

air-quality-ui/src/components/header/Toolbar.spec.tsx

@@ -8,21 +8,24 @@ import {
   ForecastWindowSelectorProps,
 } from './ForecastWindowSelector'
 import { Toolbar } from './Toolbar'
+import { SetForcastDetailsType } from '../../context'
 
-const mockSetForecastBaseDate: (val: DateTime) => void = jest.fn()
-const mockSetMaxForecastDate: (val: number) => void = jest.fn()
-const mockSetMaxInSituDate: (val: number) => void = jest.fn()
+const mockSetDetails: (val: SetForcastDetailsType) => void = jest.fn()
 
 const dateNow = DateTime.fromISO('2024-06-01T12:00:00', { zone: 'UTC' })
 Settings.now = () => dateNow.toMillis()
 
 jest.mock('../../context', () => ({
   useForecastContext: jest.fn().mockReturnValue({
-    forecastBaseDate: DateTime.fromISO('2024-06-01T12:00:00', { zone: 'UTC' }),
-    maxInSituDate: DateTime.fromISO('2024-06-10T09:00:00', { zone: 'utc' }),
-    setForecastBaseDate: (x: DateTime) => mockSetForecastBaseDate(x),
-    setMaxForecastDate: (x: number) => mockSetMaxForecastDate(x),
-    setMaxInSituDate: (x: number) => mockSetMaxInSituDate(x),
+    forecastDetails: {
+      forecastBaseDate: DateTime.fromISO('2024-06-01T12:00:00', {
+        zone: 'UTC',
+      }),
+      maxMeasurementDate: DateTime.fromISO('2024-06-10T09:00:00', {
+        zone: 'utc',
+      }),
+    },
+    setDetails: (x: SetForcastDetailsType) => mockSetDetails(x),
   }),
 }))
 
@@ -58,6 +61,9 @@ jest.mock('./ForecastWindowSelector', () => ({
 }))
 
 describe('Toolbar component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
   it('renders toolbar', () => {
     render(<Toolbar />)
     expect(screen.getByRole('toolbar')).toBeInTheDocument()
@@ -85,9 +91,12 @@ describe('Toolbar component', () => {
     })
     fireEvent.click(screen.getByText('Ok'))
     await waitFor(() => {
-      expect(mockSetForecastBaseDate).toHaveBeenCalledWith(
-        DateTime.fromISO('2024-06-10T09:00:00', { zone: 'utc' }),
-      )
+      expect(mockSetDetails).toHaveBeenCalledWith({
+        forecastBaseDate: DateTime.fromISO('2024-06-10T09:00:00', {
+          zone: 'utc',
+        }),
+        forecastWindow: 1,
+      })
     })
   })
   it('Setting invalid date and clicking button does not update context', async () => {
@@ -102,7 +111,7 @@ describe('Toolbar component', () => {
     })
     fireEvent.click(screen.getByText('Ok'))
     await waitFor(() => {
-      expect(mockSetForecastBaseDate).not.toHaveBeenCalledWith(
+      expect(mockSetDetails).not.toHaveBeenCalledWith(
         DateTime.fromISO('2024-08-10T09:00:00', { zone: 'utc' }),
       )
     })
@@ -130,7 +139,7 @@ describe('Toolbar component', () => {
       expected: 5,
     },
   ].forEach(({ testData, expected }) => {
-    it(`When forecast window selector is changed to ${testData}, when the ok button is clicked, selectedForecastWindow is ${expected}`, async () => {
+    it(`When forecast window selector is changed to ${testData.label}, when the ok button is clicked, selectedForecastWindow is ${expected}`, async () => {
       render(<Toolbar />)
       const beforeSetting = selectedForecastWindow
       await waitFor(() => {
@@ -140,8 +149,14 @@ describe('Toolbar component', () => {
       await waitFor(() => {
         expect(beforeSetting).toStrictEqual({ value: 1, label: '1' })
       })
+      const expects = {
+        forecastBaseDate: DateTime.fromISO('2024-06-01T12:00:00', {
+          zone: 'utc',
+        }),
+        forecastWindow: expected,
+      }
       await waitFor(() => {
-        expect(mockSetMaxForecastDate).toHaveBeenCalledWith(expected)
+        expect(mockSetDetails).toHaveBeenCalledWith(expects)
       })
     })
   })

air-quality-ui/src/components/header/Toolbar.tsx

@@ -12,14 +12,11 @@ import { useForecastContext } from '../../context'
 import { VAirifyButton } from '../common/button/VAirifyButton'
 
 export const Toolbar = () => {
-  const {
-    forecastBaseDate,
-    setForecastBaseDate,
-    setMaxForecastDate,
-    setMaxInSituDate,
-  } = useForecastContext()
-  const [selectedForecastBaseDate, setSelectedForecastBaseDate] =
-    useState<DateTime<boolean>>(forecastBaseDate)
+  const { forecastDetails, setDetails } = useForecastContext()
+
+  const [selectedForecastBaseDate, setSelectedForecastBaseDate] = useState<
+    DateTime<boolean>
+  >(forecastDetails.forecastBaseDate)
   const [selectedForecastWindow, setSelectedForecastWindow] =
     useState<ForecastWindowOption>({ value: 1, label: '1' })
   const [isInvalidDateTime, setIsInvalidDateTime] = useState<boolean>(false)
@@ -37,7 +34,7 @@ export const Toolbar = () => {
         <ForecastBaseDatePicker
           setSelectedForecastBaseDate={setSelectedForecastBaseDate}
           setIsInvalidDateTime={setIsInvalidDateTime}
-          forecastBaseDate={forecastBaseDate}
+          forecastBaseDate={forecastDetails.forecastBaseDate}
         />
       </div>
       <div className={classes['forecast-window-main-div']}>
@@ -50,10 +47,11 @@ export const Toolbar = () => {
         <VAirifyButton
           onClick={() => {
             if (selectedForecastBaseDate) {
-              setForecastBaseDate(selectedForecastBaseDate)
+              setDetails({
+                forecastBaseDate: selectedForecastBaseDate,
+                forecastWindow: selectedForecastWindow.value,
+              })
             }
-            setMaxForecastDate(selectedForecastWindow.value)
-            setMaxInSituDate(selectedForecastWindow.value)
           }}
           text={'Ok'}
           isButtonDisabled={isInvalidDateTime}

air-quality-ui/src/components/single-city/SingleCity.spec.tsx

@@ -16,9 +16,11 @@ jest.mock('@tanstack/react-query', () => ({
 
 jest.mock('../../context', () => ({
   useForecastContext: jest.fn().mockReturnValue({
-    forecastBaseDate: DateTime.now(),
-    maxInSituDate: DateTime.now(),
-    maxForecastDate: DateTime.now(),
+    forecastDetails: {
+      forecastBaseDate: DateTime.now(),
+      maxMeasurementDate: DateTime.now(),
+      maxForecastDate: DateTime.now(),
+    },
   }),
 }))
 

air-quality-ui/src/components/single-city/SingleCity.tsx

@@ -25,8 +25,8 @@ const getSiteName = (measurement: MeasurementsResponseDto): string => {
 }
 
 export const SingleCity = () => {
-  const { forecastBaseDate, maxInSituDate, maxForecastDate } =
-    useForecastContext()
+  const { forecastDetails } = useForecastContext()
+
   const { name: locationName = '' } = useParams()
   const [
     {
@@ -43,31 +43,34 @@ export const SingleCity = () => {
     queries: [
       {
         queryKey: [
-          forecastBaseDate,
+          forecastDetails.forecastBaseDate,
           locationName,
-          maxInSituDate,
-          maxForecastDate,
+          forecastDetails.maxMeasurementDate,
+          forecastDetails.maxForecastDate,
         ],
         queryFn: () =>
           getForecastData(
-            forecastBaseDate,
-            maxForecastDate,
-            forecastBaseDate,
+            forecastDetails.forecastBaseDate,
+            forecastDetails.maxForecastDate,
+            forecastDetails.forecastBaseDate,
             locationName,
           ),
       },
       {
         queryKey: [
           'measurements',
           locationName,
-          forecastBaseDate,
-          maxInSituDate,
-          maxForecastDate,
+          forecastDetails.forecastBaseDate,
+          forecastDetails.maxMeasurementDate,
+          forecastDetails.maxForecastDate,
         ],
         queryFn: () =>
-          getMeasurements(forecastBaseDate, maxInSituDate, 'city', [
-            locationName,
-          ]),
+          getMeasurements(
+            forecastDetails.forecastBaseDate,
+            forecastDetails.maxMeasurementDate,
+            'city',
+            [locationName],
+          ),
       },
     ],
   })
@@ -201,7 +204,7 @@ export const SingleCity = () => {
                 cityName={locationName}
                 forecastData={forecastData}
                 measurementsData={measurements}
-                forecastBaseTime={forecastBaseDate}
+                forecastBaseTime={forecastDetails.forecastBaseDate}
               />
             </div>
             {measurementsByPollutantBySite &&

air-quality-ui/src/components/single-city/average-comparison-chart/AverageComparisonChart.spec.tsx

@@ -12,9 +12,11 @@ jest.mock('echarts-for-react', () => () => <div>Mock Chart</div>)
 
 jest.mock('../../../context', () => ({
   useForecastContext: jest.fn().mockReturnValue({
-    forecastBaseDate: DateTime.now(),
-    maxInSituDate: DateTime.now(),
-    maxForecastDate: DateTime.now(),
+    forecastDetails: {
+      forecastBaseDate: DateTime.now(),
+      maxMeasurementDate: DateTime.now(),
+      maxForecastDate: DateTime.now(),
+    },
   }),
 }))
 

air-quality-ui/src/components/single-city/average-comparison-chart/AverageComparisonChart.tsx

@@ -30,8 +30,8 @@ export const AverageComparisonChart = (
   props: AverageComparisonChartProps,
 ): JSX.Element => {
   const chartRef = useRef<ReactECharts>(null)
-  const { forecastBaseDate, maxForecastDate, maxInSituDate } =
-    useForecastContext()
+
+  const { forecastDetails } = useForecastContext()
 
   const measurementsAveragedData = useMemo(() => {
     if (props.measurementsData) {
@@ -44,15 +44,15 @@ export const AverageComparisonChart = (
   }, [props.measurementsData, props.forecastBaseTime])
 
   const zoomPercent = getInSituPercentage(
-    forecastBaseDate,
-    maxForecastDate,
-    maxInSituDate,
+    forecastDetails.forecastBaseDate,
+    forecastDetails.maxForecastDate,
+    forecastDetails.maxMeasurementDate,
   )
 
   const zoomEventHandler = useCallback(() => {
     const instance = chartRef.current?.getEchartsInstance()
-    updateChartSubtext(instance!, forecastBaseDate)
-  }, [forecastBaseDate])
+    updateChartSubtext(instance!, forecastDetails.forecastBaseDate)
+  }, [forecastDetails])
 
   return (
     <ReactECharts
@@ -61,7 +61,11 @@ export const AverageComparisonChart = (
       onEvents={{ dataZoom: zoomEventHandler }}
       option={getForecastOptions(
         props.cityName,
-        createSubtext(forecastBaseDate, forecastBaseDate, maxInSituDate),
+        createSubtext(
+          forecastDetails.forecastBaseDate,
+          forecastDetails.forecastBaseDate,
+          forecastDetails.maxMeasurementDate,
+        ),
         zoomPercent,
         props.forecastData,
         measurementsAveragedData,

air-quality-ui/src/components/single-city/site-measurement-chart/SiteMeasurementsChart.spec.tsx

@@ -8,9 +8,11 @@ jest.mock('echarts-for-react', () => () => <div>Mock Chart</div>)
 
 jest.mock('../../../context', () => ({
   useForecastContext: jest.fn().mockReturnValue({
-    forecastBaseDate: DateTime.now(),
-    maxInSituDate: DateTime.now(),
-    maxForecastDate: DateTime.now(),
+    forecastDetails: {
+      forecastBaseDate: DateTime.now(),
+      maxMeasurementDate: DateTime.now(),
+      maxForecastDate: DateTime.now(),
+    },
   }),
 }))
 

air-quality-ui/src/components/single-city/site-measurement-chart/SiteMeasurementsChart.tsx

@@ -34,8 +34,7 @@ export const SiteMeasurementsChart = ({
 }: SiteMeasurementsChartProps): JSX.Element => {
   const chartRef = useRef<ReactECharts>(null)
 
-  const { forecastBaseDate, maxForecastDate, maxInSituDate } =
-    useForecastContext()
+  const { forecastDetails } = useForecastContext()
 
   const eChartEventHandler = useCallback(
     ({
@@ -60,15 +59,15 @@ export const SiteMeasurementsChart = ({
   )
 
   const zoomPercent = getInSituPercentage(
-    forecastBaseDate,
-    maxForecastDate,
-    maxInSituDate,
+    forecastDetails.forecastBaseDate,
+    forecastDetails.maxForecastDate,
+    forecastDetails.maxMeasurementDate,
   )
 
   const zoomEventHandler = useCallback(() => {
     const instance = chartRef.current?.getEchartsInstance()
-    updateChartSubtext(instance!, forecastBaseDate)
-  }, [forecastBaseDate])
+    updateChartSubtext(instance!, forecastDetails.forecastBaseDate)
+  }, [forecastDetails])
 
   return (
     <>
@@ -85,7 +84,11 @@ export const SiteMeasurementsChart = ({
           zoomPercent,
           measurementsBySite,
           forecastData,
-          createSubtext(forecastBaseDate, forecastBaseDate, maxInSituDate),
+          createSubtext(
+            forecastDetails.forecastBaseDate,
+            forecastDetails.forecastBaseDate,
+            forecastDetails.maxMeasurementDate,
+          ),
           cityName,
           seriesColorsBySite,
         )}

air-quality-ui/src/components/summary-view/GlobalSummary.spec.tsx

@@ -14,8 +14,11 @@ jest.mock('@tanstack/react-query', () => ({
 
 jest.mock('../../context', () => ({
   useForecastContext: jest.fn().mockReturnValue({
-    forecastBaseDate: DateTime.now(),
-    maxInSituDate: DateTime.now(),
+    forecastDetails: {
+      forecastBaseDate: DateTime.now(),
+      maxMeasurementDate: DateTime.now(),
+      maxForecastDate: DateTime.now(),
+    },
   }),
 }))