feat(webapp): use Autocomplete component

edenia · Mar 23, 2023 · be5aa73 · be5aa73
1 parent 97e9747
commit be5aa73
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 39 deletions.
diff --git a/webapp/src/hooks/customHooks/useHealthCheckHistoryState.js b/webapp/src/hooks/customHooks/useHealthCheckHistoryState.js
@@ -27,6 +27,7 @@ const useHealthCheckState = () => {
   ] = useLazyQuery(HISTORY_ENDPOINTS_BY_PRODUCER_QUERY)
   const [producersNames, setProducersNames] = useState()
   const [selected, setSelected] = useState()
+  const [selectedName, setSelectedName] = useState()
   const [historyData, setHistoryData] = useState()
   const [statsAverage, setStatsAverage] = useState()
   const [formattedDates, setFormattedDates] = useState()
@@ -56,7 +57,13 @@ const useHealthCheckState = () => {
         name: producer?.bp_json?.org?.candidate_name,
       })),
     )
-    setSelected(location?.state?.producerId || producers[0]?.id)
+
+    const id = location?.state?.producerId
+    const producer =
+      producers.find(producer => producer.id === id) || producers[0]
+
+    setSelected(id || producers[0]?.id)
+    setSelectedName(producer?.bp_json?.org?.candidate_name)
     window.history.replaceState({}, document.title)
   }, [producers, location])
 
@@ -87,7 +94,7 @@ const useHealthCheckState = () => {
 
           previous = curr.value
         } else {
-          const index = aux.data.length  - 1
+          const index = aux.data.length - 1
 
           aux.data[index].data.push(curr.avg_time)
           aux.stats[index].availability += curr.availability
@@ -112,12 +119,13 @@ const useHealthCheckState = () => {
       historyData,
       statsAverage,
       selected,
+      selectedName,
       dates: formattedDates,
       loading,
       loadingHistory,
       loadingProducers,
     },
-    { setSelected },
+    { setSelected, setSelectedName },
   ]
 }
 

diff --git a/webapp/src/language/en.json b/webapp/src/language/en.json
@@ -394,6 +394,7 @@
     "byProducer": "Endpoints stats by producer",
     "avgAvailability": "Average Availability",
     "avgTime": "Average Response Time",
+    "charTitle": "Average Response Time from Costa Rica",
     "list": "List of endpoints",
     "timeInSecs": "Time in seconds"
   }

diff --git a/webapp/src/language/es.json b/webapp/src/language/es.json
@@ -411,6 +411,7 @@
     "byProducer": "Estadísticas de puntos finales por productor",
     "avgAvailability": "Disponibilidad promedio",
     "avgTime": "Tiempo de respuesta promedio",
+    "charTitle": "Tiempo de respuesta promedio desde Costa Rica",
     "list": "Lista de puntos finales",
     "timeInSecs": "Tiempo en segundos"
   }

diff --git a/webapp/src/routes/EndpointsStats/index.js b/webapp/src/routes/EndpointsStats/index.js
@@ -1,16 +1,15 @@
 /* eslint camelcase: 0 */
 import React from 'react'
+import { makeStyles } from '@mui/styles'
 import { useTranslation } from 'react-i18next'
+import Autocomplete from '@mui/material/Autocomplete'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
-import LinearProgress from '@mui/material/LinearProgress'
-import MenuItem from '@mui/material/MenuItem'
 import Highcharts from 'highcharts'
 import HighchartsReact from 'highcharts-react-official'
-import FormControl from '@mui/material/FormControl'
-import Select from '@mui/material/Select'
-import { makeStyles } from '@mui/styles'
+import LinearProgress from '@mui/material/LinearProgress'
+import TextField from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
 
 import useHealthCheckState from '../../hooks/customHooks/useHealthCheckHistoryState'
 
@@ -22,7 +21,18 @@ const useStyles = makeStyles(styles)
 const EndpointsStats = () => {
   const { t } = useTranslation('EndpointsStatsRoute')
   const classes = useStyles()
-  const [{fastestEndpoints,producersNames,historyData,dates,statsAverage,selected,loading},{setSelected}] = useHealthCheckState()
+  const [
+    {
+      fastestEndpoints,
+      producersNames,
+      historyData,
+      dates,
+      statsAverage,
+      selectedName,
+      loading,
+    },
+    { setSelected, setSelectedName },
+  ] = useHealthCheckState()
 
   const options = {
     xAxis: {
@@ -32,7 +42,7 @@ const EndpointsStats = () => {
       enabled: false,
     },
     title: {
-      text: t('avgTime'),
+      text: t('charTitle'),
     },
     yAxis: {
       title: {
@@ -53,10 +63,10 @@ const EndpointsStats = () => {
         <CardContent>
           {loading && <LinearProgress />}
           {!loading && (
-          <EndpointsTable
-            title={t('fastest')}
-            endpoints={fastestEndpoints || []}
-          />
+            <EndpointsTable
+              title={t('fastest')}
+              endpoints={fastestEndpoints || []}
+            />
           )}
         </CardContent>
       </Card>
@@ -65,35 +75,43 @@ const EndpointsStats = () => {
           <Typography component="p" variant="h6">
             {t('byProducer')}
           </Typography>
-          <br />
           {producersNames?.length && (
-            <FormControl variant="standard">
-              <Select
-                value={selected}
-                onChange={(event) => setSelected(event.target.value)}
-                fullWidth
-              >
-                {producersNames.map((producer) => (
-                  <MenuItem key={producer.id} value={producer.id}>
-                    {producer.name}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
+            <Autocomplete
+              className={classes.select}
+              options={producersNames.map(producer => producer.name)}
+              value={selectedName}
+              onChange={(_event, newValue) => {
+                const producer = producersNames.find(
+                  producer => producer.name === newValue,
+                )
+
+                if (!producer) return
+
+                setSelected(producer.id)
+              }}
+              inputValue={selectedName}
+              onInputChange={(_event, newInputValue) => {
+                setSelectedName(newInputValue)
+              }}
+              renderInput={params => (
+                <TextField {...params} label={t('producerName')} />
+              )}
+            />
           )}
           {historyData && (
-          <HighchartsReact
-            highcharts={Highcharts}
-            options={{ ...options,xAxis: {
-              categories: dates,
-            }, series: historyData }}
-          />
+            <HighchartsReact
+              highcharts={Highcharts}
+              options={{
+                ...options,
+                xAxis: {
+                  categories: dates,
+                },
+                series: historyData,
+              }}
+            />
           )}
           {statsAverage && (
-            <EndpointsTable
-              title={t('list')}
-              endpoints={statsAverage}
-            />
+            <EndpointsTable title={t('list')} endpoints={statsAverage} />
           )}
         </CardContent>
       </Card>

diff --git a/webapp/src/routes/EndpointsStats/styles.js b/webapp/src/routes/EndpointsStats/styles.js
@@ -4,5 +4,8 @@ export default (theme) => ({
   },
   cardByProducer: {
     marginTop: theme.spacing(8)
+  },
+  select: {
+    margin: `${theme.spacing(8)} ${theme.spacing(2)}`
   }
 })