Added date range selector to short URLs list

src/short-urls/SearchBar.tsx

@@ -4,9 +4,10 @@ import { isEmpty, pipe } from 'ramda';
 import moment from 'moment';
 import SearchField from '../utils/SearchField';
 import Tag from '../tags/helpers/Tag';
-import DateRangeRow from '../utils/dates/DateRangeRow';
+import { DateRangeSelector } from '../utils/dates/DateRangeSelector';
-import { formatDate } from '../utils/helpers/date';
+import { formatIsoDate } from '../utils/helpers/date';
 import ColorGenerator from '../utils/services/ColorGenerator';
+import { DateRange } from '../utils/dates/types';
 import { ShortUrlsListParams } from './reducers/shortUrlsListParams';
 import './SearchBar.scss';
 
@@ -19,9 +20,12 @@ const dateOrNull = (date?: string) => date ? moment(date) : null;
 
 const SearchBar = (colorGenerator: ColorGenerator) => ({ listShortUrls, shortUrlsListParams }: SearchBarProps) => {
   const selectedTags = shortUrlsListParams.tags ?? [];
-  const setDate = (dateName: 'startDate' | 'endDate') => pipe(
+  const setDates = pipe(
-    formatDate(),
+    ({ startDate, endDate }: DateRange) => ({
-    (date) => listShortUrls({ ...shortUrlsListParams, [dateName]: date }),
+      startDate: formatIsoDate(startDate) ?? undefined,
+      endDate: formatIsoDate(endDate) ?? undefined,
+    }),
+    (dates) => listShortUrls({ ...shortUrlsListParams, ...dates }),
   );
 
   return (
@@ -35,11 +39,13 @@ const SearchBar = (colorGenerator: ColorGenerator) => ({ listShortUrls, shortUrl
       <div className="mt-3">
         <div className="row">
           <div className="col-lg-8 offset-lg-4 col-xl-6 offset-xl-6">
-            <DateRangeRow
+            <DateRangeSelector
-              startDate={dateOrNull(shortUrlsListParams.startDate)}
+              defaultText="All short URLs"
-              endDate={dateOrNull(shortUrlsListParams.endDate)}
+              initialDateRange={{
-              onStartDateChange={setDate('startDate')}
+                startDate: dateOrNull(shortUrlsListParams.startDate),
-              onEndDateChange={setDate('endDate')}
+                endDate: dateOrNull(shortUrlsListParams.endDate),
+              }}
+              onDatesChange={setDates}
             />
           </div>
         </div>

src/short-urls/ShortUrlsTable.tsx

@@ -45,7 +45,7 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
       return <tr><td colSpan={6} className="text-center">Loading...</td></tr>;
     }
 
-    if (!loading && isEmpty(shortUrlsList)) {
+    if (!loading && isEmpty(shortUrls?.data)) {
       return <tr><td colSpan={6} className="text-center">No results found</td></tr>;
     }
 

src/utils/dates/DateRangeSelector.tsx

@@ -16,9 +16,12 @@ export interface DateRangeSelectorProps {
   initialDateRange?: DateInterval | DateRange;
   disabled?: boolean;
   onDatesChange: (dateRange: DateRange) => void;
+  defaultText: string;
 }
 
-export const DateRangeSelector = ({ onDatesChange, initialDateRange, disabled = false }: DateRangeSelectorProps) => {
+export const DateRangeSelector = (
+  { onDatesChange, initialDateRange, defaultText, disabled = false }: DateRangeSelectorProps,
+) => {
   const [ isOpen, toggle ] = useToggle();
   const [ activeInterval, setActiveInterval ] = useState(
     rangeIsInterval(initialDateRange) ? initialDateRange : undefined,
@@ -40,35 +43,23 @@ export const DateRangeSelector = ({ onDatesChange, initialDateRange, disabled =
   return (
     <Dropdown isOpen={isOpen} toggle={toggle} disabled={disabled}>
       <DropdownToggle caret className="date-range-selector__btn btn-block" color="primary">
-        {rangeOrIntervalToString(activeInterval ?? activeDateRange) ?? 'All visits'}
+        {rangeOrIntervalToString(activeInterval ?? activeDateRange) ?? defaultText}
       </DropdownToggle>
       <DropdownMenu className="w-100">
         <DropdownItem
           active={activeInterval === undefined && dateRangeIsEmpty(activeDateRange)}
           onClick={updateInterval(undefined)}
         >
-          All visits
+          {defaultText}
         </DropdownItem>
         <DropdownItem divider />
-        <DropdownItem active={activeInterval === 'today'} onClick={updateInterval('today')}>Today</DropdownItem>
+        {([ 'today', 'yesterday', 'last7Days', 'last30Days', 'last90Days', 'last180days', 'last365Days' ] as DateInterval[]).map(
-        <DropdownItem active={activeInterval === 'yesterday'} onClick={updateInterval('yesterday')}>
+          (interval) => (
-          Yesterday
+            <DropdownItem key={interval} active={activeInterval === interval} onClick={updateInterval(interval)}>
-        </DropdownItem>
+              {rangeOrIntervalToString(interval)}
-        <DropdownItem active={activeInterval === 'last7Days'} onClick={updateInterval('last7Days')}>
-          Last 7 days
-        </DropdownItem>
-        <DropdownItem active={activeInterval === 'last30Days'} onClick={updateInterval('last30Days')}>
-          Last 30 days
-        </DropdownItem>
-        <DropdownItem active={activeInterval === 'last90Days'} onClick={updateInterval('last90Days')}>
-          Last 90 days
-        </DropdownItem>
-        <DropdownItem active={activeInterval === 'last180days'} onClick={updateInterval('last180days')}>
-          Last 180 days
-        </DropdownItem>
-        <DropdownItem active={activeInterval === 'last365Days'} onClick={updateInterval('last365Days')}>
-          Last 365 days
             </DropdownItem>
+          ),
+        )}
         <DropdownItem divider />
         <DropdownItem header>Custom:</DropdownItem>
         <DropdownItem text>

src/visits/VisitsStats.tsx

@@ -227,6 +227,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, ca
           <div className="col-lg-7 col-xl-6">
             <DateRangeSelector
               disabled={loading}
+              defaultText="All visits"
               onDatesChange={({ startDate: newStartDate, endDate: newEndDate }) => {
                 setStartDate(newStartDate ?? null);
                 setEndDate(newEndDate ?? null);

test/short-urls/SearchBar.test.tsx

@@ -3,7 +3,7 @@ import { Mock } from 'ts-mockery';
 import searchBarCreator from '../../src/short-urls/SearchBar';
 import SearchField from '../../src/utils/SearchField';
 import Tag from '../../src/tags/helpers/Tag';
-import DateRangeRow from '../../src/utils/dates/DateRangeRow';
+import { DateRangeSelector } from '../../src/utils/dates/DateRangeSelector';
 import ColorGenerator from '../../src/utils/services/ColorGenerator';
 
 describe('<SearchBar />', () => {
@@ -20,10 +20,10 @@ describe('<SearchBar />', () => {
     expect(wrapper.find(SearchField)).toHaveLength(1);
   });
 
-  it('renders a DateRangeRow', () => {
+  it('renders a DateRangeSelector', () => {
     wrapper = shallow(<SearchBar shortUrlsListParams={{}} listShortUrls={listShortUrlsMock} />);
 
-    expect(wrapper.find(DateRangeRow)).toHaveLength(1);
+    expect(wrapper.find(DateRangeSelector)).toHaveLength(1);
   });
 
   it('renders no tags when the list of tags is empty', () => {
@@ -60,14 +60,14 @@ describe('<SearchBar />', () => {
     expect(listShortUrlsMock).toHaveBeenCalledTimes(1);
   });
 
-  it.each([ 'startDateChange', 'endDateChange' ])('updates short URLs list when date range changes', (event) => {
+  it('updates short URLs list when date range changes', () => {
     wrapper = shallow(
       <SearchBar shortUrlsListParams={{}} listShortUrls={listShortUrlsMock} />,
     );
-    const dateRange = wrapper.find(DateRangeRow);
+    const dateRange = wrapper.find(DateRangeSelector);
 
     expect(listShortUrlsMock).not.toHaveBeenCalled();
-    dateRange.simulate(event);
+    dateRange.simulate('datesChange', {});
     expect(listShortUrlsMock).toHaveBeenCalledTimes(1);
   });
 });