refactor: improve convert structure logic

hasadna · Oct 15, 2023 · 1629d85 · 1629d85
1 parent 2086b16
commit 1629d85
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 24 deletions.
diff --git a/src/api/groupByService.ts b/src/api/groupByService.ts
@@ -48,6 +48,21 @@ export type GroupByResponse = {
   route_long_name: string
 }[]
 
+export type GroupByRes = Replace<
+  GroupByResponse[0],
+  'operator_ref',
+  | {
+      agency_id: string
+      agency_name: string
+      agency_url: string
+      agency_timezone: string
+      agency_lang: string
+      agency_phone: string
+      agency_fare_url: string
+    }
+  | undefined
+>
+
 async function groupbyAsync({
   dateTo,
   dateFrom,

diff --git a/src/pages/dashboard/DashboardPage.tsx b/src/pages/dashboard/DashboardPage.tsx
@@ -1,5 +1,5 @@
 import React, { Fragment, useState } from 'react'
-import { useGroupBy } from 'src/api/groupByService'
+import { GroupByRes, useGroupBy } from 'src/api/groupByService'
 import { PageContainer } from '../components/PageContainer'
 import OperatorHbarChart from './OperatorHbarChart/OperatorHbarChart'
 import './DashboardPage.scss'
@@ -15,43 +15,45 @@ import { useDate } from '../components/DateTimePicker'
 import { Skeleton } from 'antd'
 const now = moment()
 
+const convertToChartCompatibleStruct = (arr: GroupByRes[]) => {
+  return arr.map((item: GroupByRes) => ({
+    id: item.operator_ref?.agency_id || 'Unknown',
+    name: item.operator_ref?.agency_name || 'Unknown',
+    total: item.total_planned_rides,
+    actual: item.total_actual_rides,
+  }))
+}
+const convertToWorstLineChartCompatibleStruct = (arr: GroupByRes[], operatorId: number) => {
+  return arr
+    ?.filter((row) => +row.operator_ref?.agency_id! === operatorId || !Number(operatorId))
+    ?.map((item: GroupByRes) => ({
+      id: `${item.line_ref}|${item.operator_ref?.agency_id}` || 'Unknown',
+      operator_name: item.operator_ref?.agency_name || 'Unknown',
+      short_name: JSON.parse(item.route_short_name)[0],
+      long_name: item.route_long_name,
+      total: item.total_planned_rides,
+      actual: item.total_actual_rides,
+    })) || []
+}
+
 const DashboardPage = () => {
   const [startDate, setStartDate] = useDate(now.clone().subtract(7, 'days'))
   const [endDate, setEndDate] = useDate(now.clone().subtract(1, 'day'))
   const [groupByHour, setGroupByHour] = React.useState<boolean>(false)
 
   const [operatorId, setOperatorId] = useState('')
-  const [groupByOperatorData_, groupByOperatorLoading] = useGroupBy({
+  const [groupByOperatorData, groupByOperatorLoading] = useGroupBy({
     dateTo: endDate,
     dateFrom: startDate,
     groupBy: 'operator_ref',
   })
-  //covert to Operator data to proper structure
-  const groupByOperatorData = groupByOperatorData_.map((item) => ({
-    id: item.operator_ref?.agency_id || 'Unknown',
-    name: item.operator_ref?.agency_name || 'Unknown',
-    total: item.total_planned_rides,
-    actual: item.total_actual_rides,
-  }))
 
-  const [groupByLineData_, lineDataLoading] = useGroupBy({
+  const [groupByLineData, lineDataLoading] = useGroupBy({
     dateTo: endDate,
     dateFrom: startDate,
     groupBy: 'operator_ref,line_ref',
   })
 
-  // covert LineDaata to proper structure
-  const groupByLineData = groupByLineData_
-    ?.filter((row) => row.operator_ref?.agency_id == operatorId || !Number(operatorId))
-    .map((item) => ({
-      id: `${item.line_ref}|${item.operator_ref?.agency_id}` || 'Unknown',
-      operator_name: item.operator_ref?.agency_name || 'Unknown',
-      short_name: JSON.parse(item.route_short_name)[0],
-      long_name: item.route_long_name,
-      total: item.total_planned_rides,
-      actual: item.total_actual_rides,
-    }))
-
   const [graphData_, loadingGrap] = useGroupBy({
     dateTo: endDate,
     dateFrom: startDate,
@@ -107,7 +109,7 @@ const DashboardPage = () => {
           {groupByOperatorLoading ? (
             <Skeleton active />
           ) : (
-            <OperatorHbarChart operators={groupByOperatorData} />
+            <OperatorHbarChart operators={convertToChartCompatibleStruct(groupByOperatorData)} />
           )}
         </div>
         <div className="widget">
@@ -116,7 +118,7 @@ const DashboardPage = () => {
             <Skeleton active />
           ) : (
             <LinesHbarChart
-              lines={groupByLineData}
+              lines={convertToWorstLineChartCompatibleStruct(groupByLineData, operatorId)}
               operators_whitelist={['אלקטרה אפיקים', 'דן', 'מטרופולין', 'קווים', 'אגד']}
             />
           )}