Feature/clear input button

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.14",
     "@mui/material": "^5.14.7",
     "@mui/x-date-pickers": "^6.12.1",
     "@types/leaflet.markercluster": "^1.5.2",

src/pages/GapsPage.tsx

@@ -78,7 +78,12 @@ const GapsPage = () => {
   }, [operatorId, routeKey, timestamp])
 
   useEffect(() => {
-    if (!operatorId || !lineNumber) {
+    if (!operatorId || operatorId === '0' || !lineNumber) {
+      setSearch((current) => ({
+        ...current,
+        routes: undefined,
+        routeKey: undefined,
+      }))
       return
     }
     getRoutesAsync(moment(timestamp), moment(timestamp), operatorId, lineNumber)
@@ -156,7 +161,7 @@ const GapsPage = () => {
           )}
         </Grid>
       </Grid>
-      {!gapsIsLoading && routeKey && (
+      {!gapsIsLoading && routeKey && routeKey !== '0' && (
         <>
           <FormControlLabel
             control={

src/pages/GapsPatternsPage.tsx

@@ -155,7 +155,8 @@ const GapsPatternsPage = () => {
   }
 
   useEffect(() => {
-    if (!operatorId || !lineNumber) {
+    if (!operatorId || operatorId === '0' || !lineNumber) {
+      setSearch((current) => ({ ...current, routeKey: undefined, routes: undefined }))
       return
     }
     loadSearchData()
@@ -217,21 +218,23 @@ const GapsPatternsPage = () => {
             (routes.length === 0 ? (
               <NotFound>{TEXTS.line_not_found}</NotFound>
             ) : (
-              <RouteSelector
-                routes={routes}
-                routeKey={routeKey}
-                setRouteKey={(key) => setSearch((current) => ({ ...current, routeKey: key }))}
-              />
+              <>
+                <RouteSelector
+                  routes={routes}
+                  routeKey={routeKey}
+                  setRouteKey={(key) => setSearch((current) => ({ ...current, routeKey: key }))}
+                />
+                <Grid xs={12}>
+                  <GapsByHour
+                    lineRef={routes?.find((route) => route.key === routeKey)?.lineRef || 0}
+                    operatorRef={operatorId || ''}
+                    fromDate={startDate}
+                    toDate={endDate}
+                  />
+                </Grid>
+              </>
             ))}
         </Grid>
-        <Grid xs={12}>
-          <GapsByHour
-            lineRef={routes?.find((route) => route.key === routeKey)?.lineRef || 0}
-            operatorRef={operatorId || ''}
-            fromDate={startDate}
-            toDate={endDate}
-          />
-        </Grid>
       </Grid>
     </PageContainer>
   )

src/pages/RealtimeMapPage.tsx

@@ -144,7 +144,7 @@ export default function RealtimeMapPage() {
           <MinuteSelector
             num={to.diff(from) / 1000 / 60}
             setNum={(num) => {
-              setTo(moment(from).add(Math.abs(+num) || 1, 'minutes'))
+              setTo(moment(from).add(Math.abs(+num) || 0, 'minutes'))
             }}
           />
         </Grid>

src/pages/SingleLineMapPage.tsx

@@ -48,7 +48,8 @@ const SingleLineMapPage = () => {
   }, [])
 
   useEffect(() => {
-    if (!operatorId || !lineNumber) {
+    if (!operatorId || operatorId === '0' || !lineNumber) {
+      setSearch((current) => ({ ...current, routes: undefined, routeKey: undefined }))
       return
     }
     getRoutesAsync(moment(timestamp), moment(timestamp), operatorId, lineNumber).then((routes) =>

src/pages/TimelinePage.tsx

@@ -39,17 +39,21 @@ const TimelinePage = () => {
   const [hitsIsLoading, setHitsIsLoading] = useState(false)
 
   const clearRoutes = useCallback(() => {
-    setState((current) => ({ ...current, routes: undefined, routeKey: undefined }))
-  }, [setState])
+    setSearch((current) => ({ ...current, routes: undefined, routeKey: undefined }))
+    setRoutesIsLoading(false)
+  }, [setSearch])
 
   const clearStops = useCallback(() => {
     setState((current) => ({
       ...current,
       stops: undefined,
+      stopName: undefined,
       stopKey: undefined,
       gtfsHitTimes: undefined,
       siriHitTimes: undefined,
     }))
+    setStopsIsLoading(false)
+    setHitsIsLoading(false)
   }, [setState])
 
   useEffect(() => {
@@ -58,7 +62,7 @@ const TimelinePage = () => {
 
   useEffect(() => {
     clearStops()
-    if (!operatorId || !lineNumber) {
+    if (!operatorId || operatorId === '0' || !lineNumber) {
       return
     }
     setRoutesIsLoading(true)
@@ -79,6 +83,9 @@ const TimelinePage = () => {
 
   useEffect(() => {
     clearStops()
+    if (!operatorId || operatorId === '0' || !lineNumber) {
+      return
+    }
     if (!routeKey || !selectedRouteIds) {
       return
     }
@@ -89,6 +96,9 @@ const TimelinePage = () => {
   }, [selectedRouteIds, routeKey, clearStops])
 
   useEffect(() => {
+    if (!operatorId || operatorId === '0' || !lineNumber) {
+      return
+    }
     if (!stopKey || !stops || !selectedRoute) {
       return
     }
@@ -107,6 +117,9 @@ const TimelinePage = () => {
   }, [stopKey, stops, timestamp, selectedRoute])
 
   useEffect(() => {
+    if (!operatorId || operatorId === '0' || !lineNumber) {
+      return
+    }
     if (!stopName || !stops || stopKey) {
       return
     }

src/pages/components/ClearButton.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import ClearIcon from '@mui/icons-material/Clear'
+import { IconButton } from '@mui/material'
+
+const ClearButton = ({ onClearInput }: { onClearInput: () => void }) => {
+  return (
+    <IconButton
+      onClick={onClearInput}
+      size="small"
+      className="clearIndicatorDirty"
+      sx={{
+        visibility: 'hidden',
+        position: 'absolute',
+        right: '32px',
+      }}>
+      <ClearIcon fontSize="small" />
+    </IconButton>
+  )
+}
+
+export default ClearButton

src/pages/components/LineSelector.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useLayoutEffect, useState } from 'react'
 import { TEXTS } from 'src/resources/texts'
 import debounce from 'lodash.debounce'
 import { TextField } from '@mui/material'
+import ClearButton from './ClearButton'
 
 type LineSelectorProps = {
   lineNumber: string | undefined
@@ -16,12 +17,23 @@ const LineSelector = ({ lineNumber, setLineNumber }: LineSelectorProps) => {
     setValue(lineNumber)
   }, [])
 
+  const handleClearInput = () => {
+    setValue('')
+    setLineNumber('')
+  }
+
   return (
     <TextField
-      sx={{ width: '100%' }}
+      className="textInput"
+      sx={{
+        width: '100%',
+        '&:hover .clearIndicatorDirty, & .Mui-focused .clearIndicatorDirty': {
+          visibility: value ? 'visible' : 'hidden',
+        },
+      }}
       label={TEXTS.choose_line}
       type="number"
-      value={value}
+      value={value && +value < 0 ? 0 : value}
       onChange={(e) => {
         setValue(e.target.value)
         debouncedSetLineNumber(e.target.value)
@@ -31,6 +43,7 @@ const LineSelector = ({ lineNumber, setLineNumber }: LineSelectorProps) => {
       }}
       InputProps={{
         placeholder: TEXTS.line_placeholder,
+        endAdornment: <ClearButton onClearInput={handleClearInput} />,
       }}
     />
   )

src/pages/components/MinuteSelector.tsx

@@ -1,23 +1,36 @@
 import React from 'react'
 import { TEXTS } from 'src/resources/texts'
 import { TextField } from '@mui/material'
+import ClearButton from './ClearButton'
 
 type MinuteSelectorProps = {
   num: number
   setNum: (num: string) => void
 }
 
 const MinuteSelector = ({ num, setNum }: MinuteSelectorProps) => {
+  const handleClearInput = () => {
+    setNum('0')
+  }
+
   return (
     <TextField
-      sx={{ width: '100%' }}
+      sx={{
+        width: '100%',
+        '&:hover .clearIndicatorDirty , & .Mui-focused .clearIndicatorDirty ': {
+          visibility: num ? 'visible' : 'hidden',
+        },
+      }}
       label={TEXTS.minutes}
       type="number"
       value={num}
       onChange={(e) => setNum(e.target.value)}
       InputLabelProps={{
         shrink: true,
       }}
+      InputProps={{
+        endAdornment: <ClearButton onClearInput={handleClearInput} />,
+      }}
     />
   )
 }