Feature/clear input button

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/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.scss

@@ -0,0 +1,13 @@
+.clear-indicator {
+  position: absolute;
+  left: 33px;
+  visibility: hidden;
+  height: 28px;
+  width: 28px;
+  color: #6a6b6c;
+  padding: 7px;
+  &:hover {
+    background-color: #e7e9eb;
+    border-radius: 50%;
+  }
+}

src/pages/components/ClearButton.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { CloseOutlined as ClearIcon } from '@ant-design/icons'
+import './ClearButton.scss'
+
+const ClearButton = ({ onClearInput }: { onClearInput: () => void }) => {
+  return <ClearIcon onClick={onClearInput} className="clear-indicator" />
+}
+
+export default ClearButton

src/pages/components/DateSelector.tsx

@@ -3,6 +3,11 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker'
 import { TEXTS } from 'src/resources/texts'
 import { DataAndTimeSelectorProps } from './utils/dateAndTime'
 import { DateValidationError } from '@mui/x-date-pickers'
+import styled from 'styled-components'
+
+const Error = styled.div`
+  color: 'red';
+`
 
 export function DateSelector({ time, onChange, customLabel }: DataAndTimeSelectorProps) {
   const [error, setError] = React.useState<DateValidationError | null>(null)
@@ -17,7 +22,7 @@ export function DateSelector({ time, onChange, customLabel }: DataAndTimeSelecto
         disableFuture
         onError={(err) => setError(err)}
       />
-      {error && <div style={{ color: 'red' }}>{error}</div>}
+      {error && <Error>{error}</Error>}
     </>
   )
 }

src/pages/components/FilterPositionsByStartTimeSelector.tsx

@@ -25,7 +25,7 @@ export function FilterPositionsByStartTimeSelector({
       disablePortal
       value={value}
       onChange={(e, value) => setStartTime(value ? value.value : '0')}
-      id="operator-select"
+      id="start-time-select"
       options={options}
       renderInput={(params) => <TextField {...params} label={TEXTS.choose_start_time} />}
       getOptionLabel={(option) => option.label}

src/pages/components/LineSelector.tsx

@@ -1,39 +1,53 @@
-import React, { useCallback, useLayoutEffect, useState } from 'react'
-import { TEXTS } from 'src/resources/texts'
-import debounce from 'lodash.debounce'
-import { TextField } from '@mui/material'
-
-type LineSelectorProps = {
-  lineNumber: string | undefined
-  setLineNumber: (lineNumber: string) => void
-}
-
-const LineSelector = ({ lineNumber, setLineNumber }: LineSelectorProps) => {
-  const [value, setValue] = useState<LineSelectorProps['lineNumber']>(lineNumber)
-  const debouncedSetLineNumber = useCallback(debounce(setLineNumber, 200), [setLineNumber])
-
-  useLayoutEffect(() => {
-    setValue(lineNumber)
-  }, [])
-
-  return (
-    <TextField
-      sx={{ width: '100%' }}
-      label={TEXTS.choose_line}
-      type="number"
-      value={value}
-      onChange={(e) => {
-        setValue(e.target.value)
-        debouncedSetLineNumber(e.target.value)
-      }}
-      InputLabelProps={{
-        shrink: true,
-      }}
-      InputProps={{
-        placeholder: TEXTS.line_placeholder,
-      }}
-    />
-  )
-}
-
-export default LineSelector
+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'
+import './Selector.scss'
+import classNames from 'classnames'
+
+type LineSelectorProps = {
+  lineNumber: string | undefined
+  setLineNumber: (lineNumber: string) => void
+}
+
+const LineSelector = ({ lineNumber, setLineNumber }: LineSelectorProps) => {
+  const [value, setValue] = useState<LineSelectorProps['lineNumber']>(lineNumber)
+  const debouncedSetLineNumber = useCallback(debounce(setLineNumber, 200), [setLineNumber])
+
+  useLayoutEffect(() => {
+    setValue(lineNumber)
+  }, [])
+
+  const handleClearInput = () => {
+    setValue('')
+    setLineNumber('')
+  }
+
+  const textFieldClass = classNames({
+    'selector-line-text-field': true,
+    'selector-line-text-field_visible': value,
+    'selector-line-text-field_hidden': !value,
+  })
+  return (
+    <TextField
+      className={textFieldClass}
+      label={TEXTS.choose_line}
+      type="number"
+      value={value && +value < 0 ? 0 : value}
+      onChange={(e) => {
+        setValue(e.target.value)
+        debouncedSetLineNumber(e.target.value)
+      }}
+      InputLabelProps={{
+        shrink: true,
+      }}
+      InputProps={{
+        placeholder: TEXTS.line_placeholder,
+        endAdornment: <ClearButton onClearInput={handleClearInput} />,
+      }}
+    />
+  )
+}
+
+export default LineSelector

src/pages/components/MinuteSelector.tsx

@@ -1,25 +1,39 @@
-import React from 'react'
-import { TEXTS } from 'src/resources/texts'
-import { TextField } from '@mui/material'
-
-type MinuteSelectorProps = {
-  num: number
-  setNum: (num: string) => void
-}
-
-const MinuteSelector = ({ num, setNum }: MinuteSelectorProps) => {
-  return (
-    <TextField
-      sx={{ width: '100%' }}
-      label={TEXTS.minutes}
-      type="number"
-      value={num}
-      onChange={(e) => setNum(e.target.value)}
-      InputLabelProps={{
-        shrink: true,
-      }}
-    />
-  )
-}
-
-export default MinuteSelector
+import React from 'react'
+import { TEXTS } from 'src/resources/texts'
+import { TextField } from '@mui/material'
+import ClearButton from './ClearButton'
+import './Selector.scss'
+import classNames from 'classnames'
+
+type MinuteSelectorProps = {
+  num: number
+  setNum: (num: number) => void
+}
+
+const MinuteSelector = ({ num, setNum }: MinuteSelectorProps) => {
+  const handleClearInput = () => {
+    setNum(1) // 1 minute this is the wanted default value
+  }
+  const textFieldClass = classNames({
+    'selector-minute-text-field': true,
+    'selector-minute-text-field_visible': num,
+    'selector-minute-text-field_hidden': !num,
+  })
+  return (
+    <TextField
+      className={textFieldClass}
+      label={TEXTS.minutes}
+      type="number"
+      value={num}
+      onChange={(e) => setNum(+e.target.value)}
+      InputLabelProps={{
+        shrink: true,
+      }}
+      InputProps={{
+        endAdornment: <ClearButton onClearInput={handleClearInput} />,
+      }}
+    />
+  )
+}
+
+export default MinuteSelector

src/pages/components/RouteSelector.tsx

@@ -21,7 +21,7 @@ const RouteSelector = ({ routes, routeKey, setRouteKey }: RouteSelectorProps) =>
       disablePortal
       value={value}
       onChange={(e, value) => setRouteKey(value ? value.key : '0')}
-      id="operator-select"
+      id="route-select"
       options={routes}
       renderInput={(params) => (
         <TextField {...params} label={formatted(TEXTS.choose_route, routes.length.toString())} />

src/pages/components/Selector.scss

@@ -0,0 +1,22 @@
+.selector {
+  &-minute,
+  &-line {
+    &-text-field {
+      width: 100%;
+      &_visible {
+        &:hover .clear-indicator,
+        & .Mui-focused .clear-indicator {
+          position: absolute;
+          visibility: visible;
+        }
+      }
+      &_hidden {
+        &:hover .clear-indicator,
+        & .Mui-focused .clear-indicator {
+          position: absolute;
+          visibility: hidden;
+        }
+      }
+    }
+  }
+}