Allowed to select 'all' as the default interval for visits

src/utils/dates/DateIntervalDropdownItems.tsx

@@ -4,11 +4,16 @@ import { DATE_INTERVALS, DateInterval, rangeOrIntervalToString } from './types';
 
 export interface DateIntervalDropdownProps {
   active?: DateInterval;
+  allText: string;
   onChange: (interval: DateInterval) => void;
 }
 
-export const DateIntervalDropdownItems: FC<DateIntervalDropdownProps> = ({ active, onChange }) => (
+export const DateIntervalDropdownItems: FC<DateIntervalDropdownProps> = ({ active, allText, onChange }) => (
   <>
+    <DropdownItem active={active === 'all'} onClick={() => onChange('all')}>
+      {allText}
+    </DropdownItem>
+    <DropdownItem divider />
     {DATE_INTERVALS.map(
       (interval) => (
         <DropdownItem key={interval} active={active === interval} onClick={() => onChange(interval)}>

src/utils/dates/DateIntervalSelector.tsx

@@ -3,8 +3,8 @@ 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} />
+export const DateIntervalSelector: FC<DateIntervalDropdownProps> = ({ onChange, active, allText }) => (
+  <DropdownBtn text={rangeOrIntervalToString(active) ?? allText}>
+    <DateIntervalDropdownItems allText={allText} active={active} onChange={onChange} />
   </DropdownBtn>
 );

src/utils/dates/DateRangeSelector.tsx

@@ -4,10 +4,10 @@ import { DropdownBtn } from '../DropdownBtn';
 import {
   DateInterval,
   DateRange,
-  dateRangeIsEmpty,
   rangeOrIntervalToString,
   intervalToDateRange,
   rangeIsInterval,
+  dateRangeIsEmpty,
 } from './types';
 import DateRangeRow from './DateRangeRow';
 import { DateIntervalDropdownItems } from './DateIntervalDropdownItems';
@@ -33,7 +33,7 @@ export const DateRangeSelector = (
     setActiveDateRange(dateRange);
     onDatesChange(dateRange);
   };
-  const updateInterval = (dateInterval?: DateInterval) => () => {
+  const updateInterval = (dateInterval: DateInterval) => () => {
     setActiveInterval(dateInterval);
     setActiveDateRange(undefined);
     onDatesChange(intervalToDateRange(dateInterval));
@@ -41,14 +41,11 @@ export const DateRangeSelector = (
 
   return (
     <DropdownBtn disabled={disabled} text={rangeOrIntervalToString(activeInterval ?? activeDateRange) ?? defaultText}>
-      <DropdownItem
-        active={activeInterval === undefined && dateRangeIsEmpty(activeDateRange)}
-        onClick={updateInterval(undefined)}
-      >
-        {defaultText}
-      </DropdownItem>
-      <DropdownItem divider />
-      <DateIntervalDropdownItems active={activeInterval} onChange={(interval) => updateInterval(interval)()} />
+      <DateIntervalDropdownItems
+        allText={defaultText}
+        active={!dateRangeIsEmpty(activeDateRange) ? undefined : activeInterval}
+        onChange={(interval) => updateInterval(interval)()}
+      />
       <DropdownItem divider />
       <DropdownItem header>Custom:</DropdownItem>
       <DropdownItem text>

src/utils/dates/types/index.ts

@@ -7,14 +7,15 @@ export interface DateRange {
   endDate?: Date | null;
 }
 
-export type DateInterval = 'today' | 'yesterday' | 'last7Days' | 'last30Days' | 'last90Days' | 'last180days' | 'last365Days';
+export type DateInterval = 'all' | 'today' | 'yesterday' | 'last7Days' | 'last30Days' | 'last90Days' | 'last180days' | 'last365Days';
 
 export const dateRangeIsEmpty = (dateRange?: DateRange): boolean => dateRange === undefined
   || isEmpty(filter(Boolean, dateRange as any));
 
-export const rangeIsInterval = (range?: DateRange | DateInterval): range is DateInterval => typeof range === 'string';
+export const rangeIsInterval = (range?: DateRange | DateInterval): range is DateInterval =>
+  typeof range === 'string';
 
-const INTERVAL_TO_STRING_MAP: Record<DateInterval, string> = {
+const INTERVAL_TO_STRING_MAP: Record<DateInterval, string | undefined> = {
   today: 'Today',
   yesterday: 'Yesterday',
   last7Days: 'Last 7 days',
@@ -22,9 +23,10 @@ const INTERVAL_TO_STRING_MAP: Record<DateInterval, string> = {
   last90Days: 'Last 90 days',
   last180days: 'Last 180 days',
   last365Days: 'Last 365 days',
+  all: undefined,
 };
 
-export const DATE_INTERVALS: DateInterval[] = Object.keys(INTERVAL_TO_STRING_MAP) as DateInterval[];
+export const DATE_INTERVALS = Object.keys(INTERVAL_TO_STRING_MAP).filter((value) => value !== 'all') as DateInterval[];
 
 const dateRangeToString = (range?: DateRange): string | undefined => {
   if (!range || dateRangeIsEmpty(range)) {
@@ -43,7 +45,7 @@ const dateRangeToString = (range?: DateRange): string | undefined => {
 };
 
 export const rangeOrIntervalToString = (range?: DateRange | DateInterval): string | undefined => {
-  if (!range) {
+  if (!range || range === 'all') {
     return undefined;
   }
 
@@ -58,7 +60,7 @@ const startOfDaysAgo = (daysAgo: number) => startOfDay(subDays(new Date(), daysA
 const endingToday = (startDate: Date): DateRange => ({ startDate, endDate: endOfDay(new Date()) });
 
 export const intervalToDateRange = (dateInterval?: DateInterval): DateRange => {
-  if (!dateInterval) {
+  if (!dateInterval || dateInterval === 'all') {
     return {};
   }