fix: cancel request when input get clear

src/api/gapsService.ts

@@ -1,6 +1,6 @@
 import moment, { Moment } from 'moment-timezone'
 import { GapsList } from '../model/gaps'
-import axios from 'axios'
+import axios, { CancelTokenSource } from 'axios'
 import { BASE_PATH } from './apiConfig'
 
 type RawGapsList = {
@@ -28,6 +28,7 @@ export const getGapsAsync = async (
   toTimestamp: Moment,
   operatorId: string,
   lineRef: number,
+  token: CancelTokenSource['token'],
 ): Promise<GapsList> => {
   const fromDay = moment(fromTimestamp).startOf('day')
   const toDay = moment(toTimestamp).startOf('day')
@@ -42,6 +43,7 @@ export const getGapsAsync = async (
             operator_ref: operatorId,
             line_ref: lineRef,
           },
+          cancelToken: token,
         })
       ).data
     : EXAMPLE_DATA

src/api/gtfsService.ts

@@ -15,14 +15,18 @@ export async function getRoutesAsync(
   toTimestamp: moment.Moment,
   operatorId: string | undefined,
   lineNumber: string | undefined,
+  signal?: AbortSignal | undefined,
 ): Promise<BusRoute[]> {
-  const gtfsRoutes = await GTFS_API.gtfsRoutesListGet({
-    routeShortName: lineNumber,
-    operatorRefs: operatorId,
-    dateFrom: fromTimestamp.startOf('day').toDate(),
-    dateTo: moment.min(toTimestamp.endOf('day'), moment()).toDate(),
-    limit: 100,
-  })
+  const gtfsRoutes = await GTFS_API.gtfsRoutesListGet(
+    {
+      routeShortName: lineNumber,
+      operatorRefs: operatorId,
+      dateFrom: fromTimestamp.startOf('day').toDate(),
+      dateTo: moment.min(toTimestamp.endOf('day'), moment()).toDate(),
+      limit: 100,
+    },
+    { signal },
+  )
   const routes = Object.values(
     gtfsRoutes
       .filter((route) => route.date.getDate() === toTimestamp.date())

src/pages/TimelinePage.tsx

@@ -61,18 +61,22 @@ const TimelinePage = () => {
   }, [clearRoutes, operatorId, lineNumber])
 
   useEffect(() => {
+    const controller = new AbortController()
+    const signal = controller.signal
     clearStops()
     if (!operatorId || operatorId === '0' || !lineNumber) {
       return
     }
     setRoutesIsLoading(true)
-    getRoutesAsync(moment(timestamp), moment(timestamp), operatorId, lineNumber)
+    getRoutesAsync(moment(timestamp), moment(timestamp), operatorId, lineNumber, signal)
       .then((routes) =>
         setSearch((current) =>
           search.lineNumber === lineNumber ? { ...current, routes: routes } : current,
         ),
       )
+      .catch((err) => console.error(err.message))
       .finally(() => setRoutesIsLoading(false))
+    return () => controller.abort()
   }, [operatorId, lineNumber, clearRoutes, clearStops, timestamp, setState])
 
   const selectedRoute = useMemo(

src/pages/gaps/index.tsx

@@ -20,6 +20,7 @@ import { FormControlLabel, Switch } from '@mui/material'
 import Grid from '@mui/material/Unstable_Grid2' // Grid version 2
 import { INPUT_SIZE } from 'src/resources/sizes'
 import DisplayGapsPercentage from '../components/DisplayGapsPercentage'
+import axios from 'axios'
 
 const Cell = styled.div`
   width: 120px;
@@ -34,7 +35,6 @@ const GapsPage = () => {
   const { search, setSearch } = useContext(SearchContext)
   const { operatorId, lineNumber, timestamp, routes, routeKey } = search
   const [gaps, setGaps] = useState<GapsList>()
-
   const [routesIsLoading, setRoutesIsLoading] = useState(false)
   const [gapsIsLoading, setGapsIsLoading] = useState(false)
   const [onlyGapped, setOnlyGapped] = useSessionStorage('onlyGapped', false)
@@ -66,19 +66,29 @@ const GapsPage = () => {
   }
 
   useEffect(() => {
+    const source = axios.CancelToken.source()
     if (operatorId && routes && routeKey && timestamp) {
       const selectedRoute = routes.find((route) => route.key === routeKey)
       if (!selectedRoute) {
         return
       }
       setGapsIsLoading(true)
-      getGapsAsync(moment(timestamp), moment(timestamp), operatorId, selectedRoute.lineRef)
+      getGapsAsync(
+        moment(timestamp),
+        moment(timestamp),
+        operatorId,
+        selectedRoute.lineRef,
+        source.token,
+      )
         .then(setGaps)
         .finally(() => setGapsIsLoading(false))
     }
+    return () => source.cancel()
   }, [operatorId, routeKey, timestamp])
 
   useEffect(() => {
+    const controller = new AbortController()
+    const signal = controller.signal
     if (!operatorId || operatorId === '0' || !lineNumber) {
       setSearch((current) => ({
         ...current,
@@ -87,13 +97,16 @@ const GapsPage = () => {
       }))
       return
     }
-    getRoutesAsync(moment(timestamp), moment(timestamp), operatorId, lineNumber)
+    setRoutesIsLoading(true)
+    getRoutesAsync(moment(timestamp), moment(timestamp), operatorId, lineNumber, signal)
       .then((routes) =>
         setSearch((current) =>
           search.lineNumber === lineNumber ? { ...current, routes: routes } : current,
         ),
       )
+      .catch((err) => console.error(err.message))
       .finally(() => setRoutesIsLoading(false))
+    return () => controller.abort()
   }, [operatorId, lineNumber, timestamp, setSearch])
 
   const gapsPercentage = getGapsPercentage(gaps)

src/pages/gapsPatterns/GapsPatternsPage.tsx

@@ -150,24 +150,28 @@ const GapsPatternsPage = () => {
   const [routesIsLoading, setRoutesIsLoading] = useState(false)
   const { t } = useTranslation()
 
-  const loadSearchData = async () => {
+  const loadSearchData = async (signal: AbortSignal | undefined) => {
     setRoutesIsLoading(true)
     const routes = await getRoutesAsync(
       moment(startDate),
       moment(endDate),
       operatorId as string,
       lineNumber as string,
+      signal,
     )
     setSearch((current) => (search.lineNumber === lineNumber ? { ...current, routes } : current))
     setRoutesIsLoading(false)
   }
 
   useEffect(() => {
+    const controller = new AbortController()
+    const signal = controller.signal
     if (!operatorId || operatorId === '0' || !lineNumber) {
       setSearch((current) => ({ ...current, routeKey: undefined, routes: undefined }))
       return
     }
-    loadSearchData()
+    loadSearchData(signal)
+    return () => controller.abort()
   }, [operatorId, lineNumber, endDate, startDate, setSearch])
 
   return (

src/pages/gapsPatterns/useGapsList.ts

@@ -4,6 +4,7 @@ import { getGapsAsync } from '../../api/gapsService'
 
 import { sortByMode, HourlyData } from '../components/utils'
 import { GapsList } from 'src/model/gaps'
+import axios from 'axios'
 
 type HourlyDataList = HourlyData[]
 // Convert gapsList into HourlyDataList structure
@@ -44,11 +45,19 @@ export const useGapsList = (
   const [hourlyData, setHourlyData] = useState<HourlyData[]>([])
 
   useEffect(() => {
+    const source = axios.CancelToken.source()
     const fetchData = async () => {
       try {
-        const gapsList: GapsList = await getGapsAsync(fromDate, toDate, operatorRef, lineRef)
+        const gapsList: GapsList = await getGapsAsync(
+          fromDate,
+          toDate,
+          operatorRef,
+          lineRef,
+          source.token,
+        )
         const result = convertGapsToHourlyStruct(gapsList)
         setHourlyData(sortByMode(result, sortingMode))
+        return () => source.cancel()
       } catch (error) {
         console.error('Error fetching data:', error)
       }

src/pages/singleLineMap/index.tsx

@@ -49,15 +49,19 @@ const SingleLineMapPage = () => {
   }, [])
 
   useEffect(() => {
+    const controller = new AbortController()
+    const signal = controller.signal
     if (!operatorId || operatorId === '0' || !lineNumber) {
       setSearch((current) => ({ ...current, routes: undefined, routeKey: undefined }))
       return
     }
-    getRoutesAsync(moment(timestamp), moment(timestamp), operatorId, lineNumber).then((routes) =>
-      setSearch((current) =>
-        search.lineNumber === lineNumber ? { ...current, routes: routes } : current,
-      ),
+    getRoutesAsync(moment(timestamp), moment(timestamp), operatorId, lineNumber, signal).then(
+      (routes) =>
+        setSearch((current) =>
+          search.lineNumber === lineNumber ? { ...current, routes: routes } : current,
+        ),
     )
+    return () => controller.abort()
   }, [operatorId, lineNumber, timestamp])
 
   const selectedRoute = useMemo(