fix acitivities date picker

opendatadiscovery · Oct 4, 2023 · 34ea458 · 34ea458
1 parent 5580f1f
commit 34ea458
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 22 deletions.
diff --git a/odd-platform-ui/src/components/shared/elements/Activity/common.ts b/odd-platform-ui/src/components/shared/elements/Activity/common.ts
@@ -1,4 +1,4 @@
-import { addDays, startOfDay } from 'date-fns';
+import { addDays, endOfDay, startOfDay } from 'date-fns';
 import type { Activity, RequiredField, SerializeDateToNumber } from 'redux/interfaces';
 import type { ActivityApiGetActivityRequest } from 'generated-sources';
 import { ActivityType } from 'generated-sources';
@@ -31,7 +31,7 @@ export interface ActivityItemProps {
 }
 
 const beginDate = startOfDay(addDays(new Date(), -5)).getTime();
-const endDate = startOfDay(addDays(new Date(), 1)).getTime();
+const endDate = endOfDay(addDays(new Date(), 1)).getTime();
 
 export const defaultActivityQuery: ActivityQuery = {
   beginDate,

diff --git a/odd-platform-ui/src/components/shared/elements/AppDateRangePicker/AppDateRangePicker.tsx b/odd-platform-ui/src/components/shared/elements/AppDateRangePicker/AppDateRangePicker.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { addDays, endOfDay, startOfDay } from 'date-fns';
 import DatePicker, { type DateObject } from 'react-multi-date-picker';
 import AppDateRangePickerFooter from 'components/shared/elements/AppDateRangePicker/AppDateRangePickerFooter/AppDateRangePickerFooter';
@@ -15,15 +15,15 @@ const AppDateRangePicker: React.FC<AppDateRangePickerProps> = ({
   label,
   setCurrentRange,
 }) => {
-  const datePickerRef = React.useRef<any>();
+  const datePickerRef = useRef<any>();
 
-  const [isRangeCorrect, setIsRangeCorrect] = React.useState(true);
-  const [{ rangeStart, rangeEnd }, setRange] = React.useState({
+  const [isRangeCorrect, setIsRangeCorrect] = useState(true);
+  const [{ rangeStart, rangeEnd }, setRange] = useState({
     rangeStart: defaultRange.beginDate,
     rangeEnd: defaultRange.endDate,
   });
 
-  React.useEffect(() => {
+  useEffect(() => {
     setRange({ rangeStart: defaultRange.beginDate, rangeEnd: defaultRange.endDate });
   }, [defaultRange]);
 
@@ -46,18 +46,18 @@ const AppDateRangePicker: React.FC<AppDateRangePickerProps> = ({
     },
   ];
 
-  const handleSetRange = React.useCallback(([beginDate, endDate]: Date[]) => {
+  const handleSetRange = useCallback(([beginDate, endDate]: Date[]) => {
     setIsRangeCorrect(true);
     if (!endDate) setIsRangeCorrect(false);
-    setRange({ rangeStart: startOfDay(beginDate), rangeEnd: startOfDay(endDate) });
+    setRange({ rangeStart: startOfDay(beginDate), rangeEnd: endOfDay(endDate) });
   }, []);
 
   type DisableSelectedDateParams = {
     date: DateObject;
     selectedDate: DateObject | DateObject[];
   };
 
-  const disableSelectedDate = React.useCallback(
+  const disableSelectedDate = useCallback(
     ({ date, selectedDate }: DisableSelectedDateParams) => {
       const isArray = Array.isArray(selectedDate);
       if (isArray && selectedDate[0].unix === date.unix) return { disabled: true };
@@ -67,13 +67,23 @@ const AppDateRangePicker: React.FC<AppDateRangePickerProps> = ({
     []
   );
 
-  const handleClickDone = React.useCallback(() => {
+  const handleClickDone = useCallback(() => {
     if (setCurrentRange) {
       setCurrentRange(rangeStart, rangeEnd);
     }
     datePickerRef.current?.closeCalendar();
   }, [setCurrentRange, datePickerRef, rangeStart, rangeEnd]);
 
+  const appDateRangePickerFooter = (
+    <AppDateRangePickerFooter
+      position='bottom'
+      onClickDoneBtn={handleClickDone}
+      ranges={ranges}
+      setRange={handleSetRange}
+      isRangeCorrect={isRangeCorrect}
+    />
+  );
+
   return (
     <>
       <S.DateRangePickerLabel>{label}</S.DateRangePickerLabel>
@@ -92,15 +102,7 @@ const AppDateRangePicker: React.FC<AppDateRangePickerProps> = ({
           handleSetRange([begin?.toDate(), end?.toDate()]);
         }}
         value={[rangeStart, rangeEnd]}
-        plugins={[
-          <AppDateRangePickerFooter
-            position='bottom'
-            onClickDoneBtn={handleClickDone}
-            ranges={ranges}
-            setRange={handleSetRange}
-            isRangeCorrect={isRangeCorrect}
-          />,
-        ]}
+        plugins={[appDateRangePickerFooter]}
         ref={datePickerRef}
       />
     </>

diff --git a/odd-platform-ui/src/lib/helpers.ts b/odd-platform-ui/src/lib/helpers.ts
@@ -38,8 +38,8 @@ export const stringFormatted = (
 };
 
 export const formatDate = (date: number, dateFormat: string) => format(date, dateFormat);
-export const toDate = (dateToCast: number): Date => new Date(dateToCast);
-export const toTimestamp = (dateToCast: Date): number => dateToCast.getTime();
+export const toDate = (date: number): Date => new Date(date);
+export const toTimestamp = (date: Date): number => date.getTime();
 
 export const setActivityBackgroundColor = (
   theme: Theme,