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

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.3",
   "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/CompactCustomTimePeriod.styles.ts

@@ -3,43 +3,33 @@ import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()((theme) => ({
   button: {
     height: '100%',
-    minWidth: 120,
     padding: theme.spacing(0, 0.5)
   },
   buttonContent: {
     alignItems: 'center',
     columnGap: theme.spacing(1),
-    display: 'grid',
-    gridTemplateColumns: 'min-content auto'
+    display: 'flex'
   },
-  compactFromTo: {
+  containerDates: {
     display: 'flex',
-    flexDirection: 'column',
-    padding: theme.spacing(0.5, 0, 0.5, 0)
+    gap: theme.spacing(0.5),
+    [theme.breakpoints.down('sm')]: {
+      columnGap: theme.spacing(0.5),
+      flexDirection: 'column'
+    }
   },
   date: {
-    display: 'flex'
-  },
-  dateLabel: {
-    display: 'flex',
-    flex: 1,
-    paddingRight: 4
+    minWidth: theme.spacing(12.5),
+    textAlign: 'start'
   },
   error: {
     textAlign: 'center'
   },
-  fromTo: {
-    alignItems: 'center',
-    columnGap: theme.spacing(0.5),
-    display: 'grid',
-    gridTemplateColumns: 'repeat(2, auto)'
-  },
-  minimalPickers: {
-    alignItems: 'center',
-    columnGap: theme.spacing(1),
-    display: 'grid',
-    gridTemplateColumns: 'min-content auto'
+  label: {
+    minWidth: theme.spacing(3),
+    textAlign: 'start'
   },
+
   picker: {
     display: 'flex',
     flexDirection: 'column',
@@ -49,8 +39,12 @@ const useStyles = makeStyles()((theme) => ({
   },
   timeContainer: {
     alignItems: 'center',
+    columnGap: theme.spacing(1),
     display: 'flex',
-    flexDirection: 'row'
+    flexDirection: 'row',
+    [theme.breakpoints.down('sm')]: {
+      alignItems: 'flex-start'
+    }
   }
 }));
 

package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.tsx

@@ -1,8 +1,7 @@
 import { useAtomValue } from 'jotai';
-import { lt } from 'ramda';
 
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import { Button, Typography, useTheme } from '@mui/material';
+import { Button, Typography } from '@mui/material';
 
 import { dateTimeFormat, useLocaleDateTimeFormat } from '@centreon/ui';
 
@@ -13,55 +12,66 @@ import useStyles from './CompactCustomTimePeriod.styles';
 interface Props {
   disabled?: boolean;
   onClick: (event) => void;
-  width: number;
 }
 
 const CompactCustomTimePeriod = ({
-  width,
   onClick,
   disabled = false
 }: Props): JSX.Element => {
-  const theme = useTheme();
   const { classes } = useStyles();
 
   const { format } = useLocaleDateTimeFormat();
 
   const customTimePeriod = useAtomValue(customTimePeriodAtom);
 
-  const isCompact = lt(width, theme.breakpoints.values.sm);
-
   return (
-    <Button
-      aria-label="Compact time period"
-      className={classes.button}
-      color="primary"
-      data-testid="Compact time period"
-      disabled={disabled}
-      variant="outlined"
-      onClick={onClick}
-    >
-      <div className={classes.buttonContent}>
-        <AccessTimeIcon />
-        <div className={isCompact ? classes.compactFromTo : classes.fromTo}>
-          <div className={classes.timeContainer}>
-            <div className={classes.dateLabel}>
-              <Typography variant="caption">From:</Typography>
-            </div>
-            <div className={classes.date}>
-              <Typography variant="caption">
+    <div>
+      <Button
+        aria-label="CompactTimePeriod"
+        className={classes.button}
+        color="primary"
+        data-testid="Compact time period"
+        disabled={disabled}
+        variant="outlined"
+        onClick={onClick}
+      >
+        <div className={classes.buttonContent}>
+          <AccessTimeIcon />
+          <div className={classes.containerDates}>
+            <div className={classes.timeContainer}>
+              <Typography
+                className={classes.label}
+                component="div"
+                variant="caption"
+              >
+                From:
+              </Typography>
+
+              <Typography
+                className={classes.date}
+                component="div"
+                variant="caption"
+              >
                 {format({
                   date: customTimePeriod.start,
                   formatString: dateTimeFormat
                 })}
               </Typography>
             </div>
-          </div>
-          <div className={classes.timeContainer}>
-            <div className={classes.dateLabel}>
-              <Typography variant="caption">To:</Typography>
-            </div>
-            <div className={classes.date}>
-              <Typography variant="caption">
+            <div className={classes.timeContainer}>
+              <Typography
+                className={classes.label}
+                component="div"
+                variant="caption"
+              >
+                To:
+              </Typography>
+
+              <Typography
+                className={classes.date}
+                component="div"
+                variant="caption"
+              >
                 {format({
                   date: customTimePeriod.end,
                   formatString: dateTimeFormat
@@ -70,8 +80,8 @@ const CompactCustomTimePeriod = ({
             </div>
           </div>
         </div>
-      </div>
-    </Button>
+      </Button>
+    </div>
   );
 };
 

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
@@ -12,17 +14,19 @@ import PopoverCustomTimePeriod from './PopoverCustomTimePeriod';
 
 interface Props {
   disabled?: boolean;
-  width: number;
 }
 
-const CustomTimePeriod = ({ width, disabled = false }: Props): JSX.Element => {
+const CustomTimePeriod = ({ disabled = false }: Props): JSX.Element => {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>();
 
   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>
@@ -38,12 +42,11 @@ const CustomTimePeriod = ({ width, disabled = false }: Props): JSX.Element => {
     <>
       <CompactCustomTimePeriod
         disabled={disabled}
-        width={width}
         onClick={onClickCompactCustomTimePeriod}
       />
       <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/ResolutionTimePeriod.cypress.spec.tsx

@@ -0,0 +1,65 @@
+import dayjs from 'dayjs';
+import 'dayjs/locale/fr';
+import localizedFormatPlugin from 'dayjs/plugin/localizedFormat';
+import timezonePlugin from 'dayjs/plugin/timezone';
+import utcPlugin from 'dayjs/plugin/utc';
+import { Provider, createStore } from 'jotai';
+
+import { Switch } from '@mui/material';
+
+import { userAtom } from '@centreon/ui-context';
+
+import { retrievedUser } from './mockedData';
+
+import AwesomeTimePeriod from '.';
+
+dayjs.extend(timezonePlugin);
+dayjs.extend(utcPlugin);
+dayjs.extend(localizedFormatPlugin);
+
+const data = [
+  {
+    locale: 'fr_FR',
+    resolution: { height: 720, width: 500 },
+    timezone: 'Europe/Paris'
+  },
+  {
+    locale: 'fr_FR',
+    resolution: { height: 720, width: 200 },
+    timezone: 'Europe/Paris'
+  },
+  {
+    locale: 'fr_FR',
+    resolution: { height: 720, width: 1024 },
+    timezone: 'Europe/Paris'
+  }
+];
+
+data.forEach((item) =>
+  describe('Time period', () => {
+    const { height, width } = item.resolution;
+    beforeEach(() => {
+      cy.viewport(width, height);
+
+      const store = createStore();
+
+      store.set(userAtom, {
+        ...retrievedUser,
+        locale: 'fr_FR',
+        timezone: 'Europe/Paris'
+      });
+
+      cy.mount({
+        Component: (
+          <Provider store={store}>
+            <AwesomeTimePeriod renderExternalComponent={<Switch />} />
+          </Provider>
+        )
+      });
+    });
+
+    it(`displays correctly the dates design when screen resolution is ${width}px`, () => {
+      cy.matchImageSnapshot(`${width}px`);
+    });
+  })
+);

package/src/TimePeriods/SelectedTimePeriod.tsx

@@ -53,46 +53,42 @@ const SelectedTimePeriod = ({
   );
 
   return (
-    <div>
-      <ButtonGroup
-        className={classes.buttonGroup}
-        color="primary"
-        component="span"
-        disabled={disabled}
-        size="small"
-      >
-        {map(
-          ({ id, name, largeName }) => (
-            <Tooltip key={name} placement="top" title={largeName}>
-              <Button
-                className={classes.button}
-                component="span"
-                data-testid={id}
-                variant={
-                  equals(selectedTimePeriodData?.id, id)
-                    ? 'contained'
-                    : 'outlined'
-                }
-                onClick={(): void =>
-                  changeSelectedTimePeriod({
-                    id,
-                    timePeriods: currentTimePeriods
-                  })
-                }
-              >
-                {
-                  cond<number, string>([
-                    [lte(theme.breakpoints.values.md), always(largeName)],
-                    [T, always(name)]
-                  ])(width) as string
-                }
-              </Button>
-            </Tooltip>
-          ),
-          timePeriodOptions
-        )}
-      </ButtonGroup>
-    </div>
+    <ButtonGroup
+      className={classes.buttonGroup}
+      color="primary"
+      disabled={disabled}
+      size="small"
+    >
+      {map(
+        ({ id, name, largeName }) => (
+          <Tooltip key={name} placement="top" title={largeName}>
+            <Button
+              className={classes.button}
+              data-testid={id}
+              variant={
+                equals(selectedTimePeriodData?.id, id)
+                  ? 'contained'
+                  : 'outlined'
+              }
+              onClick={(): void =>
+                changeSelectedTimePeriod({
+                  id,
+                  timePeriods: currentTimePeriods
+                })
+              }
+            >
+              {
+                cond<number, string>([
+                  [lte(theme.breakpoints.values.md), always(largeName)],
+                  [T, always(name)]
+                ])(width) as string
+              }
+            </Button>
+          </Tooltip>
+        ),
+        timePeriodOptions
+      )}
+    </ButtonGroup>
   );
 };
 

package/src/TimePeriods/{timePeriods.styles.ts → TimePeriods.styles.ts}

@@ -6,15 +6,17 @@ interface StylesProps {
 
 export const useStyles = makeStyles<StylesProps>()((theme, { disabled }) => ({
   header: {
-    alignItems: 'center',
+    [theme.breakpoints.down('sm')]: {
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      rowGap: theme.spacing(1)
+    },
     backgroundColor: disabled ? 'transparent' : 'undefined',
     border: disabled ? 'unset' : 'undefined',
     boxShadow: disabled ? 'unset' : 'undefined',
     columnGap: theme.spacing(2),
-    display: 'grid',
-    gridTemplateColumns: `repeat(4, auto)`,
+    display: 'flex',
     gridTemplateRows: '1fr',
-    justifyContent: 'center',
-    padding: theme.spacing(1, 0.5)
+    justifyContent: 'center'
   }
 }));

package/src/TimePeriods/index.stories.tsx

@@ -1,6 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
 import dayjs from 'dayjs';
 
+import Switch from '@mui/material/Switch';
+
 import { dateFormat } from './models';
 
 import AwesomeTimePeriod from '.';
@@ -18,16 +20,10 @@ const Template: Story = {
   render: (args) => <AwesomeTimePeriod {...args} />
 };
 
-const args = {
-  extraTimePeriods: [
-    {
-      dateTimeFormat: dateFormat,
-      getStart: (): Date => dayjs(Date.now()).subtract(29, 'day').toDate(),
-      id: 'last_29_days',
-      largeName: 'last 29 days',
-      name: '29 days'
-    }
-  ]
+const TemplateWithExternalComponent: Story = {
+  render: (args) => (
+    <AwesomeTimePeriod {...args} renderExternalComponent={<Switch />} />
+  )
 };
 
 const argTypes = {
@@ -66,9 +62,30 @@ const argTypes = {
     }
   }
 };
+const args = {
+  extraTimePeriods: [
+    {
+      dateTimeFormat: dateFormat,
+      getStart: (): Date => dayjs(Date.now()).subtract(29, 'day').toDate(),
+      id: 'last_29_days',
+      largeName: 'last 29 days',
+      name: '29 days'
+    }
+  ]
+};
 
 export const TimePeriod: Story = {
+  ...Template,
+  argTypes
+};
+
+export const WithExtraTimePeriods: Story = {
   ...Template,
   argTypes,
   args
 };
+
+export const WithExternalComponent: Story = {
+  ...TemplateWithExternalComponent,
+  argTypes
+};

package/src/TimePeriods/index.tsx

@@ -1,16 +1,18 @@
-import { useEffect } from 'react';
+import { ReactNode } from 'react';
 
 import { Responsive } from '@visx/visx';
-import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
+import 'dayjs/locale/en';
+import 'dayjs/locale/pt';
+import 'dayjs/locale/fr';
+import 'dayjs/locale/es';
 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,25 +20,21 @@ 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>;
   getIsError?: (value: boolean) => void;
   getStartEndParameters?: ({ start, end }: EndStartInterval) => void;
+  renderExternalComponent?: ReactNode;
 }
 
 const AwesomeTimePeriod = ({
@@ -44,32 +42,16 @@ const AwesomeTimePeriod = ({
   disabled = false,
   getStartEndParameters,
   getIsError,
-  adjustTimePeriodData
+  adjustTimePeriodData,
+  renderExternalComponent
 }: 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>
@@ -82,7 +64,8 @@ const AwesomeTimePeriod = ({
                 extraTimePeriods={extraTimePeriods}
                 width={width}
               />
-              <CustomTimePeriod disabled={disabled} width={width} />
+              <CustomTimePeriod disabled={disabled} />
+              <div>{renderExternalComponent}</div>
             </Paper>
           );
         }}

package/src/TimePeriods/mockedData.ts

@@ -0,0 +1,12 @@
+import { ListingVariant } from '@centreon/ui-context';
+
+export const retrievedUser = {
+  alias: 'Admin alias',
+  default_page: '/monitoring/resources',
+  is_export_button_enabled: true,
+  isExportButtonEnabled: true,
+  locale: 'fr_FR.UTF8',
+  name: 'Admin',
+  use_deprecated_pages: false,
+  user_interface_density: ListingVariant.compact
+};

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;