Move more non-shared components to shlink-web-component

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

@@ -9,10 +9,10 @@ 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 { 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 { IconInput } from '../utils/components/IconInput';
 import type { DateTimeInputProps } from '../utils/dates/DateTimeInput';
 import { DateTimeInput } from '../utils/dates/DateTimeInput';
 import { formatIsoDate } from '../utils/dates/helpers/date';

shlink-web-component/short-urls/helpers/hooks.ts

@@ -1,5 +1,5 @@
 import { isEmpty, pipe } from 'ramda';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { orderToString, stringToOrder } from '../../../src/utils/helpers/ordering';
 import type { TagsFilteringMode } from '../../api-contract';
@@ -57,7 +57,7 @@ export const useShortUrlsQuery = (): [ShortUrlsFiltering, ToFirstPage] => {
     ),
     [search],
   );
-  const toFirstPageWithExtra = (extra: Partial<ShortUrlsFiltering>) => {
+  const toFirstPageWithExtra = useCallback((extra: Partial<ShortUrlsFiltering>) => {
     const merged = { ...filtering, ...extra };
     const { orderBy, tags, excludeBots, excludeMaxVisitsReached, excludePastValidUntil, ...mergedFiltering } = merged;
     const query: ShortUrlsQuery = {
@@ -72,7 +72,7 @@ export const useShortUrlsQuery = (): [ShortUrlsFiltering, ToFirstPage] => {
     const queryString = isEmpty(stringifiedQuery) ? '' : `?${stringifiedQuery}`;
 
     navigate(`${routesPrefix}/list-short-urls/1${queryString}`);
-  };
+  }, [filtering, navigate, routesPrefix]);
 
   return [filtering, toFirstPageWithExtra];
 };

shlink-web-component/utils/components/IconInput.scss

@@ -0,0 +1,26 @@
+@import '../../../src/utils/mixins/vertical-align';
+@import '../../../src/utils/base';
+
+.icon-input-container {
+  position: relative;
+}
+
+.icon-input-container__input {
+  padding-right: 35px !important;
+}
+
+.icon-input-container__input:not(:disabled) {
+  background-color: var(--primary-color) !important;
+}
+
+.card .icon-input-container__input:not(:disabled),
+.dropdown .icon-input-container__input:not(:disabled) {
+  background-color: var(--input-color) !important;
+}
+
+.icon-input-container__icon {
+  @include vertical-align();
+
+  right: .75rem;
+  cursor: pointer;
+}

shlink-web-component/utils/components/IconInput.tsx

@@ -0,0 +1,29 @@
+import type { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import type { FC } from 'react';
+import type { InputProps } from 'reactstrap';
+import { Input } from 'reactstrap';
+import { useElementRef } from '../../../src/utils/helpers/hooks';
+import './IconInput.scss';
+
+type IconInputProps = InputProps & {
+  icon: IconProp;
+};
+
+export const IconInput: FC<IconInputProps> = ({ icon, className, ...rest }) => {
+  const ref = useElementRef<HTMLInputElement>();
+  const classes = classNames('icon-input-container__input', className);
+
+  return (
+    <div className="icon-input-container">
+      <Input className={classes} innerRef={ref} {...rest} />
+      <FontAwesomeIcon
+        icon={icon}
+        fixedWidth
+        className="icon-input-container__icon"
+        onClick={() => ref.current?.focus()}
+      />
+    </div>
+  );
+};

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

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { DropdownItem } from 'reactstrap';
 import { DropdownBtn } from '../../../src/utils/DropdownBtn';
-import { useEffectExceptFirstTime } from '../../../src/utils/helpers/hooks';
+import { useEffectExceptFirstTime } from '../helpers/hooks';
 import { DateIntervalDropdownItems } from './DateIntervalDropdownItems';
 import { DateRangeRow } from './DateRangeRow';
 import type {

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

@@ -1,5 +1,4 @@
 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';
 
@@ -13,7 +12,7 @@ export const now = () => new Date();
 
 export const isDateObject = (date: DateOrString): date is Date => typeof date !== 'string';
 
-const formatDateFromFormat = (date?: NullableDate, theFormat?: string): OptionalString => {
+const formatDateFromFormat = (date?: NullableDate, theFormat?: string): string | null | undefined => {
   if (!date || !isDateObject(date)) {
     return date;
   }

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

@@ -1,6 +1,6 @@
 import type { DependencyList, EffectCallback } from 'react';
 import { useEffect, useRef, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { useSwipeable as useReactSwipeable } from 'react-swipeable';
 import { v4 as uuid } from 'uuid';
 import { parseQuery, stringifyQuery } from './query';
@@ -28,13 +28,6 @@ export const useTimeoutToggle = (
   return [flag, callback];
 };
 
-type ToggleResult = [boolean, () => void, () => void, () => void];
-
-export const useToggle = (initialValue = false): ToggleResult => {
-  const [flag, setFlag] = useState<boolean>(initialValue);
-  return [flag, () => setFlag(!flag), () => setFlag(true), () => setFlag(false)];
-};
-
 export const useSwipeable = (showSidebar: () => void, hideSidebar: () => void) => {
   const swipeMenuIfNoModalExists = (callback: () => void) => (e: any) => {
     const swippedOnVisitsTable = (e.event.composedPath() as HTMLElement[]).some(
@@ -83,9 +76,11 @@ export const useGoBack = () => {
   return () => navigate(-1);
 };
 
-export const useParsedQuery = <T>(): T => {
-  const { search } = useLocation();
-  return parseQuery<T>(search);
+type ToggleResult = [boolean, () => void, () => void, () => void];
+
+export const useToggle = (initialValue = false): ToggleResult => {
+  const [flag, setFlag] = useState<boolean>(initialValue);
+  return [flag, () => setFlag(!flag), () => setFlag(true), () => setFlag(false)];
 };
 
 export const useDomId = (): string => {