move logic to useGapsLsit hook

hasadna · Oct 9, 2023 · a14b113 · a14b113
1 parent b528a26
commit a14b113
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 59 deletions.
diff --git a/src/pages/GapsPatternsPage.tsx b/src/pages/GapsPatternsPage.tsx
@@ -1,6 +1,5 @@
 import React, { useContext, useEffect, useState } from 'react'
 import './GapsPatternsPage.scss'
-import { getGapsAsync } from '../api/gapsService'
 import { Moment } from 'moment'
 import { DatePicker, Spin } from 'antd'
 import moment from 'moment/moment'
@@ -33,6 +32,7 @@ import {
   bySeverityHandler,
   mapColorByExecution,
 } from './components/utils'
+import { useGapsList } from './useGapsList'
 
 // Define prop types for the component
 interface BusLineStatisticsProps {
@@ -60,70 +60,15 @@ const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => {
 }
 
 function GapsByHour({ lineRef, operatorRef, fromDate, toDate }: BusLineStatisticsProps) {
-  const [hourlyData, setHourlyData] = useState<HourlyData[]>([])
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const gapsList = await getGapsAsync(fromDate, toDate, operatorRef, lineRef)
-
-        // Convert gapsList data into hourly mapping as needed
-        const hourlyMapping: Record<string, { planned_rides: number; actual_rides: number }> = {}
-
-        for (const ride of gapsList) {
-          if (ride.gtfsTime === null) {
-            continue
-          }
-          const plannedHour = ride.gtfsTime.format('HH:mm')
-
-          if (!hourlyMapping[plannedHour]) {
-            hourlyMapping[plannedHour] = { planned_rides: 0, actual_rides: 0 }
-          }
-
-          hourlyMapping[plannedHour].planned_rides += 1
-          if (ride.siriTime) {
-            hourlyMapping[plannedHour].actual_rides += 1
-          }
-        }
-
-        const result: HourlyData[] = Object.entries(hourlyMapping).map(([hour, data]) => ({
-          planned_hour: hour,
-          actual_rides: data.actual_rides,
-          planned_rides: data.planned_rides,
-        }))
-
-        result.sort((a, b) => a.planned_hour.localeCompare(b.planned_hour))
-        setHourlyData(result)
-        sortData(result)
-      } catch (error) {
-        console.error('Error fetching data:', error)
-      }
-    }
+  const [sortingMode, setSortingMode] = useState<'hour' | 'severity'>('hour')
 
-    fetchData()
-  }, [lineRef, operatorRef, fromDate, toDate])
+  const hourlyData = useGapsList(fromDate, toDate, operatorRef, lineRef, sortingMode)
 
   const maxHourlyRides = Math.max(
     ...hourlyData.map((entry) => entry.planned_rides),
     ...hourlyData.map((entry) => entry.actual_rides),
   )
 
-  const [sortingMode, setSortingMode] = useState<'hour' | 'severity'>('hour')
-
-  const sortData = (hourlyData: HourlyData[] = []) => {
-    const orderedData = [...hourlyData]
-    if (sortingMode === 'hour') {
-      orderedData.sort(byHourHandler)
-    } else if (sortingMode === 'severity') {
-      orderedData.sort(bySeverityHandler)
-    }
-    setHourlyData(orderedData)
-  }
-
-  useEffect(() => {
-    sortData(hourlyData)
-  }, [sortingMode])
-
   return (
     <div>
       <div>
@@ -257,7 +202,8 @@ const GapsPatternsPage = () => {
         lineRef={routes?.find((route) => route.key === routeKey)?.lineRef || 0}
         operatorRef={operatorId || ''}
         fromDate={startDate}
-        toDate={endDate}></GapsByHour>
+        toDate={endDate}
+      />
     </PageContainer>
   )
 }

diff --git a/src/pages/useGapsList.ts b/src/pages/useGapsList.ts
@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react'
+import { Moment } from 'moment'
+import { getGapsAsync } from '../api/gapsService'
+
+import { HourlyData, byHourHandler, bySeverityHandler } from './components/utils'
+
+export const useGapsList = (
+  fromDate: Moment,
+  toDate: Moment,
+  operatorRef: string,
+  lineRef: number,
+  sortingMode: string,
+) => {
+  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)
+
+        // Convert gapsList data into hourly mapping as needed
+        const hourlyMapping: Record<string, { planned_rides: number; actual_rides: number }> = {}
+
+        for (const ride of gapsList) {
+          if (ride.gtfsTime === null) {
+            continue
+          }
+          const plannedHour = ride.gtfsTime.format('HH:mm')
+
+          if (!hourlyMapping[plannedHour]) {
+            hourlyMapping[plannedHour] = { planned_rides: 0, actual_rides: 0 }
+          }
+
+          hourlyMapping[plannedHour].planned_rides += 1
+          if (ride.siriTime) {
+            hourlyMapping[plannedHour].actual_rides += 1
+          }
+        }
+
+        const result: HourlyData[] = Object.entries(hourlyMapping).map(([hour, data]) => ({
+          planned_hour: hour,
+          actual_rides: data.actual_rides,
+          planned_rides: data.planned_rides,
+        }))
+
+        const orderedData = sortData(result, sortingMode)
+
+        setHourlyData(orderedData)
+      } catch (error) {
+        console.error('Error fetching data:', error)
+      }
+    }
+
+    fetchData()
+  }, [lineRef, operatorRef, fromDate, toDate, sortingMode])
+  return hourlyData
+}