From 61a1087d9138f4ac52e7191eaeebc0232b155212 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Mon, 14 Dec 2020 23:35:31 +0100 Subject: [PATCH] Added date range selector to short URLs list --- src/short-urls/SearchBar.tsx | 26 ++++++++++++-------- src/short-urls/ShortUrlsTable.tsx | 2 +- src/utils/dates/DateRangeSelector.tsx | 35 ++++++++++----------------- src/visits/VisitsStats.tsx | 1 + test/short-urls/SearchBar.test.tsx | 12 ++++----- 5 files changed, 37 insertions(+), 39 deletions(-) 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); }); });