perf: reduce calls of agencyList api (#348)

reduce calls of agencyList api

src/model/operator.ts

@@ -5,22 +5,27 @@ export type Operator = {
   id: string
 }
 
-async function getOperatorId(name: string) {
+export const getRelevantOperators = async () => {
+  const relevant = [
+    'אגד',
+    'אגד תעבורה',
+    'אלקטרה אפיקים',
+    'דן',
+    'מטרופולין',
+    'נתיב אקספרס',
+    'סופרבוס',
+    'קווים',
+  ]
   const agencyList = await getAgencyList()
-  const agency = agencyList.find((agency) => agency.agency_name === name)
-  if (!agency) {
-    throw new Error(`Agency ${name} not found`)
-  }
-  return agency.operator_ref.toString()
+  const agencyMap = new Map()
+  // convert to Map
+  agencyList.forEach((obj) => {
+    agencyMap.set(obj.agency_name, obj)
+  })
+  const res = relevant.reduce((acc: Operator[], name: string): Operator[] => {
+    return agencyMap.has(name)
+      ? [...acc, { name, id: agencyMap.get(name)?.operator_ref.toString() }]
+      : acc
+  }, [])
+  return res
 }
-
-const toOperator = async (name: string): Promise<Operator> => ({
-  name,
-  id: await getOperatorId(name),
-})
-
-export const RELEVANT_OPERATORS = Promise.all(
-  ['אגד', 'אגד תעבורה', 'דן', 'נתיב אקספרס', 'מטרופולין', 'סופרבוס', 'קווים', 'אלקטרה אפיקים']
-    .sort()
-    .map(toOperator),
-)

src/pages/components/OperatorSelector.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Operator, RELEVANT_OPERATORS } from 'src/model/operator'
+import { Operator, getRelevantOperators } from 'src/model/operator'
 import { Autocomplete, TextField } from '@mui/material'
 
 type OperatorSelectorProps = {
@@ -18,7 +18,7 @@ const OperatorSelector = ({
   const [operators, setOperators] = useState<Operator[]>([])
   useEffect(() => {
     const majorOperatorsIds = ['3', '5', '15', '18', '25']
-    RELEVANT_OPERATORS.then((resultObj) =>
+    getRelevantOperators().then((resultObj) =>
       setOperators(
         onlyMajorOperators
           ? resultObj.filter((item) => majorOperatorsIds.includes(item.id))

src/pages/dashboard/DashboardPage.tsx

@@ -55,7 +55,7 @@ const DashboardPage = () => {
           </Grid>
         </Grid>
 
-        <Grid lg={6} display={{ xs: 'none', lg: 'block' }}>
+        <Grid lg={6} xs={12}>
           <OperatorSelector
             operatorId={operatorId}
             setOperatorId={setOperatorId}
@@ -67,13 +67,7 @@ const DashboardPage = () => {
         <Grid xs={12} lg={6}>
           <AllLinesChart startDate={startDate} endDate={endDate} />
         </Grid>
-        <Grid xs={12} display={{ xs: 'block', lg: 'none' }}>
-          <OperatorSelector
-            operatorId={operatorId}
-            setOperatorId={setOperatorId}
-            onlyMajorOperators
-          />
-        </Grid>
+
         <Grid xs={12} lg={6}>
           <WorstLinesChart startDate={startDate} endDate={endDate} operatorId={operatorId} />
         </Grid>