[ADM-931] feat: disable the sort button given invalid date (#1431)

au-heartbeat · May 9, 2024 · ef50386 · ef50386
1 parent 679bb15
commit ef50386
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 49 deletions.
diff --git a/frontend/src/containers/ConfigStep/DateRangePicker/DateRangePicker.tsx b/frontend/src/containers/ConfigStep/DateRangePicker/DateRangePicker.tsx
@@ -7,7 +7,7 @@ import {
 import { DEFAULT_SPRINT_INTERVAL_OFFSET_DAYS, REMOVE_BUTTON_TEXT, DATE_RANGE_FORMAT } from '@src/constants/resources';
 import { isDateDisabled, calculateLastAvailableDate } from '@src/containers/ConfigStep/DateRangePicker/validation';
 import { BASIC_INFO_ERROR_MESSAGE, AGGREGATED_DATE_ERROR_REASON } from '@src/containers/ConfigStep/Form/literal';
-import { IRangePickerProps } from '@src/containers/ConfigStep/DateRangePicker/types';
+import { IRangeOnChangeData, IRangePickerProps } from '@src/containers/ConfigStep/DateRangePicker/types';
 import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import { DateValidationError } from '@mui/x-date-pickers';
 import { TextField, TextFieldProps } from '@mui/material';
@@ -35,15 +35,7 @@ const HelperTextForEndDate = (props: TextFieldProps) => {
   return <TextField {...props} variant='standard' required={true} error={isError} helperText={isError && helperText} />;
 };
 
-export const DateRangePicker = ({
-  startDate,
-  endDate,
-  index,
-  onError,
-  onChange,
-  onRemove,
-  rangeList,
-}: IRangePickerProps) => {
+export const DateRangePicker = ({ startDate, endDate, index, onChange, onRemove, rangeList }: IRangePickerProps) => {
   const isShowRemoveButton = rangeList.length > 1;
   const dateRangeGroupExcludeSelf = rangeList.filter(({ sortIndex }: { sortIndex: number }) => sortIndex !== index);
   const shouldStartDateDisableDate = isDateDisabled.bind(null, dateRangeGroupExcludeSelf);
@@ -64,49 +56,65 @@ export const DateRangePicker = ({
           : draftDaysAddition;
     }
 
-    const result = isNull(value)
-      ? {
+    let result: IRangeOnChangeData = { startDate: null, endDate: null, startDateError: null, endDateError: null };
+    if (isNull(validationError)) {
+      if (isNull(value)) {
+        result = {
           startDate: null,
           endDate: null,
-        }
-      : {
+          startDateError: BASIC_INFO_ERROR_MESSAGE.dateRange.startDate.required,
+          endDateError: BASIC_INFO_ERROR_MESSAGE.dateRange.endDate.required,
+        };
+      } else {
+        result = {
           startDate: value.startOf('date').format(DATE_RANGE_FORMAT),
           endDate: value.endOf('date').add(daysAddToEndDate, 'day').format(DATE_RANGE_FORMAT),
+          startDateError: null,
+          endDateError: null,
         };
-
-    if (isNull(validationError)) {
-      if (isNull(value)) {
-        onError('startDateError', BASIC_INFO_ERROR_MESSAGE.dateRange.startDate.required, index);
       }
       setValue(startDateFieldName, result.startDate, { shouldValidate: true });
       setValue(endDateFieldName, result.endDate, { shouldValidate: true });
     } else {
+      result = {
+        startDate: value!.startOf('date').format(DATE_RANGE_FORMAT),
+        endDate,
+        startDateError: BASIC_INFO_ERROR_MESSAGE.dateRange.startDate.invalid,
+        endDateError: rangeList.find((item) => item.sortIndex === index)!.endDateError,
+      };
       setValue(startDateFieldName, AGGREGATED_DATE_ERROR_REASON, { shouldValidate: true });
-      onError('startDateError', validationError, index);
     }
     onChange(result, index);
   };
 
   const changeEndDate = (value: Nullable<Dayjs>, { validationError }: { validationError: DateValidationError }) => {
-    const result = isNull(value)
-      ? {
+    let result: IRangeOnChangeData = { startDate: null, endDate: null, startDateError: null, endDateError: null };
+    if (isNull(validationError)) {
+      if (isNull(value)) {
+        result = {
           startDate,
           endDate: null,
-        }
-      : {
+          startDateError: rangeList.find((item) => item.sortIndex === index)!.startDateError,
+          endDateError: BASIC_INFO_ERROR_MESSAGE.dateRange.endDate.required,
+        };
+      } else {
+        result = {
           startDate,
           endDate: value.endOf('date').format(DATE_RANGE_FORMAT),
+          startDateError: null,
+          endDateError: null,
         };
-
-    if (isNull(validationError)) {
-      if (isNull(value)) {
-        onError('endDateError', BASIC_INFO_ERROR_MESSAGE.dateRange.endDate.required, index);
       }
       setValue(startDateFieldName, result.startDate, { shouldValidate: true });
       setValue(endDateFieldName, result.endDate, { shouldValidate: true });
     } else {
+      result = {
+        startDate,
+        endDate: value!.endOf('date').format(DATE_RANGE_FORMAT),
+        startDateError: rangeList.find((item) => item.sortIndex === index)!.startDateError,
+        endDateError: BASIC_INFO_ERROR_MESSAGE.dateRange.endDate.invalid,
+      };
       setValue(endDateFieldName, AGGREGATED_DATE_ERROR_REASON, { shouldValidate: true });
-      onError('endDateError', validationError, index);
     }
     onChange(result, index);
   };

diff --git a/frontend/src/containers/ConfigStep/DateRangePicker/DateRangePickerGroup.tsx b/frontend/src/containers/ConfigStep/DateRangePicker/DateRangePickerGroup.tsx
@@ -1,4 +1,9 @@
-import { SortedDateRangeType, sortFn, TProps, TSortErrorTypes } from '@src/containers/ConfigStep/DateRangePicker/types';
+import {
+  IRangeOnChangeData,
+  SortedDateRangeType,
+  sortFn,
+  TProps,
+} from '@src/containers/ConfigStep/DateRangePicker/types';
 import { updateShouldGetBoardConfig, updateShouldGetPipelineConfig } from '@src/context/Metrics/metricsSlice';
 import { selectDateRange, selectDateRangeSortType, updateDateRange } from '@src/context/config/configSlice';
 import { DateRangePickerGroupContainer } from '@src/containers/ConfigStep/DateRangePicker/style';
@@ -9,7 +14,6 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { useAppDispatch, useAppSelector } from '@src/hooks/useAppDispatch';
 import { AddButton } from '@src/components/Common/AddButtonOneLine';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { DateValidationError } from '@mui/x-date-pickers';
 import { useFormContext } from 'react-hook-form';
 import { Nullable } from '@src/utils/types';
 import { useEffect, useState } from 'react';
@@ -48,14 +52,6 @@ export const DateRangePickerGroup = ({ onError }: TProps) => {
     onError?.(rangeListWithErrors);
   }, [onError, rangeListWithMeta]);
 
-  const handleError = (type: TSortErrorTypes, error: DateValidationError | string, index: number) => {
-    const newList = rangeListWithMeta.map((item) => ({
-      ...item,
-      [type]: item.sortIndex === index ? error : item[type],
-    }));
-    setRangeListWithMeta(newList);
-  };
-
   const dispatchUpdateConfig = () => {
     dispatch(updateShouldGetBoardConfig(true));
     dispatch(updateShouldGetPipelineConfig(true));
@@ -72,18 +68,15 @@ export const DateRangePickerGroup = ({ onError }: TProps) => {
     dispatch(updateDateRange(result.map(({ startDate, endDate }) => ({ startDate, endDate }))));
   };
 
-  const handleChange = (
-    { startDate, endDate }: { startDate: string | null; endDate: string | null },
-    index: number,
-  ) => {
+  const handleChange = ({ startDate, endDate, startDateError, endDateError }: IRangeOnChangeData, index: number) => {
     const result = rangeListWithMeta.map((item) =>
       item.sortIndex === index
         ? {
             ...item,
             startDate,
             endDate,
-            startDateError: deriveErrorMessageByDate(startDate, BASIC_INFO_ERROR_MESSAGE.dateRange.startDate.required),
-            endDateError: deriveErrorMessageByDate(endDate, BASIC_INFO_ERROR_MESSAGE.dateRange.endDate.required),
+            startDateError,
+            endDateError,
           }
         : { ...item },
     );
@@ -116,7 +109,6 @@ export const DateRangePickerGroup = ({ onError }: TProps) => {
             index={sortIndex}
             key={index}
             onChange={handleChange}
-            onError={handleError}
             onRemove={handleRemove}
             rangeList={rangeListWithMeta}
           />

diff --git a/frontend/src/containers/ConfigStep/DateRangePicker/types.ts b/frontend/src/containers/ConfigStep/DateRangePicker/types.ts
@@ -1,8 +1,7 @@
 import { DateValidationError } from '@mui/x-date-pickers';
+import { Nullable } from '@src/utils/types';
 import dayjs from 'dayjs';
 
-export type TSortErrorTypes = 'startDateError' | 'endDateError';
-
 export type SortedDateRangeType = {
   startDate: string | null;
   endDate: string | null;
@@ -11,13 +10,19 @@ export type SortedDateRangeType = {
   endDateError: DateValidationError | string | null;
 };
 
+export interface IRangeOnChangeData {
+  startDate: Nullable<string>;
+  endDate: Nullable<string>;
+  startDateError: Nullable<string>;
+  endDateError: Nullable<string>;
+}
+
 export interface IRangePickerProps {
   startDate: string | null;
   endDate: string | null;
   index: number;
   key?: string | number;
-  onError: (type: TSortErrorTypes, error: DateValidationError | string, index: number) => void;
-  onChange: (data: { startDate: string | null; endDate: string | null }, index: number) => void;
+  onChange: (data: IRangeOnChangeData, index: number) => void;
   onRemove: (index: number) => void;
   rangeList: SortedDateRangeType[];
 }