@centreon/ui 23.10.18-MON-17793-create-graph-component-centreon-ui.1 → 23.10.18-MON-17793-create-graph-component-centreon-ui.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.18-MON-17793-create-graph-component-centreon-ui.1",
+  "version": "23.10.18-MON-17793-create-graph-component-centreon-ui.2",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Graph/helpers/doc.ts

@@ -46,7 +46,7 @@ export const defaultLastMonth = new Date(
 ).toISOString();
 
 export const zoomPreviewDate = '2023-04-22';
-export const lastDayForwardDate = '2023-05-23T';
+export const lastDayForwardDate = '2023-05-23T21';
 
 export const getCustomText = (text: string): string =>
   `<span style="color:#1EA7FD;fontSize:12px">(${text})</span>`;

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/PickersStartEndDate.tsx

@@ -58,10 +58,8 @@ const PickerDateWithLabel = ({
   maxDate,
   minDate,
   property,
-  onClosePicker,
   disabled,
   date,
-  setDate,
   direction = PickersStartEndDateDirection.column
 }: PropsPickersDateWithLabel): JSX.Element => {
   const { classes, cx } = useStyles();
@@ -77,8 +75,6 @@ const PickerDateWithLabel = ({
         maxDate={maxDate}
         minDate={minDate}
         property={property}
-        setDate={setDate}
-        onClosePicker={onClosePicker}
       />
     </div>
   );
@@ -110,9 +106,6 @@ const PickersStartEndDate = ({
   const { locale } = useAtomValue(userAtom);
   const error = useAtomValue(errorTimePeriodAtom);
 
-  const { start, setStart } = startDate;
-  const { end, setEnd } = endDate;
-
   const maxStart = rangeStartDate?.max;
   const minStart = rangeStartDate?.min;
   const maxEnd = rangeEndDate?.max;
@@ -135,25 +128,23 @@ const PickersStartEndDate = ({
       <div className={styleContainer}>
         <PickerDateWithLabel
           changeDate={changeDate}
-          date={start}
+          date={startDate}
           direction={direction}
           disabled={disabled?.isDisabledStartPicker}
           label="From"
           maxDate={maxStart}
           minDate={minStart}
           property={CustomTimePeriodProperty.start}
-          setDate={setStart}
         />
         <PickerDateWithLabel
           changeDate={changeDate}
-          date={end}
+          date={endDate}
           direction={direction}
           disabled={disabled?.isDisabledEndPicker}
           label="To"
           maxDate={maxEnd}
           minDate={minEnd}
           property={CustomTimePeriodProperty.end}
-          setDate={setEnd}
         />
       </div>
 

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/usePickersStartEndDate.ts

@@ -1,27 +1,18 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import dayjs from 'dayjs';
-import { and, cond, equals, isNil } from 'ramda';
 import { useSetAtom } from 'jotai';
+import { and, cond, equals, isNil } from 'ramda';
 
-import { errorTimePeriodAtom } from '../../timePeriodsAtoms';
 import { CustomTimePeriod, CustomTimePeriodProperty } from '../../models';
+import { errorTimePeriodAtom } from '../../timePeriodsAtoms';
 
 import { AcceptDateProps } from './models';
 
-interface StartDate {
-  setStart: Dispatch<SetStateAction<Date | null>>;
-  start: Date | null;
-}
-interface EndDate {
-  end: Date | null;
-  setEnd: Dispatch<SetStateAction<Date | null>>;
-}
-
 export interface PickersStartEndDateModel {
   changeDate: (props: AcceptDateProps) => void;
-  endDate: EndDate;
-  startDate: StartDate;
+  endDate: Date | null;
+  startDate: Date | null;
 }
 interface Props {
   acceptDate: (props: AcceptDateProps) => void;
@@ -83,8 +74,8 @@ const usePickersStartEndDate = ({
 
   return {
     changeDate,
-    endDate: { end, setEnd },
-    startDate: { setStart, start }
+    endDate: end,
+    startDate: start
   };
 };
 

package/src/TimePeriods/CustomTimePeriod/index.tsx

@@ -2,6 +2,8 @@ import { MouseEvent, useState } from 'react';
 
 import { useAtomValue, useSetAtom } from 'jotai';
 
+import { useDebounce } from '@centreon/ui';
+
 import {
   changeCustomTimePeriodDerivedAtom,
   customTimePeriodAtom
@@ -21,8 +23,11 @@ const CustomTimePeriod = ({ width, disabled = false }: Props): JSX.Element => {
   const customTimePeriod = useAtomValue(customTimePeriodAtom);
   const changeCustomTimePeriod = useSetAtom(changeCustomTimePeriodDerivedAtom);
 
-  const acceptDate = ({ property, date }): void =>
-    changeCustomTimePeriod({ date, property });
+  const debouncedChangeDate = useDebounce({
+    functionToDebounce: ({ property, date }): void =>
+      changeCustomTimePeriod({ date, property }),
+    wait: 500
+  });
 
   const onClickCompactCustomTimePeriod = (
     event: MouseEvent<HTMLButtonElement>
@@ -43,7 +48,7 @@ const CustomTimePeriod = ({ width, disabled = false }: Props): JSX.Element => {
       />
       <PopoverCustomTimePeriod
         pickersData={{
-          acceptDate,
+          acceptDate: debouncedChangeDate,
           customTimePeriod,
           isDisabledEndPicker: disabled,
           isDisabledStartPicker: disabled,

package/src/TimePeriods/DateTimePickerInput.tsx

@@ -8,11 +8,11 @@ import { CustomTimePeriodProperty } from './models';
 
 interface Props {
   changeDate: (props) => void;
-  date: Date | dayjs.Dayjs | null;
+  date: Date | null;
   desktopMediaQuery?: string;
   disabled?: boolean;
-  maxDate?: Date | dayjs.Dayjs;
-  minDate?: Date | dayjs.Dayjs;
+  maxDate?: Date;
+  minDate?: Date;
   property: CustomTimePeriodProperty;
 }
 

package/src/TimePeriods/index.tsx

@@ -1,16 +1,12 @@
-import { useEffect } from 'react';
-
 import { Responsive } from '@visx/visx';
-import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
 import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
 import timezonePlugin from 'dayjs/plugin/timezone';
 import utcPlugin from 'dayjs/plugin/utc';
-import duration from 'dayjs/plugin/duration';
-import { useAtomValue, useSetAtom } from 'jotai';
 
 import { Paper } from '@mui/material';
 
-import { useStyles } from './timePeriods.styles';
 import CustomTimePeriod from './CustomTimePeriod';
 import SelectedTimePeriod from './SelectedTimePeriod';
 import {
@@ -18,20 +14,15 @@ import {
   EndStartInterval,
   TimePeriod
 } from './models';
-import {
-  customTimePeriodAtom,
-  getDatesDerivedAtom,
-  selectedTimePeriodAtom,
-  errorTimePeriodAtom,
-  adjustTimePeriodDerivedAtom
-} from './timePeriodsAtoms';
+import { useStyles } from './timePeriods.styles';
+import useAwesomeTimePeriod from './useAwesomeTimePeriod';
 
 dayjs.extend(isSameOrAfter);
 dayjs.extend(utcPlugin);
 dayjs.extend(timezonePlugin);
 dayjs.extend(duration);
 
-interface Props {
+export interface Props {
   adjustTimePeriodData?: CustomTimePeriodModel;
   disabled?: boolean;
   extraTimePeriods?: Array<TimePeriod>;
@@ -48,28 +39,11 @@ const AwesomeTimePeriod = ({
 }: Props): JSX.Element => {
   const { classes } = useStyles({ disabled });
 
-  const selectedTimePeriod = useAtomValue(selectedTimePeriodAtom);
-  const customTimePeriod = useAtomValue(customTimePeriodAtom);
-  const getCurrentEndStartInterval = useAtomValue(getDatesDerivedAtom);
-  const errorTimePeriod = useAtomValue(errorTimePeriodAtom);
-  const adjustTimeTimePeriod = useSetAtom(adjustTimePeriodDerivedAtom);
-
-  useEffect(() => {
-    if (!adjustTimePeriodData) {
-      return;
-    }
-
-    adjustTimeTimePeriod(adjustTimePeriodData);
-  }, [adjustTimePeriodData?.start, adjustTimePeriodData?.end]);
-
-  useEffect(() => {
-    const [start, end] = getCurrentEndStartInterval(selectedTimePeriod);
-    getStartEndParameters?.({ end, start });
-  }, [customTimePeriod.start, customTimePeriod.end, selectedTimePeriod]);
-
-  useEffect(() => {
-    getIsError?.(errorTimePeriod);
-  }, [errorTimePeriod]);
+  useAwesomeTimePeriod({
+    adjustTimePeriodData,
+    getIsError,
+    getStartEndParameters
+  });
 
   return (
     <div>

package/src/TimePeriods/models.ts

@@ -70,10 +70,10 @@ export interface CustomTimePeriod {
 
 export interface DateTimePickerInputModel {
   changeDate: (props) => void;
-  date: Date | dayjs.Dayjs | null;
+  date: Date | null;
   disabled?: boolean;
-  maxDate?: Date | dayjs.Dayjs;
-  minDate?: Date | dayjs.Dayjs;
+  maxDate?: Date;
+  minDate?: Date;
   property: CustomTimePeriodProperty;
 }
 

package/src/TimePeriods/useAwesomeTimePeriod.ts

@@ -0,0 +1,48 @@
+import { useEffect } from 'react';
+
+import { useAtomValue, useSetAtom } from 'jotai';
+
+import {
+  customTimePeriodAtom,
+  getDatesDerivedAtom,
+  selectedTimePeriodAtom,
+  errorTimePeriodAtom,
+  adjustTimePeriodDerivedAtom
+} from './timePeriodsAtoms';
+
+import { Props } from '.';
+
+const useAwesomeTimePeriod = ({
+  getStartEndParameters,
+  getIsError,
+  adjustTimePeriodData
+}: Omit<Props, 'extraTimePeriods' | 'disabled'>): void => {
+  const selectedTimePeriod = useAtomValue(selectedTimePeriodAtom);
+  const customTimePeriod = useAtomValue(customTimePeriodAtom);
+  const getCurrentEndStartInterval = useAtomValue(getDatesDerivedAtom);
+  const errorTimePeriod = useAtomValue(errorTimePeriodAtom);
+  const adjustTimeTimePeriod = useSetAtom(adjustTimePeriodDerivedAtom);
+
+  useEffect(() => {
+    if (!adjustTimePeriodData) {
+      return;
+    }
+
+    adjustTimeTimePeriod(adjustTimePeriodData);
+  }, [adjustTimePeriodData?.start, adjustTimePeriodData?.end]);
+
+  useEffect(() => {
+    const [start, end] = getCurrentEndStartInterval(selectedTimePeriod);
+
+    getStartEndParameters?.({ end, start });
+  }, [customTimePeriod.start, customTimePeriod.end, selectedTimePeriod]);
+
+  useEffect(() => {
+    if (!errorTimePeriod) {
+      return;
+    }
+    getIsError?.(errorTimePeriod);
+  }, [errorTimePeriod]);
+};
+
+export default useAwesomeTimePeriod;