Created section to set default date interval for visits

src/utils/dates/DateIntervalDropdownItems.tsx

@@ -0,0 +1,20 @@
+import { DropdownItem } from 'reactstrap';
+import { FC } from 'react';
+import { DATE_INTERVALS, DateInterval, rangeOrIntervalToString } from './types';
+
+export interface DateIntervalDropdownProps {
+  active?: DateInterval;
+  onChange: (interval: DateInterval) => void;
+}
+
+export const DateIntervalDropdownItems: FC<DateIntervalDropdownProps> = ({ active, onChange }) => (
+  <>
+    {DATE_INTERVALS.map(
+      (interval) => (
+        <DropdownItem key={interval} active={active === interval} onClick={() => onChange(interval)}>
+          {rangeOrIntervalToString(interval)}
+        </DropdownItem>
+      ),
+    )}
+  </>
+);

src/utils/dates/DateIntervalSelector.tsx

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { DropdownBtn } from '../DropdownBtn';
+import { rangeOrIntervalToString } from './types';
+import { DateIntervalDropdownItems, DateIntervalDropdownProps } from './DateIntervalDropdownItems';
+
+export const DateIntervalSelector: FC<DateIntervalDropdownProps> = ({ onChange, active }) => (
+  <DropdownBtn text={rangeOrIntervalToString(active) ?? ''}>
+    <DateIntervalDropdownItems active={active} onChange={onChange} />
+  </DropdownBtn>
+);

src/utils/dates/DateRangeSelector.tsx

@@ -10,6 +10,7 @@ import {
   rangeIsInterval,
 } from './types';
 import DateRangeRow from './DateRangeRow';
+import { DateIntervalDropdownItems } from './DateIntervalDropdownItems';
 
 export interface DateRangeSelectorProps {
   initialDateRange?: DateInterval | DateRange;
@@ -47,13 +48,7 @@ export const DateRangeSelector = (
         {defaultText}
       </DropdownItem>
       <DropdownItem divider />
-      {([ 'today', 'yesterday', 'last7Days', 'last30Days', 'last90Days', 'last180days', 'last365Days' ] as DateInterval[]).map(
-        (interval) => (
-          <DropdownItem key={interval} active={activeInterval === interval} onClick={updateInterval(interval)}>
-            {rangeOrIntervalToString(interval)}
-          </DropdownItem>
-        ),
-      )}
+      <DateIntervalDropdownItems active={activeInterval} onChange={(interval) => updateInterval(interval)()} />
       <DropdownItem divider />
       <DropdownItem header>Custom:</DropdownItem>
       <DropdownItem text>

src/utils/dates/types/index.ts

@@ -24,6 +24,8 @@ const INTERVAL_TO_STRING_MAP: Record<DateInterval, string> = {
   last365Days: 'Last 365 days',
 };
 
+export const DATE_INTERVALS: DateInterval[] = Object.keys(INTERVAL_TO_STRING_MAP) as DateInterval[];
+
 const dateRangeToString = (range?: DateRange): string | undefined => {
   if (!range || dateRangeIsEmpty(range)) {
     return undefined;