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

src/settings/reducers/settings.ts

@@ -1,8 +1,9 @@
 import type { PayloadAction, PrepareAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 import { mergeDeepRight } from 'ramda';
-import type { ShortUrlsOrder } from '../../../shlink-web-component/short-urls/data';
-import type { Settings } from '../../../shlink-web-component/utils/settings';
+import type { Settings } from '../../../shlink-web-component';
+
+type ShortUrlsOrder = Exclude<Exclude<Settings['shortUrlsList'], undefined>['defaultOrdering'], undefined>;
 
 export const DEFAULT_SHORT_URLS_ORDERING: ShortUrlsOrder = {
   field: 'dateCreated',

src/utils/IconInput.scss

@@ -1,26 +0,0 @@
-@import './mixins/vertical-align';
-@import './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;
-}

src/utils/IconInput.tsx

@@ -1,29 +0,0 @@
-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 './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>
-  );
-};

src/utils/helpers/hooks.ts

@@ -1,5 +1,4 @@
-import type { DependencyList, EffectCallback } from 'react';
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { v4 as uuid } from 'uuid';
 import { parseQuery } from '../../../shlink-web-component/utils/helpers/query';
@@ -27,22 +26,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 useEffectExceptFirstTime = (callback: EffectCallback, deps: DependencyList): void => {
-  const isFirstLoad = useRef(true);
-
-  useEffect(() => {
-    !isFirstLoad.current && callback();
-    isFirstLoad.current = false;
-  }, deps);
-};
-
 export const useGoBack = () => {
   const navigate = useNavigate();
   return () => navigate(-1);
@@ -53,6 +36,13 @@ export const useParsedQuery = <T>(): T => {
   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 => {
   const { current: id } = useRef(`dom-${uuid()}`);
   return id;

src/utils/helpers/ordering.ts

@@ -22,7 +22,7 @@ export const determineOrderDir = <T extends string = string>(
   return currentOrderDir ? newOrderMap[currentOrderDir] : 'ASC';
 };
 
-export const sortList = <List>(list: List[], { field, dir }: Order<Partial<keyof List>>) => (
+export const sortList = <List>(list: List[], { field, dir }: Order<keyof List>) => (
   !field || !dir ? list : list.sort((a, b) => {
     const greaterThan = dir === 'ASC' ? 1 : -1;
     const smallerThan = dir === 'ASC' ? -1 : 1;