refactor: move sortByMode to utils

src/pages/components/utils/index.ts

@@ -22,6 +22,10 @@ export const bySeverityHandler = (a: HourlyData, b: HourlyData) => {
   return b.planned_rides - a.planned_rides
 }
 
+export const sortByMode = (hourlyData: HourlyData[] = [], sortingMode: string) => {
+  return hourlyData.toSorted(sortingMode === 'hour' ? byHourHandler : bySeverityHandler)
+}
+
 export const mapColorByExecution = (planned: number, actual: number) => {
   const misses = planned - actual
   const percentageMisses = (misses / planned) * 100

src/pages/useGapsList.ts

@@ -2,32 +2,24 @@ import { useEffect, useState } from 'react'
 import { Moment } from 'moment'
 import { getGapsAsync } from '../api/gapsService'
 
-import { HourlyData, byHourHandler, bySeverityHandler } from './components/utils'
+import { sortByMode, HourlyData } from './components/utils'
+import { GapsList } from 'src/model/gaps'
 
 export const useGapsList = (
   fromDate: Moment,
   toDate: Moment,
   operatorRef: string,
   lineRef: number,
   sortingMode: string,
-) => {
+): HourlyData[] => {
   const [hourlyData, setHourlyData] = useState<HourlyData[]>([])
 
-  const sortData = (hourlyData: HourlyData[] = [], sortingMode: string) => {
-    const orderedData = [...hourlyData]
-    if (sortingMode === 'hour') {
-      orderedData.sort(byHourHandler)
-    } else if (sortingMode === 'severity') {
-      orderedData.sort(bySeverityHandler)
-    }
-    return orderedData
-  }
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const gapsList = await getGapsAsync(fromDate, toDate, operatorRef, lineRef)
+        const gapsList: GapsList = await getGapsAsync(fromDate, toDate, operatorRef, lineRef)
 
-        // Convert gapsList data into hourly mapping as needed
+        // Convert gapsList data to hourly mapping structure, where hour is a key
         const hourlyMapping: Record<string, { planned_rides: number; actual_rides: number }> = {}
 
         for (const ride of gapsList) {
@@ -50,11 +42,9 @@ export const useGapsList = (
           planned_hour: hour,
           actual_rides: data.actual_rides,
           planned_rides: data.planned_rides,
-        }))
-
-        const orderedData = sortData(result, sortingMode)
+        })) 
 
-        setHourlyData(orderedData)
+        setHourlyData(sortByMode(result, sortingMode))
       } catch (error) {
         console.error('Error fetching data:', error)
       }