fix: DateSelector selector validation message issues

src/pages/DataResearch/DataResearch.tsx

@@ -115,14 +115,14 @@ function StackedResearchInputs({
         <Grid xs={6} item>
           <DateSelector
             time={startDate}
-            onChange={(data) => setStartDate(data)}
+            onChange={(data) => data && setStartDate(data)}
             customLabel={t('start')}
           />
         </Grid>
         <Grid xs={6} item>
           <DateSelector
             time={endDate}
-            onChange={(data) => setEndDate(data)}
+            onChange={(data) => data && setEndDate(data)}
             customLabel={t('end')}
           />
         </Grid>

src/pages/components/DateSelector.tsx

@@ -1,40 +1,38 @@
-import { useState, useMemo } from 'react'
+import { useState } from 'react'
 import { DatePicker } from '@mui/x-date-pickers/DatePicker'
-import { useTranslation } from 'react-i18next'
 import { DateValidationError } from '@mui/x-date-pickers'
+import { useTranslation } from 'react-i18next'
 import { DataAndTimeSelectorProps } from './utils/dateAndTime'
 
+const getErrorMessageKey = (error?: DateValidationError) => {
+  switch (error) {
+    case 'maxDate':
+    case 'minDate':
+      return 'bug_date_alert'
+    case 'invalidDate':
+      return 'bug_date_invalid_format'
+  }
+}
+
 export function DateSelector({ time, onChange, customLabel, minDate }: DataAndTimeSelectorProps) {
-  const [error, setError] = useState<DateValidationError | null>(null)
+  const [error, setError] = useState<DateValidationError>()
   const { t } = useTranslation()
 
-  const errorMessage = useMemo(() => {
-    switch (error) {
-      case 'maxDate':
-      case 'minDate':
-      case 'invalidDate': {
-        return t('bug_date_invalid_format')
-      }
-
-      default: {
-        return ''
-      }
-    }
-  }, [error])
+  const errorMessageKey = getErrorMessageKey(error)
 
   return (
     <DatePicker
       sx={{ width: '100%' }}
       value={time}
-      onChange={(ts) => onChange(ts!)}
+      onChange={(ts) => onChange(ts)}
       format="DD/MM/YYYY"
       label={customLabel || t('choose_date')}
       disableFuture
       minDate={minDate}
       onError={(err) => setError(err)}
       slotProps={{
         textField: {
-          helperText: errorMessage,
+          helperText: errorMessageKey && t(errorMessageKey),
         },
       }}
     />

src/pages/components/TimeSelector.tsx

@@ -9,7 +9,7 @@ export function TimeSelector({ time, onChange }: DataAndTimeSelectorProps) {
       sx={{ width: '100%' }}
       label={t('choose_time')}
       value={time}
-      onChange={(ts) => onChange(ts!)}
+      onChange={(ts) => onChange(ts)}
       ampm={false}
       viewRenderers={{
         hours: renderTimeViewClock,

src/pages/components/utils/dateAndTime.tsx

@@ -2,7 +2,7 @@ import moment from 'moment'
 
 export type DataAndTimeSelectorProps = {
   time: moment.Moment
-  onChange: (timeValid: moment.Moment) => void
+  onChange: (timeValid: moment.Moment | null) => void
   customLabel?: string
   minDate?: moment.Moment
 }

src/pages/lineProfile/LineProfile.tsx

@@ -86,7 +86,9 @@ const LineProfile = () => {
         <Grid xs={12} sm={4} className="inputs">
           <DateSelector
             time={moment(timestamp)}
-            onChange={(ts) => setSearch((current) => ({ ...current, timestamp: ts.valueOf() }))}
+            onChange={(ts) =>
+              setSearch((current) => ({ ...current, timestamp: ts?.valueOf() ?? Date.now() }))
+            }
           />
           <RouteSelector
             routes={availableRoutes ?? []}

src/pages/singleLineMap/index.tsx

@@ -78,7 +78,9 @@ const SingleLineMapPage = () => {
           <Grid sm={4} xs={12}>
             <DateSelector
               time={moment(timestamp)}
-              onChange={(ts) => setSearch((current) => ({ ...current, timestamp: ts.valueOf() }))}
+              onChange={(ts) =>
+                setSearch((current) => ({ ...current, timestamp: ts?.valueOf() ?? Date.now() }))
+              }
             />
           </Grid>
           {/* choose operator */}