Merge pull request #86 from arenadata/feature/ADH-4843

ADH-4843 [UI] Set default values for DateRangePicker
arenadata · Aug 8, 2024 · eebc460 · eebc460
2 parents d80bab6 + 48746a2
commit eebc460
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/smart-frontend/app/src/components/uikit/DateRangePicker/Tabs/CalendarTab.tsx b/smart-frontend/app/src/components/uikit/DateRangePicker/Tabs/CalendarTab.tsx
@@ -17,7 +17,7 @@
  */
 import { useEffect, useState } from 'react';
 import Calendar from '@uikit/Calendar/Calendar';
-import { endOfDay, isBefore, startOfDay } from '@utils/date/calendarUtils';
+import { endOfDay, getToday, isBefore, startOfDay } from '@utils/date/calendarUtils';
 import TabActions from './TabActions';
 import ts from './Tabs.module.scss';
 import FormField from '@uikit/FormField/FormField';
@@ -32,8 +32,8 @@ interface CalendarTabProps {
 
 const CalendarTab = ({ rangeFrom, rangeTo, onApply, onRevert }: CalendarTabProps) => {
   const [localDate, setLocalDate] = useState<Date | undefined>(undefined);
-  const [localRangeFrom, setLocalRangeFrom] = useState<Date | undefined>(rangeFrom);
-  const [localRangeTo, setLocalRangeTo] = useState<Date | undefined>(rangeTo);
+  const [localRangeFrom, setLocalRangeFrom] = useState<Date | undefined>(() => rangeFrom ?? startOfDay(getToday()));
+  const [localRangeTo, setLocalRangeTo] = useState<Date | undefined>(() => rangeTo ?? endOfDay(getToday()));
 
   useEffect(() => {
     if (localRangeFrom && localRangeTo) {

diff --git a/smart-frontend/app/src/components/uikit/DateRangePicker/Tabs/RangesTab.tsx b/smart-frontend/app/src/components/uikit/DateRangePicker/Tabs/RangesTab.tsx
@@ -33,14 +33,14 @@ interface RangesTabProps {
 }
 
 const RangesTab = ({ range, onApply, onRevert, rangesPreset }: RangesTabProps) => {
-  const [selectedRangeId, setSelectedRangeId] = useState<DynamicDateRange | undefined>(range);
+  const [selectedRangeId, setSelectedRangeId] = useState<DynamicDateRange>(range ?? rangesPreset[0].id);
 
   const handleClick = (item: RangePreset) => {
     setSelectedRangeId(item.id);
   };
 
   const handleApply = () => {
-    selectedRangeId && onApply(selectedRangeId);
+    onApply(selectedRangeId);
   };
 
   return (
@@ -61,10 +61,10 @@ const RangesTab = ({ range, onApply, onRevert, rangesPreset }: RangesTabProps) =
       <div className={ts.dateRangePickerTab__right}>
         <div className={ts.dateRangePickerTab__rightInputs}>
           <FormField label="From">
-            <Input size="small" value={selectedRangeId ?? ''} readOnly />
+            <Input size="small" value={selectedRangeId} readOnly />
           </FormField>
           <FormField label="To">
-            <Input size="small" value={selectedRangeId ? 'now' : ''} readOnly disabled={!!selectedRangeId} />
+            <Input size="small" value="now" readOnly />
           </FormField>
         </div>
         <TabActions onApply={handleApply} onRevert={onRevert} />