Merge pull request #720 from acelaya-forks/feature/limit-time

Feature/limit time

CHANGELOG.md

@@ -7,6 +7,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ## [Unreleased]
 ### Added
 * [#708](https://github.com/shlinkio/shlink-web-client/issues/708) Added support for API v3.
+* [#717](https://github.com/shlinkio/shlink-web-client/issues/717) Allowed to select time in 10 minute intervals whe configuring "enabled since" and "enabled until" on short URLs.
 
 ### Changed
 * [#713](https://github.com/shlinkio/shlink-web-client/issues/713) Updated dependencies.

src/short-urls/ShortUrlForm.tsx

@@ -3,7 +3,7 @@ import { InputType } from 'reactstrap/types/lib/Input';
 import { Button, FormGroup, Input, Row } from 'reactstrap';
 import { cond, isEmpty, pipe, replace, trim, T } from 'ramda';
 import { parseISO } from 'date-fns';
-import { DateInput, DateInputProps } from '../utils/DateInput';
+import { DateTimeInput, DateTimeInputProps } from '../utils/dates/DateTimeInput';
 import { supportsCrawlableVisits, supportsForwardQuery } from '../utils/helpers/features';
 import { SimpleCard } from '../utils/SimpleCard';
 import { handleEventPreventingDefault, hasValue, OptionalString } from '../utils/utils';
@@ -83,8 +83,8 @@ export const ShortUrlForm = (
       />
     </FormGroup>
   );
-  const renderDateInput = (id: DateFields, placeholder: string, props: Partial<DateInputProps> = {}) => (
+  const renderDateInput = (id: DateFields, placeholder: string, props: Partial<DateTimeInputProps> = {}) => (
-    <DateInput
+    <DateTimeInput
       selected={shortUrlData[id] ? toDate(shortUrlData[id] as string | Date) : null}
       placeholderText={placeholder}
       isClearable

src/short-urls/helpers/ShortUrlsRow.tsx

@@ -7,7 +7,7 @@ import { Tag } from '../../tags/helpers/Tag';
 import { SelectedServer } from '../../servers/data';
 import { CopyToClipboardIcon } from '../../utils/CopyToClipboardIcon';
 import { ShortUrl } from '../data';
-import { Time } from '../../utils/Time';
+import { Time } from '../../utils/dates/Time';
 import { ShortUrlVisitsCount } from './ShortUrlVisitsCount';
 import { ShortUrlsRowMenuProps } from './ShortUrlsRowMenu';
 import './ShortUrlsRow.scss';

src/utils/dates/DateInput.scss

@@ -1,5 +1,5 @@
-@import './mixins/vertical-align';
+@import '../mixins/vertical-align';
-@import './base';
+@import '../base';
 
 .date-input-container {
   position: relative;
@@ -51,8 +51,9 @@
   }
 }
 
+.react-datepicker__time.react-datepicker__time,
 .react-datepicker.react-datepicker {
-  background-color: var(--primary-color);
+  background-color: var(--primary-color) !important;
   color: var(--text-color);
   border-color: var(--border-color);
 }
@@ -66,7 +67,7 @@
 .react-datepicker-time__header.react-datepicker-time__header,
 .react-datepicker-year-header.react-datepicker-year-header,
 .react-datepicker__day-name.react-datepicker__day-name,
-.react-datepicker__day:not(:hover).react-datepicker__day:not(:hover),
+.react-datepicker__day.react-datepicker__day:not(:hover):not(.react-datepicker__day--selected),
 .react-datepicker__time-name.react-datepicker__time-name {
   color: inherit;
 }
@@ -84,6 +85,31 @@
   color: white !important;
 }
 
+.react-datepicker__time-list-item.react-datepicker__time-list-item:hover {
+  color: #232323;
+}
+
+.react-datepicker__time-container.react-datepicker__time-container {
+  border-color: var(--border-color);
+}
+
+.react-datepicker__time-list.react-datepicker__time-list {
+  /* Forefox scrollbar */
+  scrollbar-color: rgba(0, 0, 0, 0.5) var(--secondary-color);
+  scrollbar-width: thin;
+
+  /* Chrome webkit scrollbar */
+  &::-webkit-scrollbar {
+    width: 10px;
+    background-color: var(--secondary-color);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 0.5rem;
+  }
+}
+
 .react-datepicker-popper.react-datepicker-popper {
   z-index: 2;
 

src/utils/dates/DateInput.tsx

@@ -4,12 +4,13 @@ import DatePicker, { ReactDatePickerProps } from 'react-datepicker';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCalendarAlt as calendarIcon } from '@fortawesome/free-regular-svg-icons';
 import classNames from 'classnames';
+import { STANDARD_DATE_FORMAT } from '../helpers/date';
 import './DateInput.scss';
 
 export type DateInputProps = ReactDatePickerProps;
 
 export const DateInput = (props: DateInputProps) => {
-  const { className, isClearable, selected } = props;
+  const { className, isClearable, selected, dateFormat } = props;
   const showCalendarIcon = !isClearable || isNil(selected);
   const ref = useRef<{ input: HTMLInputElement }>();
 
@@ -23,7 +24,7 @@ export const DateInput = (props: DateInputProps) => {
             options: { padding: 24 }, // This prevents the arrow to be placed on the very edge, which looks ugly
           },
         ]}
-        dateFormat="yyyy-MM-dd"
+        dateFormat={dateFormat ?? STANDARD_DATE_FORMAT}
         className={classNames('date-input-container__input form-control', className)}
         // @ts-expect-error The DatePicker type definition is wrong. It has a ref prop
         ref={ref}

src/utils/dates/DateRangeRow.tsx

@@ -1,5 +1,5 @@
 import { endOfDay } from 'date-fns';
-import { DateInput } from '../DateInput';
+import { DateInput } from './DateInput';
 import { DateRange } from './types';
 
 interface DateRangeRowProps extends DateRange {

src/utils/dates/DateTimeInput.tsx

@@ -0,0 +1,15 @@
+import { ReactDatePickerProps } from 'react-datepicker';
+import { FC } from 'react';
+import { DateInput } from './DateInput';
+import { STANDARD_DATE_AND_TIME_FORMAT } from '../helpers/date';
+
+export type DateTimeInputProps = Omit<ReactDatePickerProps, 'showTimeSelect' | 'dateFormat' | 'timeIntervals'>;
+
+export const DateTimeInput: FC<DateTimeInputProps> = (props) => (
+  <DateInput
+    {...props}
+    dateFormat={STANDARD_DATE_AND_TIME_FORMAT}
+    showTimeSelect
+    timeIntervals={10}
+  />
+);

src/utils/dates/Time.tsx

@@ -1,5 +1,5 @@
 import { parseISO, format as formatDate, getUnixTime, formatDistance } from 'date-fns';
-import { isDateObject } from './helpers/date';
+import { isDateObject, STANDARD_DATE_AND_TIME_FORMAT } from '../helpers/date';
 
 export interface TimeProps {
   date: Date | string;
@@ -7,7 +7,7 @@ export interface TimeProps {
   relative?: boolean;
 }
 
-export const Time = ({ date, format = 'yyyy-MM-dd HH:mm', relative = false }: TimeProps) => {
+export const Time = ({ date, format = STANDARD_DATE_AND_TIME_FORMAT, relative = false }: TimeProps) => {
   const dateObject = isDateObject(date) ? date : parseISO(date);
 
   return (

src/utils/helpers/date.ts

@@ -1,6 +1,10 @@
 import { format, formatISO, isBefore, isEqual, isWithinInterval, parse, parseISO as stdParseISO } from 'date-fns';
 import { OptionalString } from '../utils';
 
+export const STANDARD_DATE_FORMAT = 'yyyy-MM-dd';
+
+export const STANDARD_DATE_AND_TIME_FORMAT = 'yyyy-MM-dd HH:mm';
+
 export type DateOrString = Date | string;
 
 type NullableDate = DateOrString | null;
@@ -15,7 +19,10 @@ const formatDateFromFormat = (date?: NullableDate, theFormat?: string): Optional
   return theFormat ? format(date, theFormat) : formatISO(date);
 };
 
-export const formatDate = (theFormat = 'yyyy-MM-dd') => (date?: NullableDate) => formatDateFromFormat(date, theFormat);
+export const formatDate = (theFormat = STANDARD_DATE_FORMAT) => (date?: NullableDate) => formatDateFromFormat(
+  date,
+  theFormat,
+);
 
 export const formatIsoDate = (date?: NullableDate) => formatDateFromFormat(date, undefined);
 

src/visits/ShortUrlVisitsHeader.tsx

@@ -1,7 +1,7 @@
 import { UncontrolledTooltip } from 'reactstrap';
 import { ExternalLink } from 'react-external-link';
 import { ShortUrlDetail } from '../short-urls/reducers/shortUrlDetail';
-import { Time } from '../utils/Time';
+import { Time } from '../utils/dates/Time';
 import { ShortUrlVisits } from './reducers/shortUrlVisits';
 import { VisitsHeader } from './VisitsHeader';
 import './ShortUrlVisitsHeader.scss';

src/visits/VisitsTable.tsx

@@ -10,7 +10,7 @@ import { determineOrderDir, Order, sortList } from '../utils/helpers/ordering';
 import { prettify } from '../utils/helpers/numbers';
 import { supportsBotVisits } from '../utils/helpers/features';
 import { SelectedServer } from '../servers/data';
-import { Time } from '../utils/Time';
+import { Time } from '../utils/dates/Time';
 import { TableOrderIcon } from '../utils/table/TableOrderIcon';
 import { MediaMatcher } from '../utils/types';
 import { NormalizedOrphanVisit, NormalizedVisit } from './types';

src/visits/charts/LineChartCard.tsx

@@ -31,6 +31,7 @@ import { prettify } from '../../utils/helpers/numbers';
 import { pointerOnHover, renderChartLabel } from '../../utils/helpers/charts';
 import { HIGHLIGHTED_COLOR, MAIN_COLOR } from '../../utils/theme';
 import './LineChartCard.scss';
+import { STANDARD_DATE_FORMAT } from '../../utils/helpers/date';
 
 interface LineChartCardProps {
   title: string;
@@ -65,10 +66,10 @@ const STEP_TO_DIFF_FUNC_MAP: Record<Step, (dateLeft: Date, dateRight: Date) => n
 
 const STEP_TO_DATE_FORMAT: Record<Step, (date: Date) => string> = {
   hourly: (date) => format(date, 'yyyy-MM-dd HH:00'),
-  daily: (date) => format(date, 'yyyy-MM-dd'),
+  daily: (date) => format(date, STANDARD_DATE_FORMAT),
   weekly(date) {
-    const firstWeekDay = format(startOfISOWeek(date), 'yyyy-MM-dd');
+    const firstWeekDay = format(startOfISOWeek(date), STANDARD_DATE_FORMAT);
-    const lastWeekDay = format(endOfISOWeek(date), 'yyyy-MM-dd');
+    const lastWeekDay = format(endOfISOWeek(date), STANDARD_DATE_FORMAT);
 
     return `${firstWeekDay} - ${lastWeekDay}`;
   },

test/utils/dates/DateInput.test.tsx

@@ -1,7 +1,8 @@
 import { screen, waitFor } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
-import { DateInput, DateInputProps } from '../../src/utils/DateInput';
+import { parseISO } from 'date-fns';
-import { renderWithEvents } from '../__helpers__/setUpTest';
+import { DateInput, DateInputProps } from '../../../src/utils/dates/DateInput';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
 
 describe('<DateInput />', () => {
   const setUp = (props: Partial<DateInputProps> = {}) => renderWithEvents(
@@ -30,4 +31,14 @@ describe('<DateInput />', () => {
     await user.click(screen.getByPlaceholderText('foo'));
     await waitFor(() => expect(container.querySelector('.react-datepicker')).toBeInTheDocument());
   });
+
+  it.each([
+    [undefined, '2022-01-01'],
+    ['yyyy-MM-dd', '2022-01-01'],
+    ['yyyy-MM-dd HH:mm', '2022-01-01 15:18'],
+    ['HH:mm:ss', '15:18:36'],
+  ])('shows date in expected format', (dateFormat, expectedValue) => {
+    setUp({ placeholderText: 'foo', selected: parseISO('2022-01-01T15:18:36'), dateFormat });
+    expect(screen.getByPlaceholderText('foo')).toHaveValue(expectedValue);
+  });
 });

test/utils/dates/Time.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
-import { TimeProps, Time } from '../../src/utils/Time';
+import { TimeProps, Time } from '../../../src/utils/dates/Time';
-import { parseDate } from '../../src/utils/helpers/date';
+import { parseDate } from '../../../src/utils/helpers/date';
 
 describe('<Time />', () => {
   const setUp = (props: TimeProps) => render(<Time {...props} />);