diff --git a/src/short-urls/SearchBar.tsx b/src/short-urls/SearchBar.tsx
index a6da0273..9f78f352 100644
--- a/src/short-urls/SearchBar.tsx
+++ b/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 { formatDate } from '../utils/helpers/date';
+import { DateRangeSelector } from '../utils/dates/DateRangeSelector';
+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(
- formatDate(),
- (date) => listShortUrls({ ...shortUrlsListParams, [dateName]: date }),
+ const setDates = pipe(
+ ({ startDate, endDate }: DateRange) => ({
+ startDate: formatIsoDate(startDate) ?? undefined,
+ endDate: formatIsoDate(endDate) ?? undefined,
+ }),
+ (dates) => listShortUrls({ ...shortUrlsListParams, ...dates }),
);
return (
@@ -35,11 +39,13 @@ const SearchBar = (colorGenerator: ColorGenerator) => ({ listShortUrls, shortUrl
diff --git a/src/short-urls/ShortUrlsTable.tsx b/src/short-urls/ShortUrlsTable.tsx
index c1a1fb77..55351166 100644
--- a/src/short-urls/ShortUrlsTable.tsx
+++ b/src/short-urls/ShortUrlsTable.tsx
@@ -45,7 +45,7 @@ export const ShortUrlsTable = (ShortUrlsRow: FC
) => ({
return Loading... |
;
}
- if (!loading && isEmpty(shortUrlsList)) {
+ if (!loading && isEmpty(shortUrls?.data)) {
return No results found |
;
}
diff --git a/src/utils/dates/DateRangeSelector.tsx b/src/utils/dates/DateRangeSelector.tsx
index 3cb80c3b..7fbdc7bf 100644
--- a/src/utils/dates/DateRangeSelector.tsx
+++ b/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 (
- {rangeOrIntervalToString(activeInterval ?? activeDateRange) ?? 'All visits'}
+ {rangeOrIntervalToString(activeInterval ?? activeDateRange) ?? defaultText}
- All visits
+ {defaultText}
- Today
-
- Yesterday
-
-
- Last 7 days
-
-
- Last 30 days
-
-
- Last 90 days
-
-
- Last 180 days
-
-
- Last 365 days
-
+ {([ 'today', 'yesterday', 'last7Days', 'last30Days', 'last90Days', 'last180days', 'last365Days' ] as DateInterval[]).map(
+ (interval) => (
+
+ {rangeOrIntervalToString(interval)}
+
+ ),
+ )}
Custom:
diff --git a/src/visits/VisitsStats.tsx b/src/visits/VisitsStats.tsx
index 6389fda1..9e69fa70 100644
--- a/src/visits/VisitsStats.tsx
+++ b/src/visits/VisitsStats.tsx
@@ -227,6 +227,7 @@ const VisitsStats: FC = ({ children, visitsInfo, getVisits, ca
{
setStartDate(newStartDate ?? null);
setEndDate(newEndDate ?? null);
diff --git a/test/short-urls/SearchBar.test.tsx b/test/short-urls/SearchBar.test.tsx
index dd0fd28b..f16ba98d 100644
--- a/test/short-urls/SearchBar.test.tsx
+++ b/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('', () => {
@@ -20,10 +20,10 @@ describe('', () => {
expect(wrapper.find(SearchField)).toHaveLength(1);
});
- it('renders a DateRangeRow', () => {
+ it('renders a DateRangeSelector', () => {
wrapper = shallow();
- 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('', () => {
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(
,
);
- const dateRange = wrapper.find(DateRangeRow);
+ const dateRange = wrapper.find(DateRangeSelector);
expect(listShortUrlsMock).not.toHaveBeenCalled();
- dateRange.simulate(event);
+ dateRange.simulate('datesChange', {});
expect(listShortUrlsMock).toHaveBeenCalledTimes(1);
});
});