From 74ea548e405255669f145d065e5d15e0f1f04409 Mon Sep 17 00:00:00 2001 From: YUVIYUV Date: Tue, 18 Jun 2024 13:00:24 +0300 Subject: [PATCH 1/3] fix: DateSelector selector validation message issues --- src/pages/components/DateSelector.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/components/DateSelector.tsx b/src/pages/components/DateSelector.tsx index 67efd972f..784d9ab78 100644 --- a/src/pages/components/DateSelector.tsx +++ b/src/pages/components/DateSelector.tsx @@ -12,6 +12,7 @@ export function DateSelector({ time, onChange, customLabel, minDate }: DataAndTi switch (error) { case 'maxDate': case 'minDate': + return t('bug_date_alert') case 'invalidDate': { return t('bug_date_invalid_format') } @@ -20,7 +21,7 @@ export function DateSelector({ time, onChange, customLabel, minDate }: DataAndTi return '' } } - }, [error]) + }, [error, t]) return ( Date: Thu, 20 Jun 2024 17:37:12 +0300 Subject: [PATCH 2/3] fix: replace useMemo with regular function --- src/pages/components/DateSelector.tsx | 40 +++++++++++++++------------ 1 file changed, 23 insertions(+), 17 deletions(-) diff --git a/src/pages/components/DateSelector.tsx b/src/pages/components/DateSelector.tsx index 784d9ab78..9e6ab91a2 100644 --- a/src/pages/components/DateSelector.tsx +++ b/src/pages/components/DateSelector.tsx @@ -1,27 +1,33 @@ -import { useState, useMemo } from 'react' +import { useState } from 'react' import { DatePicker } from '@mui/x-date-pickers/DatePicker' -import { useTranslation } from 'react-i18next' +import { t } from 'i18next' import { DateValidationError } from '@mui/x-date-pickers' import { DataAndTimeSelectorProps } from './utils/dateAndTime' +type errorMessageTypes = '' | 'bug_date_alert' | 'bug_date_invalid_format' +const getErrorMessage = (error: DateValidationError): errorMessageTypes => { + let message: errorMessageTypes = '' + switch (error) { + case 'maxDate': + case 'minDate': + message = t('bug_date_alert') + break + case 'invalidDate': { + message = t('bug_date_invalid_format') + break + } + + default: { + message = '' + } + } + return message +} + export function DateSelector({ time, onChange, customLabel, minDate }: DataAndTimeSelectorProps) { const [error, setError] = useState(null) - const { t } = useTranslation() - - const errorMessage = useMemo(() => { - switch (error) { - case 'maxDate': - case 'minDate': - return t('bug_date_alert') - case 'invalidDate': { - return t('bug_date_invalid_format') - } - default: { - return '' - } - } - }, [error, t]) + const errorMessage = getErrorMessage(error) return ( Date: Thu, 27 Jun 2024 20:55:54 +0300 Subject: [PATCH 3/3] refactor(DateSelector): better types and i18n (#831) --- src/pages/DataResearch/DataResearch.tsx | 4 +-- src/pages/components/DateSelector.tsx | 29 ++++++++-------------- src/pages/components/TimeSelector.tsx | 2 +- src/pages/components/utils/dateAndTime.tsx | 2 +- src/pages/lineProfile/LineProfile.tsx | 4 ++- src/pages/singleLineMap/index.tsx | 4 ++- 6 files changed, 20 insertions(+), 25 deletions(-) diff --git a/src/pages/DataResearch/DataResearch.tsx b/src/pages/DataResearch/DataResearch.tsx index b9f2d122a..f271d078f 100644 --- a/src/pages/DataResearch/DataResearch.tsx +++ b/src/pages/DataResearch/DataResearch.tsx @@ -115,14 +115,14 @@ function StackedResearchInputs({ setStartDate(data)} + onChange={(data) => data && setStartDate(data)} customLabel={t('start')} /> setEndDate(data)} + onChange={(data) => data && setEndDate(data)} customLabel={t('end')} /> diff --git a/src/pages/components/DateSelector.tsx b/src/pages/components/DateSelector.tsx index 9e6ab91a2..43f8dad92 100644 --- a/src/pages/components/DateSelector.tsx +++ b/src/pages/components/DateSelector.tsx @@ -1,39 +1,30 @@ import { useState } from 'react' import { DatePicker } from '@mui/x-date-pickers/DatePicker' -import { t } from 'i18next' import { DateValidationError } from '@mui/x-date-pickers' +import { useTranslation } from 'react-i18next' import { DataAndTimeSelectorProps } from './utils/dateAndTime' -type errorMessageTypes = '' | 'bug_date_alert' | 'bug_date_invalid_format' -const getErrorMessage = (error: DateValidationError): errorMessageTypes => { - let message: errorMessageTypes = '' +const getErrorMessageKey = (error?: DateValidationError) => { switch (error) { case 'maxDate': case 'minDate': - message = t('bug_date_alert') - break - case 'invalidDate': { - message = t('bug_date_invalid_format') - break - } - - default: { - message = '' - } + return 'bug_date_alert' + case 'invalidDate': + return 'bug_date_invalid_format' } - return message } export function DateSelector({ time, onChange, customLabel, minDate }: DataAndTimeSelectorProps) { - const [error, setError] = useState(null) + const [error, setError] = useState() + const { t } = useTranslation() - const errorMessage = getErrorMessage(error) + const errorMessageKey = getErrorMessageKey(error) return ( onChange(ts!)} + onChange={(ts) => onChange(ts)} format="DD/MM/YYYY" label={customLabel || t('choose_date')} disableFuture @@ -41,7 +32,7 @@ export function DateSelector({ time, onChange, customLabel, minDate }: DataAndTi onError={(err) => setError(err)} slotProps={{ textField: { - helperText: errorMessage, + helperText: errorMessageKey && t(errorMessageKey), }, }} /> diff --git a/src/pages/components/TimeSelector.tsx b/src/pages/components/TimeSelector.tsx index 054e0d51d..c0eef09f5 100644 --- a/src/pages/components/TimeSelector.tsx +++ b/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, diff --git a/src/pages/components/utils/dateAndTime.tsx b/src/pages/components/utils/dateAndTime.tsx index 3d518dc3f..cde624f00 100644 --- a/src/pages/components/utils/dateAndTime.tsx +++ b/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 } diff --git a/src/pages/lineProfile/LineProfile.tsx b/src/pages/lineProfile/LineProfile.tsx index cfc8da059..96eccddfd 100644 --- a/src/pages/lineProfile/LineProfile.tsx +++ b/src/pages/lineProfile/LineProfile.tsx @@ -86,7 +86,9 @@ const LineProfile = () => { setSearch((current) => ({ ...current, timestamp: ts.valueOf() }))} + onChange={(ts) => + setSearch((current) => ({ ...current, timestamp: ts?.valueOf() ?? Date.now() })) + } /> { setSearch((current) => ({ ...current, timestamp: ts.valueOf() }))} + onChange={(ts) => + setSearch((current) => ({ ...current, timestamp: ts?.valueOf() ?? Date.now() })) + } /> {/* choose operator */}