Move date components and helpers to shlink-web-component

shlink-web-component/short-urls/ShortUrlForm.tsx

@@ -9,13 +9,13 @@ import { useEffect, useState } from 'react';
 import { Button, FormGroup, Input, Row } from 'reactstrap';
 import type { InputType } from 'reactstrap/types/lib/Input';
 import { Checkbox } from '../../src/utils/Checkbox';
-import type { DateTimeInputProps } from '../../src/utils/dates/DateTimeInput';
-import { DateTimeInput } from '../../src/utils/dates/DateTimeInput';
-import { formatIsoDate } from '../../src/utils/helpers/date';
 import { IconInput } from '../../src/utils/IconInput';
 import { SimpleCard } from '../../src/utils/SimpleCard';
 import type { DomainSelectorProps } from '../domains/DomainSelector';
 import type { TagsSelectorProps } from '../tags/helpers/TagsSelector';
+import type { DateTimeInputProps } from '../utils/dates/DateTimeInput';
+import { DateTimeInput } from '../utils/dates/DateTimeInput';
+import { formatIsoDate } from '../utils/dates/helpers/date';
 import { useFeature } from '../utils/features';
 import { handleEventPreventingDefault, hasValue } from '../utils/helpers';
 import type { DeviceLongUrls, ShortUrlData } from './data';

shlink-web-component/short-urls/ShortUrlsFilteringBar.tsx

@@ -4,14 +4,14 @@ import classNames from 'classnames';
 import { isEmpty, pipe } from 'ramda';
 import type { FC } from 'react';
 import { Button, InputGroup, Row, UncontrolledTooltip } from 'reactstrap';
-import { DateRangeSelector } from '../../src/utils/dates/DateRangeSelector';
-import { formatIsoDate } from '../../src/utils/helpers/date';
-import type { DateRange } from '../../src/utils/helpers/dateIntervals';
-import { datesToDateRange } from '../../src/utils/helpers/dateIntervals';
 import type { OrderDir } from '../../src/utils/helpers/ordering';
 import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
 import { SearchField } from '../../src/utils/SearchField';
 import type { TagsSelectorProps } from '../tags/helpers/TagsSelector';
+import { DateRangeSelector } from '../utils/dates/DateRangeSelector';
+import { formatIsoDate } from '../utils/dates/helpers/date';
+import type { DateRange } from '../utils/dates/helpers/dateIntervals';
+import { datesToDateRange } from '../utils/dates/helpers/dateIntervals';
 import { useFeature } from '../utils/features';
 import { useSetting } from '../utils/settings';
 import type { ShortUrlsOrder, ShortUrlsOrderableFields } from './data';

shlink-web-component/short-urls/helpers/ShortUrlStatus.tsx

@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { isBefore } from 'date-fns';
 import type { FC, ReactNode } from 'react';
 import { UncontrolledTooltip } from 'reactstrap';
-import { formatHumanFriendly, now, parseISO } from '../../../src/utils/helpers/date';
+import { formatHumanFriendly, now, parseISO } from '../../utils/dates/helpers/date';
 import { useElementRef } from '../../utils/helpers/hooks';
 import type { ShortUrl } from '../data';
 

shlink-web-component/short-urls/helpers/ShortUrlVisitsCount.tsx

@@ -2,7 +2,7 @@ import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import { UncontrolledTooltip } from 'reactstrap';
-import { formatHumanFriendly, parseISO } from '../../../src/utils/helpers/date';
+import { formatHumanFriendly, parseISO } from '../../utils/dates/helpers/date';
 import { useElementRef } from '../../utils/helpers/hooks';
 import { prettify } from '../../utils/helpers/numbers';
 import type { ShortUrl } from '../data';

shlink-web-component/short-urls/helpers/ShortUrlsRow.tsx

@@ -1,9 +1,9 @@
 import type { FC } from 'react';
 import { useEffect, useRef } from 'react';
 import { ExternalLink } from 'react-external-link';
-import { Time } from '../../../src/utils/dates/Time';
 import type { TimeoutToggle } from '../../../src/utils/helpers/hooks';
 import { CopyToClipboardIcon } from '../../utils/components/CopyToClipboardIcon';
+import { Time } from '../../utils/dates/Time';
 import type { ColorGenerator } from '../../utils/services/ColorGenerator';
 import { useSetting } from '../../utils/settings';
 import type { ShortUrl } from '../data';

shlink-web-component/utils/dates/DateInput.scss

@@ -0,0 +1,111 @@
+@import '../../../src/utils/mixins/vertical-align';
+@import '../../../src/utils/base';
+
+.react-datepicker__close-icon.react-datepicker__close-icon {
+  @include vertical-align();
+
+  right: 0;
+}
+
+.react-datepicker__close-icon.react-datepicker__close-icon:after {
+  right: .75rem;
+  line-height: 11px;
+  background-color: #333333;
+  font-size: 14px;
+}
+
+.react-datepicker__input-container,
+.react-datepicker-wrapper {
+  display: block !important;
+}
+
+.react-datepicker__day--keyboard-selected {
+  background-color: $mainColor;
+
+  &:hover {
+    background-color: darken($mainColor, 12%);
+  }
+}
+
+.react-datepicker__time.react-datepicker__time,
+.react-datepicker.react-datepicker {
+  background-color: var(--primary-color) !important;
+  color: var(--text-color);
+  border-color: var(--border-color);
+}
+
+.react-datepicker__header.react-datepicker__header {
+  background-color: var(--secondary-color);
+  border-color: var(--border-color);
+}
+
+.react-datepicker__current-month.react-datepicker__current-month,
+.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.react-datepicker__day:not(:hover):not(.react-datepicker__day--selected),
+.react-datepicker__time-name.react-datepicker__time-name {
+  color: inherit;
+}
+
+.react-datepicker__day--disabled.react-datepicker__day--disabled {
+  cursor: default;
+  color: var(--border-color) !important;
+}
+
+.react-datepicker__day--keyboard-selected.react-datepicker__day--keyboard-selected,
+.react-datepicker__month-text--keyboard-selected.react-datepicker__month-text--keyboard-selected,
+.react-datepicker__quarter-text--keyboard-selected.react-datepicker__quarter-text--keyboard-selected,
+.react-datepicker__year-text--keyboard-selected.react-datepicker__year-text--keyboard-selected {
+  background-color: var(--brand-color) !important;
+  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;
+
+  &[data-placement^='top'] .react-datepicker__triangle.react-datepicker__triangle {
+    &::after {
+      border-top-color: var(--primary-color);
+    }
+
+    &::before {
+      border-top-color: var(--border-color);
+    }
+  }
+
+  &[data-placement^='bottom'] .react-datepicker__triangle.react-datepicker__triangle {
+    &::after {
+      border-bottom-color: var(--secondary-color);
+    }
+
+    &::before {
+      border-bottom-color: var(--border-color);
+    }
+  }
+}

shlink-web-component/utils/dates/DateInput.tsx

@@ -0,0 +1,42 @@
+import { faCalendarAlt as calendarIcon } from '@fortawesome/free-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import { isNil } from 'ramda';
+import { useRef } from 'react';
+import type { ReactDatePickerProps } from 'react-datepicker';
+import DatePicker from 'react-datepicker';
+import { STANDARD_DATE_FORMAT } from './helpers/date';
+import './DateInput.scss';
+
+export type DateInputProps = ReactDatePickerProps;
+
+export const DateInput = (props: DateInputProps) => {
+  const { className, isClearable, selected, dateFormat } = props;
+  const showCalendarIcon = !isClearable || isNil(selected);
+  const ref = useRef<{ input: HTMLInputElement }>();
+
+  return (
+    <div className="icon-input-container">
+      <DatePicker
+        {...props}
+        popperModifiers={[
+          {
+            name: 'arrow',
+            options: { padding: 24 }, // This prevents the arrow to be placed on the very edge, which looks ugly
+          },
+        ]}
+        dateFormat={dateFormat ?? STANDARD_DATE_FORMAT}
+        className={classNames('icon-input-container__input form-control', className)}
+        // @ts-expect-error The DatePicker type definition is wrong. It has a ref prop
+        ref={ref}
+      />
+      {showCalendarIcon && (
+        <FontAwesomeIcon
+          icon={calendarIcon}
+          className="icon-input-container__icon"
+          onClick={() => ref.current?.input.focus()}
+        />
+      )}
+    </div>
+  );
+};

shlink-web-component/utils/dates/DateIntervalDropdownItems.tsx

@@ -0,0 +1,26 @@
+import type { FC } from 'react';
+import { DropdownItem } from 'reactstrap';
+import type { DateInterval } from './helpers/dateIntervals';
+import { DATE_INTERVALS, rangeOrIntervalToString } from './helpers/dateIntervals';
+
+export interface DateIntervalDropdownProps {
+  active?: DateInterval;
+  allText: string;
+  onChange: (interval: DateInterval) => void;
+}
+
+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)}>
+          {rangeOrIntervalToString(interval)}
+        </DropdownItem>
+      ),
+    )}
+  </>
+);

shlink-web-component/utils/dates/DateIntervalSelector.tsx

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import { DropdownBtn } from '../../../src/utils/DropdownBtn';
+import type { DateIntervalDropdownProps } from './DateIntervalDropdownItems';
+import { DateIntervalDropdownItems } from './DateIntervalDropdownItems';
+import { rangeOrIntervalToString } from './helpers/dateIntervals';
+
+export const DateIntervalSelector: FC<DateIntervalDropdownProps> = ({ onChange, active, allText }) => (
+  <DropdownBtn text={rangeOrIntervalToString(active) ?? allText}>
+    <DateIntervalDropdownItems allText={allText} active={active} onChange={onChange} />
+  </DropdownBtn>
+);

shlink-web-component/utils/dates/DateRangeRow.tsx

@@ -0,0 +1,37 @@
+import { endOfDay } from 'date-fns';
+import { DateInput } from './DateInput';
+import type { DateRange } from './helpers/dateIntervals';
+
+interface DateRangeRowProps extends DateRange {
+  onStartDateChange: (date: Date | null) => void;
+  onEndDateChange: (date: Date | null) => void;
+  disabled?: boolean;
+}
+
+export const DateRangeRow = (
+  { startDate = null, endDate = null, disabled = false, onStartDateChange, onEndDateChange }: DateRangeRowProps,
+) => (
+  <div className="row">
+    <div className="col-md-6">
+      <DateInput
+        selected={startDate}
+        placeholderText="Since..."
+        isClearable
+        maxDate={endDate ?? undefined}
+        disabled={disabled}
+        onChange={onStartDateChange}
+      />
+    </div>
+    <div className="col-md-6">
+      <DateInput
+        className="mt-2 mt-md-0"
+        selected={endDate}
+        placeholderText="Until..."
+        isClearable
+        minDate={startDate ?? undefined}
+        disabled={disabled}
+        onChange={(date) => onEndDateChange(date && endOfDay(date))}
+      />
+    </div>
+  </div>
+);

shlink-web-component/utils/dates/DateRangeSelector.tsx

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import { DropdownItem } from 'reactstrap';
+import { DropdownBtn } from '../../../src/utils/DropdownBtn';
+import { useEffectExceptFirstTime } from '../../../src/utils/helpers/hooks';
+import { DateIntervalDropdownItems } from './DateIntervalDropdownItems';
+import { DateRangeRow } from './DateRangeRow';
+import type {
+  DateInterval,
+  DateRange } from './helpers/dateIntervals';
+import {
+  ALL,
+  dateRangeIsEmpty,
+  intervalToDateRange,
+  rangeIsInterval,
+  rangeOrIntervalToString,
+} from './helpers/dateIntervals';
+
+export interface DateRangeSelectorProps {
+  initialDateRange?: DateInterval | DateRange;
+  disabled?: boolean;
+  onDatesChange: (dateRange: DateRange) => void;
+  defaultText: string;
+  updatable?: boolean;
+}
+
+export const DateRangeSelector = (
+  { onDatesChange, initialDateRange, defaultText, disabled, updatable = false }: DateRangeSelectorProps,
+) => {
+  const initialIntervalIsRange = rangeIsInterval(initialDateRange);
+  const [activeInterval, setActiveInterval] = useState<DateInterval | undefined>(
+    initialIntervalIsRange ? initialDateRange : undefined,
+  );
+  const [activeDateRange, setActiveDateRange] = useState(initialIntervalIsRange ? undefined : initialDateRange);
+
+  const updateDateRange = (dateRange: DateRange) => {
+    setActiveInterval(dateRangeIsEmpty(dateRange) ? ALL : undefined);
+    setActiveDateRange(dateRange);
+    onDatesChange(dateRange);
+  };
+  const updateInterval = (dateInterval: DateInterval) => {
+    setActiveInterval(dateInterval);
+    setActiveDateRange(undefined);
+    onDatesChange(intervalToDateRange(dateInterval));
+  };
+
+  updatable && useEffectExceptFirstTime(() => {
+    const isDateInterval = rangeIsInterval(initialDateRange);
+
+    isDateInterval && updateInterval(initialDateRange);
+    initialDateRange && !isDateInterval && updateDateRange(initialDateRange);
+  }, [initialDateRange]);
+
+  return (
+    <DropdownBtn disabled={disabled} text={rangeOrIntervalToString(activeInterval ?? activeDateRange) ?? defaultText}>
+      <DateIntervalDropdownItems allText={defaultText} active={activeInterval} onChange={updateInterval} />
+      <DropdownItem divider />
+      <DropdownItem header>Custom:</DropdownItem>
+      <DropdownItem text>
+        <DateRangeRow
+          {...activeDateRange}
+          onStartDateChange={(startDate) => updateDateRange({ ...activeDateRange, startDate })}
+          onEndDateChange={(endDate) => updateDateRange({ ...activeDateRange, endDate })}
+        />
+      </DropdownItem>
+    </DropdownBtn>
+  );
+};

shlink-web-component/utils/dates/DateTimeInput.tsx

@@ -0,0 +1,15 @@
+import type { FC } from 'react';
+import type { ReactDatePickerProps } from 'react-datepicker';
+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}
+  />
+);

shlink-web-component/utils/dates/Time.tsx

@@ -0,0 +1,18 @@
+import { format as formatDate, formatDistance, getUnixTime, parseISO } from 'date-fns';
+import { isDateObject, now, STANDARD_DATE_AND_TIME_FORMAT } from './helpers/date';
+
+export interface TimeProps {
+  date: Date | string;
+  format?: string;
+  relative?: boolean;
+}
+
+export const Time = ({ date, format = STANDARD_DATE_AND_TIME_FORMAT, relative = false }: TimeProps) => {
+  const dateObject = isDateObject(date) ? date : parseISO(date);
+
+  return (
+    <time dateTime={`${getUnixTime(dateObject)}000`}>
+      {relative ? `${formatDistance(now(), dateObject)} ago` : formatDate(dateObject, format)}
+    </time>
+  );
+};

shlink-web-component/utils/dates/helpers/date.ts

@@ -0,0 +1,43 @@
+import { format, formatISO, isBefore, isEqual, isWithinInterval, parse, parseISO as stdParseISO } from 'date-fns';
+import type { OptionalString } from '../../../../src/utils/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;
+
+export const now = () => new Date();
+
+export const isDateObject = (date: DateOrString): date is Date => typeof date !== 'string';
+
+const formatDateFromFormat = (date?: NullableDate, theFormat?: string): OptionalString => {
+  if (!date || !isDateObject(date)) {
+    return date;
+  }
+
+  return theFormat ? format(date, theFormat) : formatISO(date);
+};
+
+export const formatIsoDate = (date?: NullableDate) => formatDateFromFormat(date, undefined);
+
+export const formatInternational = (date?: NullableDate) => formatDateFromFormat(date, STANDARD_DATE_FORMAT);
+
+export const formatHumanFriendly = (date?: NullableDate) => formatDateFromFormat(date, STANDARD_DATE_AND_TIME_FORMAT);
+
+export const parseDate = (date: string, theFormat: string) => parse(date, theFormat, now());
+
+export const parseISO = (date: DateOrString): Date => (isDateObject(date) ? date : stdParseISO(date));
+
+export const isBetween = (date: DateOrString, start?: DateOrString, end?: DateOrString): boolean => {
+  try {
+    return isWithinInterval(parseISO(date), { start: parseISO(start ?? date), end: parseISO(end ?? date) });
+  } catch (e) {
+    return false;
+  }
+};
+
+export const isBeforeOrEqual = (date: Date | number, dateToCompare: Date | number) =>
+  isEqual(date, dateToCompare) || isBefore(date, dateToCompare);

shlink-web-component/utils/dates/helpers/dateIntervals.ts

@@ -0,0 +1,106 @@
+import { endOfDay, startOfDay, subDays } from 'date-fns';
+import { cond, filter, isEmpty, T } from 'ramda';
+import type { DateOrString } from './date';
+import { formatInternational, isBeforeOrEqual, now, parseISO } from './date';
+
+export interface DateRange {
+  startDate?: Date | null;
+  endDate?: Date | null;
+}
+
+export const ALL = 'all';
+const INTERVAL_TO_STRING_MAP = {
+  today: 'Today',
+  yesterday: 'Yesterday',
+  last7Days: 'Last 7 days',
+  last30Days: 'Last 30 days',
+  last90Days: 'Last 90 days',
+  last180Days: 'Last 180 days',
+  last365Days: 'Last 365 days',
+  [ALL]: undefined,
+};
+
+export type DateInterval = keyof typeof INTERVAL_TO_STRING_MAP;
+
+const INTERVALS = Object.keys(INTERVAL_TO_STRING_MAP) as DateInterval[];
+
+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' && INTERVALS.includes(range);
+
+export const DATE_INTERVALS = INTERVALS.filter((value) => value !== ALL) as Exclude<DateInterval, typeof ALL>[];
+
+const dateOrNull = (date?: string): Date | null => (date ? parseISO(date) : null);
+
+export const datesToDateRange = (startDate?: string, endDate?: string): DateRange => ({
+  startDate: dateOrNull(startDate),
+  endDate: dateOrNull(endDate),
+});
+
+const dateRangeToString = (range?: DateRange): string | undefined => {
+  if (!range || dateRangeIsEmpty(range)) {
+    return undefined;
+  }
+
+  if (range.startDate && !range.endDate) {
+    return `Since ${formatInternational(range.startDate)}`;
+  }
+
+  if (!range.startDate && range.endDate) {
+    return `Until ${formatInternational(range.endDate)}`;
+  }
+
+  return `${formatInternational(range.startDate)} - ${formatInternational(range.endDate)}`;
+};
+
+export const rangeOrIntervalToString = (range?: DateRange | DateInterval): string | undefined => {
+  if (!range || range === ALL) {
+    return undefined;
+  }
+
+  if (!rangeIsInterval(range)) {
+    return dateRangeToString(range);
+  }
+
+  return INTERVAL_TO_STRING_MAP[range];
+};
+
+const startOfDaysAgo = (daysAgo: number) => startOfDay(subDays(now(), daysAgo));
+const endingToday = (startDate: Date): DateRange => ({ startDate, endDate: endOfDay(now()) });
+const equals = (value: any) => (otherValue: any) => value === otherValue;
+
+export const intervalToDateRange = cond<[DateInterval | undefined], DateRange>([
+  [equals('today'), () => endingToday(startOfDay(now()))],
+  [equals('yesterday'), () => ({ startDate: startOfDaysAgo(1), endDate: endOfDay(subDays(now(), 1)) })],
+  [equals('last7Days'), () => endingToday(startOfDaysAgo(7))],
+  [equals('last30Days'), () => endingToday(startOfDaysAgo(30))],
+  [equals('last90Days'), () => endingToday(startOfDaysAgo(90))],
+  [equals('last180Days'), () => endingToday(startOfDaysAgo(180))],
+  [equals('last365Days'), () => endingToday(startOfDaysAgo(365))],
+  [T, () => ({})],
+]);
+
+export const dateToMatchingInterval = (date: DateOrString): DateInterval => {
+  const theDate = parseISO(date);
+
+  return cond<never, DateInterval>([
+    [() => isBeforeOrEqual(startOfDay(now()), theDate), () => 'today'],
+    [() => isBeforeOrEqual(startOfDaysAgo(1), theDate), () => 'yesterday'],
+    [() => isBeforeOrEqual(startOfDaysAgo(7), theDate), () => 'last7Days'],
+    [() => isBeforeOrEqual(startOfDaysAgo(30), theDate), () => 'last30Days'],
+    [() => isBeforeOrEqual(startOfDaysAgo(90), theDate), () => 'last90Days'],
+    [() => isBeforeOrEqual(startOfDaysAgo(180), theDate), () => 'last180Days'],
+    [() => isBeforeOrEqual(startOfDaysAgo(365), theDate), () => 'last365Days'],
+    [T, () => ALL],
+  ])();
+};
+
+export const toDateRange = (rangeOrInterval: DateRange | DateInterval): DateRange => {
+  if (rangeIsInterval(rangeOrInterval)) {
+    return intervalToDateRange(rangeOrInterval);
+  }
+
+  return rangeOrInterval;
+};

shlink-web-component/utils/settings.ts

@@ -1,8 +1,8 @@
 import { createContext, useContext } from 'react';
-import type { DateInterval } from '../../src/utils/helpers/dateIntervals';
 import type { Theme } from '../../src/utils/theme';
 import type { ShortUrlsOrder } from '../short-urls/data';
 import type { TagsOrder } from '../tags/data/TagsListChildrenProps';
+import type { DateInterval } from './dates/helpers/dateIntervals';
 
 export const DEFAULT_SHORT_URLS_ORDERING: ShortUrlsOrder = {
   field: 'dateCreated',

shlink-web-component/visits/ShortUrlVisitsHeader.tsx

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

shlink-web-component/visits/VisitsStats.tsx

@@ -7,14 +7,14 @@ import type { FC, PropsWithChildren } from 'react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
 import { Button, Progress, Row } from 'reactstrap';
-import { DateRangeSelector } from '../../src/utils/dates/DateRangeSelector';
-import type { DateInterval, DateRange } from '../../src/utils/helpers/dateIntervals';
-import { toDateRange } from '../../src/utils/helpers/dateIntervals';
 import { Message } from '../../src/utils/Message';
 import { NavPillItem, NavPills } from '../../src/utils/NavPills';
 import { Result } from '../../src/utils/Result';
 import { ShlinkApiError } from '../common/ShlinkApiError';
 import { ExportBtn } from '../utils/components/ExportBtn';
+import { DateRangeSelector } from '../utils/dates/DateRangeSelector';
+import type { DateInterval, DateRange } from '../utils/dates/helpers/dateIntervals';
+import { toDateRange } from '../utils/dates/helpers/dateIntervals';
 import { prettify } from '../utils/helpers/numbers';
 import { useSetting } from '../utils/settings';
 import { DoughnutChartCard } from './charts/DoughnutChartCard';

shlink-web-component/visits/VisitsTable.tsx

@@ -4,11 +4,11 @@ import classNames from 'classnames';
 import { min, splitEvery } from 'ramda';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { UncontrolledTooltip } from 'reactstrap';
-import { Time } from '../../src/utils/dates/Time';
 import type { Order } from '../../src/utils/helpers/ordering';
 import { determineOrderDir, sortList } from '../../src/utils/helpers/ordering';
 import { SearchField } from '../../src/utils/SearchField';
 import { SimplePaginator } from '../utils/components/SimplePaginator';
+import { Time } from '../utils/dates/Time';
 import { prettify } from '../utils/helpers/numbers';
 import { TableOrderIcon } from '../utils/table/TableOrderIcon';
 import type { MediaMatcher } from '../utils/types';

shlink-web-component/visits/charts/LineChartCard.tsx

@@ -23,9 +23,9 @@ import {
   DropdownToggle,
   UncontrolledDropdown,
 } from 'reactstrap';
-import { STANDARD_DATE_FORMAT } from '../../../src/utils/helpers/date';
 import { HIGHLIGHTED_COLOR, MAIN_COLOR } from '../../../src/utils/theme';
 import { ToggleSwitch } from '../../../src/utils/ToggleSwitch';
+import { formatInternational } from '../../utils/dates/helpers/date';
 import { rangeOf } from '../../utils/helpers';
 import { pointerOnHover, renderChartLabel } from '../../utils/helpers/charts';
 import { useToggle } from '../../utils/helpers/hooks';
@@ -67,10 +67,16 @@ 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, STANDARD_DATE_FORMAT),
+  // TODO Fix formatInternational return type
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  daily: (date) => formatInternational(date)!,
   weekly(date) {
-    const firstWeekDay = format(startOfISOWeek(date), STANDARD_DATE_FORMAT);
-    const lastWeekDay = format(endOfISOWeek(date), STANDARD_DATE_FORMAT);
+    // TODO Fix formatInternational return type
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const firstWeekDay = formatInternational(startOfISOWeek(date))!;
+    // TODO Fix formatInternational return type
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const lastWeekDay = formatInternational(endOfISOWeek(date))!;
 
     return `${firstWeekDay} - ${lastWeekDay}`;
   },

shlink-web-component/visits/helpers/hooks.ts

@@ -2,9 +2,9 @@ import type { DeepPartial } from '@reduxjs/toolkit';
 import { isEmpty, isNil, mergeDeepRight, pipe } from 'ramda';
 import { useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { formatIsoDate } from '../../../src/utils/helpers/date';
-import type { DateRange } from '../../../src/utils/helpers/dateIntervals';
-import { datesToDateRange } from '../../../src/utils/helpers/dateIntervals';
+import { formatIsoDate } from '../../utils/dates/helpers/date';
+import type { DateRange } from '../../utils/dates/helpers/dateIntervals';
+import { datesToDateRange } from '../../utils/dates/helpers/dateIntervals';
 import type { BooleanString } from '../../utils/helpers';
 import { parseBooleanToString } from '../../utils/helpers';
 import { parseQuery, stringifyQuery } from '../../utils/helpers/query';

shlink-web-component/visits/reducers/common.ts

@@ -1,10 +1,10 @@
 import { createAction, createSlice } from '@reduxjs/toolkit';
 import { flatten, prop, range, splitEvery } from 'ramda';
-import type { DateInterval } from '../../../src/utils/helpers/dateIntervals';
-import { dateToMatchingInterval } from '../../../src/utils/helpers/dateIntervals';
 import type { ShlinkPaginator, ShlinkVisits, ShlinkVisitsParams } from '../../api-contract';
 import { parseApiError } from '../../api-contract/utils';
 import type { RootState } from '../../container/store';
+import type { DateInterval } from '../../utils/dates/helpers/dateIntervals';
+import { dateToMatchingInterval } from '../../utils/dates/helpers/dateIntervals';
 import { createAsyncThunk } from '../../utils/redux';
 import type { CreateVisit, Visit } from '../types';
 import type { LoadVisits, VisitsInfo, VisitsLoaded } from './types';

shlink-web-component/visits/reducers/domainVisits.ts

@@ -1,6 +1,6 @@
-import { isBetween } from '../../../src/utils/helpers/date';
 import type { ShlinkApiClient } from '../../api-contract';
 import { domainMatches } from '../../short-urls/helpers';
+import { isBetween } from '../../utils/dates/helpers/date';
 import { createVisitsAsyncThunk, createVisitsReducer, lastVisitLoaderForLoader } from './common';
 import type { LoadVisits, VisitsInfo } from './types';
 

shlink-web-component/visits/reducers/nonOrphanVisits.ts

@@ -1,5 +1,5 @@
-import { isBetween } from '../../../src/utils/helpers/date';
 import type { ShlinkApiClient } from '../../api-contract';
+import { isBetween } from '../../utils/dates/helpers/date';
 import { createVisitsAsyncThunk, createVisitsReducer, lastVisitLoaderForLoader } from './common';
 import type { VisitsInfo } from './types';
 

shlink-web-component/visits/reducers/orphanVisits.ts

@@ -1,5 +1,5 @@
-import { isBetween } from '../../../src/utils/helpers/date';
 import type { ShlinkApiClient } from '../../api-contract';
+import { isBetween } from '../../utils/dates/helpers/date';
 import type { OrphanVisit, OrphanVisitType } from '../types';
 import { isOrphanVisit } from '../types/helpers';
 import { createVisitsAsyncThunk, createVisitsReducer, lastVisitLoaderForLoader } from './common';

shlink-web-component/visits/reducers/shortUrlVisits.ts

@@ -1,7 +1,7 @@
-import { isBetween } from '../../../src/utils/helpers/date';
 import type { ShlinkApiClient } from '../../api-contract';
 import type { ShortUrlIdentifier } from '../../short-urls/data';
 import { shortUrlMatches } from '../../short-urls/helpers';
+import { isBetween } from '../../utils/dates/helpers/date';
 import { createVisitsAsyncThunk, createVisitsReducer, lastVisitLoaderForLoader } from './common';
 import type { LoadVisits, VisitsInfo } from './types';
 

shlink-web-component/visits/reducers/tagVisits.ts

@@ -1,5 +1,5 @@
-import { isBetween } from '../../../src/utils/helpers/date';
 import type { ShlinkApiClient } from '../../api-contract';
+import { isBetween } from '../../utils/dates/helpers/date';
 import { createVisitsAsyncThunk, createVisitsReducer, lastVisitLoaderForLoader } from './common';
 import type { LoadVisits, VisitsInfo } from './types';
 

shlink-web-component/visits/reducers/types/index.ts

@@ -1,5 +1,5 @@
-import type { DateInterval } from '../../../../src/utils/helpers/dateIntervals';
 import type { ProblemDetailsError, ShlinkVisitsParams } from '../../../api-contract';
+import type { DateInterval } from '../../../utils/dates/helpers/dateIntervals';
 import type { Visit } from '../../types';
 
 export interface VisitsInfo {

shlink-web-component/visits/types/helpers.ts

@@ -1,6 +1,6 @@
 import { countBy, groupBy, pipe, prop } from 'ramda';
 import type { ShlinkVisitsParams } from '../../../api/types';
-import { formatIsoDate } from '../../../src/utils/helpers/date';
+import { formatIsoDate } from '../../utils/dates/helpers/date';
 import type { CreateVisit, NormalizedOrphanVisit, NormalizedVisit, OrphanVisit, Stats, Visit, VisitsParams } from './index';
 
 export const isOrphanVisit = (visit: Visit): visit is OrphanVisit => (visit as OrphanVisit).visitedUrl !== undefined;

shlink-web-component/visits/types/index.ts

@@ -1,5 +1,5 @@
-import type { DateRange } from '../../../src/utils/helpers/dateIntervals';
 import type { ShortUrl } from '../../short-urls/data';
+import type { DateRange } from '../../utils/dates/helpers/dateIntervals';
 
 export type OrphanVisitType = 'base_url' | 'invalid_short_url' | 'regular_404';