Merge pull request #545 from acelaya-forks/feature/refactorings

Feature/refactorings

src/settings/RealTimeUpdatesSettings.tsx

@@ -12,7 +12,7 @@ interface RealTimeUpdatesProps {
 
 const intervalValue = (interval?: number) => !interval ? '' : `${interval}`;
 
-const RealTimeUpdates = (
+const RealTimeUpdatesSettings = (
   { settings: { realTimeUpdates }, toggleRealTimeUpdates, setRealTimeUpdatesInterval }: RealTimeUpdatesProps,
 ) => (
   <SimpleCard title="Real-time updates" className="h-100">
@@ -50,4 +50,4 @@ const RealTimeUpdates = (
   </SimpleCard>
 );
 
-export default RealTimeUpdates;
+export default RealTimeUpdatesSettings;

src/settings/ShortUrlCreationSettings.tsx

@@ -3,11 +3,11 @@ import { DropdownItem, FormGroup } from 'reactstrap';
 import { SimpleCard } from '../utils/SimpleCard';
 import ToggleSwitch from '../utils/ToggleSwitch';
 import { DropdownBtn } from '../utils/DropdownBtn';
-import { Settings, ShortUrlCreationSettings, TagFilteringMode } from './reducers/settings';
+import { Settings, ShortUrlCreationSettings as ShortUrlsSettings, TagFilteringMode } from './reducers/settings';
 
 interface ShortUrlCreationProps {
   settings: Settings;
-  setShortUrlCreationSettings: (settings: ShortUrlCreationSettings) => void;
+  setShortUrlCreationSettings: (settings: ShortUrlsSettings) => void;
 }
 
 const tagFilteringModeText = (tagFilteringMode: TagFilteringMode | undefined): string =>
@@ -17,8 +17,8 @@ const tagFilteringModeHint = (tagFilteringMode: TagFilteringMode | undefined): R
     ? <>The list of suggested tags will contain those <b>including</b> provided input.</>
     : <>The list of suggested tags will contain those <b>starting with</b> provided input.</>;
 
-export const ShortUrlCreation: FC<ShortUrlCreationProps> = ({ settings, setShortUrlCreationSettings }) => {
+export const ShortUrlCreationSettings: FC<ShortUrlCreationProps> = ({ settings, setShortUrlCreationSettings }) => {
-  const shortUrlCreation: ShortUrlCreationSettings = settings.shortUrlCreation ?? { validateUrls: false };
+  const shortUrlCreation: ShortUrlsSettings = settings.shortUrlCreation ?? { validateUrls: false };
   const changeTagsFilteringMode = (tagFilteringMode: TagFilteringMode) => () => setShortUrlCreationSettings(
     { ...shortUrlCreation ?? { validateUrls: false }, tagFilteringMode },
   );

src/settings/ShortUrlsListSettings.tsx

@@ -1,21 +1,23 @@
 import { FC } from 'react';
 import { FormGroup } from 'reactstrap';
-import SortingDropdown from '../utils/SortingDropdown';
+import { OrderingDropdown } from '../utils/OrderingDropdown';
-import { SORTABLE_FIELDS } from '../short-urls/data';
+import { SHORT_URLS_ORDERABLE_FIELDS } from '../short-urls/data';
 import { SimpleCard } from '../utils/SimpleCard';
-import { DEFAULT_SHORT_URLS_ORDERING, Settings, ShortUrlsListSettings } from './reducers/settings';
+import { DEFAULT_SHORT_URLS_ORDERING, Settings, ShortUrlsListSettings as ShortUrlsSettings } from './reducers/settings';
 
 interface ShortUrlsListProps {
   settings: Settings;
-  setShortUrlsListSettings: (settings: ShortUrlsListSettings) => void;
+  setShortUrlsListSettings: (settings: ShortUrlsSettings) => void;
 }
 
-export const ShortUrlsList: FC<ShortUrlsListProps> = ({ settings: { shortUrlsList }, setShortUrlsListSettings }) => (
+export const ShortUrlsListSettings: FC<ShortUrlsListProps> = (
+  { settings: { shortUrlsList }, setShortUrlsListSettings },
+) => (
   <SimpleCard title="Short URLs list" className="h-100">
     <FormGroup className="mb-0">
       <label>Default ordering for short URLs list:</label>
-      <SortingDropdown
+      <OrderingDropdown
-        items={SORTABLE_FIELDS}
+        items={SHORT_URLS_ORDERABLE_FIELDS}
         order={shortUrlsList?.defaultOrdering ?? DEFAULT_SHORT_URLS_ORDERING}
         onChange={(field, dir) => setShortUrlsListSettings({ defaultOrdering: { field, dir } })}
       />

src/settings/TagsSettings.tsx

@@ -3,16 +3,16 @@ import { FormGroup } from 'reactstrap';
 import { SimpleCard } from '../utils/SimpleCard';
 import { TagsModeDropdown } from '../tags/TagsModeDropdown';
 import { capitalize } from '../utils/utils';
-import SortingDropdown from '../utils/SortingDropdown';
+import { OrderingDropdown } from '../utils/OrderingDropdown';
-import { SORTABLE_FIELDS } from '../tags/data/TagsListChildrenProps';
+import { TAGS_ORDERABLE_FIELDS } from '../tags/data/TagsListChildrenProps';
-import { Settings, TagsSettings } from './reducers/settings';
+import { Settings, TagsSettings as TagsSettingsOptions } from './reducers/settings';
 
 interface TagsProps {
   settings: Settings;
-  setTagsSettings: (settings: TagsSettings) => void;
+  setTagsSettings: (settings: TagsSettingsOptions) => void;
 }
 
-export const Tags: FC<TagsProps> = ({ settings: { tags }, setTagsSettings }) => (
+export const TagsSettings: FC<TagsProps> = ({ settings: { tags }, setTagsSettings }) => (
   <SimpleCard title="Tags" className="h-100">
     <FormGroup>
       <label>Default display mode when managing tags:</label>
@@ -25,8 +25,8 @@ export const Tags: FC<TagsProps> = ({ settings: { tags }, setTagsSettings }) =>
     </FormGroup>
     <FormGroup className="mb-0">
       <label>Default ordering for tags list:</label>
-      <SortingDropdown
+      <OrderingDropdown
-        items={SORTABLE_FIELDS}
+        items={TAGS_ORDERABLE_FIELDS}
         order={tags?.defaultOrdering ?? {}}
         onChange={(field, dir) => setTagsSettings({ ...tags, defaultOrdering: { field, dir } })}
       />

src/settings/UserInterfaceSettings.tsx

@@ -6,14 +6,14 @@ import { SimpleCard } from '../utils/SimpleCard';
 import ToggleSwitch from '../utils/ToggleSwitch';
 import { changeThemeInMarkup, Theme } from '../utils/theme';
 import { Settings, UiSettings } from './reducers/settings';
-import './UserInterface.scss';
+import './UserInterfaceSettings.scss';
 
 interface UserInterfaceProps {
   settings: Settings;
   setUiSettings: (settings: UiSettings) => void;
 }
 
-export const UserInterface: FC<UserInterfaceProps> = ({ settings: { ui }, setUiSettings }) => (
+export const UserInterfaceSettings: FC<UserInterfaceProps> = ({ settings: { ui }, setUiSettings }) => (
   <SimpleCard title="User interface" className="h-100">
     <FormGroup>
       <FontAwesomeIcon icon={ui?.theme === 'dark' ? faMoon : faSun} className="user-interface__theme-icon" />

src/settings/VisitsSettings.tsx

@@ -2,14 +2,14 @@ import { FormGroup } from 'reactstrap';
 import { FC } from 'react';
 import { SimpleCard } from '../utils/SimpleCard';
 import { DateIntervalSelector } from '../utils/dates/DateIntervalSelector';
-import { Settings, VisitsSettings } from './reducers/settings';
+import { Settings, VisitsSettings as VisitsSettingsConfig } from './reducers/settings';
 
 interface VisitsProps {
   settings: Settings;
-  setVisitsSettings: (settings: VisitsSettings) => void;
+  setVisitsSettings: (settings: VisitsSettingsConfig) => void;
 }
 
-export const Visits: FC<VisitsProps> = ({ settings, setVisitsSettings }) => (
+export const VisitsSettings: FC<VisitsProps> = ({ settings, setVisitsSettings }) => (
   <SimpleCard title="Visits" className="h-100">
     <FormGroup className="mb-0">
       <label>Default interval to load on visits sections:</label>

src/settings/services/provideServices.ts

@@ -1,5 +1,5 @@
 import Bottle from 'bottlejs';
-import RealTimeUpdates from '../RealTimeUpdates';
+import RealTimeUpdatesSettings from '../RealTimeUpdatesSettings';
 import Settings from '../Settings';
 import {
   setRealTimeUpdatesInterval,
@@ -12,46 +12,46 @@ import {
 } from '../reducers/settings';
 import { ConnectDecorator } from '../../container/types';
 import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServer';
-import { ShortUrlCreation } from '../ShortUrlCreation';
+import { ShortUrlCreationSettings } from '../ShortUrlCreationSettings';
-import { UserInterface } from '../UserInterface';
+import { UserInterfaceSettings } from '../UserInterfaceSettings';
-import { Visits } from '../Visits';
+import { VisitsSettings } from '../VisitsSettings';
-import { Tags } from '../Tags';
+import { TagsSettings } from '../TagsSettings';
-import { ShortUrlsList } from '../ShortUrlsList';
+import { ShortUrlsListSettings } from '../ShortUrlsListSettings';
 
 const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Components
   bottle.serviceFactory(
     'Settings',
     Settings,
-    'RealTimeUpdates',
+    'RealTimeUpdatesSettings',
-    'ShortUrlCreation',
+    'ShortUrlCreationSettings',
     'ShortUrlsListSettings',
-    'UserInterface',
+    'UserInterfaceSettings',
-    'Visits',
+    'VisitsSettings',
-    'Tags',
+    'TagsSettings',
   );
   bottle.decorator('Settings', withoutSelectedServer);
   bottle.decorator('Settings', connect(null, [ 'resetSelectedServer' ]));
 
-  bottle.serviceFactory('RealTimeUpdates', () => RealTimeUpdates);
+  bottle.serviceFactory('RealTimeUpdatesSettings', () => RealTimeUpdatesSettings);
   bottle.decorator(
-    'RealTimeUpdates',
+    'RealTimeUpdatesSettings',
     connect([ 'settings' ], [ 'toggleRealTimeUpdates', 'setRealTimeUpdatesInterval' ]),
   );
 
-  bottle.serviceFactory('ShortUrlCreation', () => ShortUrlCreation);
+  bottle.serviceFactory('ShortUrlCreationSettings', () => ShortUrlCreationSettings);
-  bottle.decorator('ShortUrlCreation', connect([ 'settings' ], [ 'setShortUrlCreationSettings' ]));
+  bottle.decorator('ShortUrlCreationSettings', connect([ 'settings' ], [ 'setShortUrlCreationSettings' ]));
 
-  bottle.serviceFactory('UserInterface', () => UserInterface);
+  bottle.serviceFactory('UserInterfaceSettings', () => UserInterfaceSettings);
-  bottle.decorator('UserInterface', connect([ 'settings' ], [ 'setUiSettings' ]));
+  bottle.decorator('UserInterfaceSettings', connect([ 'settings' ], [ 'setUiSettings' ]));
 
-  bottle.serviceFactory('Visits', () => Visits);
+  bottle.serviceFactory('VisitsSettings', () => VisitsSettings);
-  bottle.decorator('Visits', connect([ 'settings' ], [ 'setVisitsSettings' ]));
+  bottle.decorator('VisitsSettings', connect([ 'settings' ], [ 'setVisitsSettings' ]));
 
-  bottle.serviceFactory('Tags', () => Tags);
+  bottle.serviceFactory('TagsSettings', () => TagsSettings);
-  bottle.decorator('Tags', connect([ 'settings' ], [ 'setTagsSettings' ]));
+  bottle.decorator('TagsSettings', connect([ 'settings' ], [ 'setTagsSettings' ]));
 
-  bottle.serviceFactory('ShortUrlsListSettings', () => ShortUrlsList);
+  bottle.serviceFactory('ShortUrlsListSettings', () => ShortUrlsListSettings);
   bottle.decorator('ShortUrlsListSettings', connect([ 'settings' ], [ 'setShortUrlsListSettings' ]));
 
   // Actions

src/short-urls/ShortUrlsList.tsx

@@ -2,7 +2,7 @@ import { pipe } from 'ramda';
 import { FC, useEffect, useMemo, useState } from 'react';
 import { RouteComponentProps } from 'react-router';
 import { Card } from 'reactstrap';
-import SortingDropdown from '../utils/SortingDropdown';
+import { OrderingDropdown } from '../utils/OrderingDropdown';
 import { determineOrderDir, OrderDir } from '../utils/helpers/ordering';
 import { getServerId, SelectedServer } from '../servers/data';
 import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
@@ -14,7 +14,7 @@ import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
 import { ShortUrlsTableProps } from './ShortUrlsTable';
 import Paginator from './Paginator';
 import { ShortUrlListRouteParams, useShortUrlsQuery } from './helpers/hooks';
-import { OrderableFields, ShortUrlsOrder, SORTABLE_FIELDS } from './data';
+import { ShortUrlsOrderableFields, ShortUrlsOrder, SHORT_URLS_ORDERABLE_FIELDS } from './data';
 
 interface ShortUrlsListProps extends RouteComponentProps<ShortUrlListRouteParams> {
   selectedServer: SelectedServer;
@@ -39,10 +39,10 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>, SearchBar: FC) =
   const selectedTags = useMemo(() => tags?.split(',') ?? [], [ tags ]);
   const { pagination } = shortUrlsList?.shortUrls ?? {};
 
-  const handleOrderBy = (field?: OrderableFields, dir?: OrderDir) => setOrder({ field, dir });
+  const handleOrderBy = (field?: ShortUrlsOrderableFields, dir?: OrderDir) => setOrder({ field, dir });
-  const orderByColumn = (field: OrderableFields) => () =>
+  const orderByColumn = (field: ShortUrlsOrderableFields) => () =>
     handleOrderBy(field, determineOrderDir(field, order.field, order.dir));
-  const renderOrderIcon = (field: OrderableFields) => <TableOrderIcon currentOrder={order} field={field} />;
+  const renderOrderIcon = (field: ShortUrlsOrderableFields) => <TableOrderIcon currentOrder={order} field={field} />;
   const addTag = pipe(
     (newTag: string) => [ ...new Set([ ...selectedTags, newTag ]) ].join(','),
     (tags) => toFirstPage({ tags }),
@@ -64,7 +64,7 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>, SearchBar: FC) =
     <>
       <div className="mb-3"><SearchBar /></div>
       <div className="d-block d-lg-none mb-3">
-        <SortingDropdown items={SORTABLE_FIELDS} order={order} onChange={handleOrderBy} />
+        <OrderingDropdown items={SHORT_URLS_ORDERABLE_FIELDS} order={order} onChange={handleOrderBy} />
       </div>
       <Card body className="pb-1">
         <ShortUrlsTable

src/short-urls/ShortUrlsTable.tsx

@@ -5,12 +5,12 @@ import { SelectedServer } from '../servers/data';
 import { supportsShortUrlTitle } from '../utils/helpers/features';
 import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
 import { ShortUrlsRowProps } from './helpers/ShortUrlsRow';
-import { OrderableFields } from './data';
+import { ShortUrlsOrderableFields } from './data';
 import './ShortUrlsTable.scss';
 
 export interface ShortUrlsTableProps {
-  orderByColumn?: (column: OrderableFields) => () => void;
+  orderByColumn?: (column: ShortUrlsOrderableFields) => () => void;
-  renderOrderIcon?: (column: OrderableFields) => ReactNode;
+  renderOrderIcon?: (column: ShortUrlsOrderableFields) => ReactNode;
   shortUrlsList: ShortUrlsListState;
   selectedServer: SelectedServer;
   onTagClick?: (tag: string) => void;

src/short-urls/data/index.ts

@@ -52,7 +52,7 @@ export interface ShortUrlIdentifier {
   domain: OptionalString;
 }
 
-export const SORTABLE_FIELDS = {
+export const SHORT_URLS_ORDERABLE_FIELDS = {
   dateCreated: 'Created at',
   shortCode: 'Short URL',
   longUrl: 'Long URL',
@@ -60,6 +60,6 @@ export const SORTABLE_FIELDS = {
   visits: 'Visits',
 };
 
-export type OrderableFields = keyof typeof SORTABLE_FIELDS;
+export type ShortUrlsOrderableFields = keyof typeof SHORT_URLS_ORDERABLE_FIELDS;
 
-export type ShortUrlsOrder = Order<OrderableFields>;
+export type ShortUrlsOrder = Order<ShortUrlsOrderableFields>;

src/tags/TagsList.tsx

@@ -10,9 +10,14 @@ import { ShlinkApiError } from '../api/ShlinkApiError';
 import { Topics } from '../mercure/helpers/Topics';
 import { Settings, TagsMode } from '../settings/reducers/settings';
 import { determineOrderDir, sortList } from '../utils/helpers/ordering';
-import SortingDropdown from '../utils/SortingDropdown';
+import { OrderingDropdown } from '../utils/OrderingDropdown';
 import { TagsList as TagsListState } from './reducers/tagsList';
-import { OrderableFields, SORTABLE_FIELDS, TagsListChildrenProps, TagsOrder } from './data/TagsListChildrenProps';
+import {
+  TagsOrderableFields,
+  TAGS_ORDERABLE_FIELDS,
+  TagsListChildrenProps,
+  TagsOrder,
+} from './data/TagsListChildrenProps';
 import { TagsModeDropdown } from './TagsModeDropdown';
 import { NormalizedTag } from './data';
 import { TagsTableProps } from './TagsTable';
@@ -55,7 +60,7 @@ const TagsList = (TagsCards: FC<TagsListChildrenProps>, TagsTable: FC<TagsTableP
     );
   }
 
-  const orderByColumn = (field: OrderableFields) => () => {
+  const orderByColumn = (field: TagsOrderableFields) => () => {
     const dir = determineOrderDir(field, order.field, order.dir);
 
     setOrder({ field: dir ? field : undefined, dir });
@@ -88,7 +93,11 @@ const TagsList = (TagsCards: FC<TagsListChildrenProps>, TagsTable: FC<TagsTableP
           <TagsModeDropdown mode={mode} onChange={setMode} />
         </div>
         <div className="col-lg-6 mt-3 mt-lg-0">
-          <SortingDropdown items={SORTABLE_FIELDS} order={order} onChange={(field, dir) => setOrder({ field, dir })} />
+          <OrderingDropdown
+            items={TAGS_ORDERABLE_FIELDS}
+            order={order}
+            onChange={(field, dir) => setOrder({ field, dir })}
+          />
         </div>
       </Row>
       {renderContent()}

src/tags/TagsTable.tsx

@@ -6,12 +6,12 @@ import SimplePaginator from '../common/SimplePaginator';
 import { useQueryState } from '../utils/helpers/hooks';
 import { parseQuery } from '../utils/helpers/query';
 import { TableOrderIcon } from '../utils/table/TableOrderIcon';
-import { OrderableFields, TagsListChildrenProps, TagsOrder } from './data/TagsListChildrenProps';
+import { TagsOrderableFields, TagsListChildrenProps, TagsOrder } from './data/TagsListChildrenProps';
 import { TagsTableRowProps } from './TagsTableRow';
 import './TagsTable.scss';
 
 export interface TagsTableProps extends TagsListChildrenProps {
-  orderByColumn: (field: OrderableFields) => () => void;
+  orderByColumn: (field: TagsOrderableFields) => () => void;
   currentOrder: TagsOrder;
 }
 

src/tags/data/TagsListChildrenProps.ts

@@ -2,15 +2,15 @@ import { SelectedServer } from '../../servers/data';
 import { Order } from '../../utils/helpers/ordering';
 import { NormalizedTag } from './index';
 
-export const SORTABLE_FIELDS = {
+export const TAGS_ORDERABLE_FIELDS = {
   tag: 'Tag',
   shortUrls: 'Short URLs',
   visits: 'Visits',
 };
 
-export type OrderableFields = keyof typeof SORTABLE_FIELDS;
+export type TagsOrderableFields = keyof typeof TAGS_ORDERABLE_FIELDS;
 
-export type TagsOrder = Order<OrderableFields>;
+export type TagsOrder = Order<TagsOrderableFields>;
 
 export interface TagsListChildrenProps {
   sortedTags: NormalizedTag[];

src/utils/OrderingDropdown.scss

@@ -0,0 +1,8 @@
+.ordering-dropdown__menu--link.ordering-dropdown__menu--link {
+  min-width: 11rem;
+}
+
+.ordering-dropdown__sort-icon {
+  margin: 3.5px 0 0;
+  float: right;
+}

src/utils/OrderingDropdown.tsx

@@ -4,9 +4,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSortAmountUp as sortAscIcon, faSortAmountDown as sortDescIcon } from '@fortawesome/free-solid-svg-icons';
 import classNames from 'classnames';
 import { determineOrderDir, Order, OrderDir } from './helpers/ordering';
-import './SortingDropdown.scss';
+import './OrderingDropdown.scss';
 
-export interface SortingDropdownProps<T extends string = string> {
+export interface OrderingDropdownProps<T extends string = string> {
   items: Record<T, string>;
   order: Order<T>;
   onChange: (orderField?: T, orderDir?: OrderDir) => void;
@@ -14,8 +14,8 @@ export interface SortingDropdownProps<T extends string = string> {
   right?: boolean;
 }
 
-export default function SortingDropdown<T extends string = string>(
+export function OrderingDropdown<T extends string = string>(
-  { items, order, onChange, isButton = true, right = false }: SortingDropdownProps<T>,
+  { items, order, onChange, isButton = true, right = false }: OrderingDropdownProps<T>,
 ) {
   const handleItemClick = (fieldKey: T) => () => {
     const newOrderDir = determineOrderDir(fieldKey, order.field, order.dir);
@@ -36,7 +36,7 @@ export default function SortingDropdown<T extends string = string>(
       </DropdownToggle>
       <DropdownMenu
         right={right}
-        className={classNames('w-100', { 'sorting-dropdown__menu--link': !isButton })}
+        className={classNames('w-100', { 'ordering-dropdown__menu--link': !isButton })}
       >
         {toPairs(items).map(([ fieldKey, fieldValue ]) => (
           <DropdownItem key={fieldKey} active={order.field === fieldKey} onClick={handleItemClick(fieldKey as T)}>
@@ -44,7 +44,7 @@ export default function SortingDropdown<T extends string = string>(
             {order.field === fieldKey && (
               <FontAwesomeIcon
                 icon={order.dir === 'ASC' ? sortAscIcon : sortDescIcon}
-                className="sorting-dropdown__sort-icon"
+                className="ordering-dropdown__sort-icon"
               />
             )}
           </DropdownItem>

src/utils/SortingDropdown.scss

@@ -1,8 +0,0 @@
-.sorting-dropdown__menu--link.sorting-dropdown__menu--link {
-  min-width: 11rem;
-}
-
-.sorting-dropdown__sort-icon {
-  margin: 3.5px 0 0;
-  float: right;
-}

src/visits/charts/SortableBarChartCard.tsx

@@ -4,7 +4,7 @@ import { rangeOf } from '../../utils/utils';
 import { Order } from '../../utils/helpers/ordering';
 import SimplePaginator from '../../common/SimplePaginator';
 import { roundTen } from '../../utils/helpers/numbers';
-import SortingDropdown from '../../utils/SortingDropdown';
+import { OrderingDropdown } from '../../utils/OrderingDropdown';
 import PaginationDropdown from '../../utils/PaginationDropdown';
 import { Stats, StatsRow } from '../types';
 import { HorizontalBarChart, HorizontalBarChartProps } from './HorizontalBarChart';
@@ -96,7 +96,7 @@ export const SortableBarChartCard: FC<SortableBarChartCardProps> = ({
     <>
       {title}
       <div className="float-right">
-        <SortingDropdown
+        <OrderingDropdown
           isButton={false}
           right
           items={sortingItems}

test/settings/RealTimeUpdatesSettings.test.tsx

@@ -1,19 +1,22 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
 import { Input } from 'reactstrap';
-import { RealTimeUpdatesSettings, Settings } from '../../src/settings/reducers/settings';
+import {
-import RealTimeUpdates from '../../src/settings/RealTimeUpdates';
+  RealTimeUpdatesSettings as RealTimeUpdatesSettingsOptions,
+  Settings,
+} from '../../src/settings/reducers/settings';
+import RealTimeUpdatesSettings from '../../src/settings/RealTimeUpdatesSettings';
 import ToggleSwitch from '../../src/utils/ToggleSwitch';
 
-describe('<RealTimeUpdates />', () => {
+describe('<RealTimeUpdatesSettings />', () => {
   const toggleRealTimeUpdates = jest.fn();
   const setRealTimeUpdatesInterval = jest.fn();
   let wrapper: ShallowWrapper;
-  const createWrapper = (realTimeUpdates: Partial<RealTimeUpdatesSettings> = {}) => {
+  const createWrapper = (realTimeUpdates: Partial<RealTimeUpdatesSettingsOptions> = {}) => {
     const settings = Mock.of<Settings>({ realTimeUpdates });
 
     wrapper = shallow(
-      <RealTimeUpdates
+      <RealTimeUpdatesSettings
         settings={settings}
         toggleRealTimeUpdates={toggleRealTimeUpdates}
         setRealTimeUpdatesInterval={setRealTimeUpdatesInterval}

test/settings/ShortUrlCreationSettings.test.tsx

@@ -1,17 +1,17 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
 import { DropdownItem } from 'reactstrap';
-import { ShortUrlCreationSettings, Settings } from '../../src/settings/reducers/settings';
+import { ShortUrlCreationSettings as ShortUrlsSettings, Settings } from '../../src/settings/reducers/settings';
-import { ShortUrlCreation } from '../../src/settings/ShortUrlCreation';
+import { ShortUrlCreationSettings } from '../../src/settings/ShortUrlCreationSettings';
 import ToggleSwitch from '../../src/utils/ToggleSwitch';
 import { DropdownBtn } from '../../src/utils/DropdownBtn';
 
-describe('<ShortUrlCreation />', () => {
+describe('<ShortUrlCreationSettings />', () => {
   let wrapper: ShallowWrapper;
   const setShortUrlCreationSettings = jest.fn();
-  const createWrapper = (shortUrlCreation?: ShortUrlCreationSettings) => {
+  const createWrapper = (shortUrlCreation?: ShortUrlsSettings) => {
     wrapper = shallow(
-      <ShortUrlCreation
+      <ShortUrlCreationSettings
         settings={Mock.of<Settings>({ shortUrlCreation })}
         setShortUrlCreationSettings={setShortUrlCreationSettings}
       />,
@@ -68,9 +68,9 @@ describe('<ShortUrlCreation />', () => {
   });
 
   it.each([
-    [ { tagFilteringMode: 'includes' } as ShortUrlCreationSettings, 'Suggest tags including input', 'including' ],
+    [ { tagFilteringMode: 'includes' } as ShortUrlsSettings, 'Suggest tags including input', 'including' ],
     [
-      { tagFilteringMode: 'startsWith' } as ShortUrlCreationSettings,
+      { tagFilteringMode: 'startsWith' } as ShortUrlsSettings,
       'Suggest tags starting with input',
       'starting with',
     ],

test/settings/ShortUrlsListSettings.test.tsx

@@ -1,16 +1,20 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
-import { DEFAULT_SHORT_URLS_ORDERING, Settings, ShortUrlsListSettings } from '../../src/settings/reducers/settings';
+import {
-import { ShortUrlsList } from '../../src/settings/ShortUrlsList';
+  DEFAULT_SHORT_URLS_ORDERING,
-import SortingDropdown from '../../src/utils/SortingDropdown';
+  Settings,
+  ShortUrlsListSettings as ShortUrlsSettings,
+} from '../../src/settings/reducers/settings';
+import { ShortUrlsListSettings } from '../../src/settings/ShortUrlsListSettings';
+import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
 import { ShortUrlsOrder } from '../../src/short-urls/data';
 
-describe('<ShortUrlsList />', () => {
+describe('<ShortUrlsListSettings />', () => {
   let wrapper: ShallowWrapper;
   const setSettings = jest.fn();
-  const createWrapper = (shortUrlsList?: ShortUrlsListSettings) => {
+  const createWrapper = (shortUrlsList?: ShortUrlsSettings) => {
     wrapper = shallow(
-      <ShortUrlsList settings={Mock.of<Settings>({ shortUrlsList })} setShortUrlsListSettings={setSettings} />,
+      <ShortUrlsListSettings settings={Mock.of<Settings>({ shortUrlsList })} setShortUrlsListSettings={setSettings} />,
     );
 
     return wrapper;
@@ -27,7 +31,7 @@ describe('<ShortUrlsList />', () => {
     [{ defaultOrdering: { field: 'visits', dir: 'ASC' } as ShortUrlsOrder }, { field: 'visits', dir: 'ASC' }],
   ])('shows expected ordering', (shortUrlsList, expectedOrder) => {
     const wrapper = createWrapper(shortUrlsList);
-    const dropdown = wrapper.find(SortingDropdown);
+    const dropdown = wrapper.find(OrderingDropdown);
 
     expect(dropdown.prop('order')).toEqual(expectedOrder);
   });
@@ -39,7 +43,7 @@ describe('<ShortUrlsList />', () => {
     [ 'title', 'DESC' ],
   ])('invokes setSettings when ordering changes', (field, dir) => {
     const wrapper = createWrapper();
-    const dropdown = wrapper.find(SortingDropdown);
+    const dropdown = wrapper.find(OrderingDropdown);
 
     expect(setSettings).not.toHaveBeenCalled();
     dropdown.simulate('change', field, dir);

test/settings/TagsSettings.test.tsx

@@ -1,17 +1,17 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
 import { FormGroup } from 'reactstrap';
-import { Settings, TagsMode, TagsSettings } from '../../src/settings/reducers/settings';
+import { Settings, TagsMode, TagsSettings as TagsSettingsOptions } from '../../src/settings/reducers/settings';
 import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown';
-import { Tags } from '../../src/settings/Tags';
+import { TagsSettings } from '../../src/settings/TagsSettings';
-import SortingDropdown from '../../src/utils/SortingDropdown';
+import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
 import { TagsOrder } from '../../src/tags/data/TagsListChildrenProps';
 
-describe('<Tags />', () => {
+describe('<TagsSettings />', () => {
   let wrapper: ShallowWrapper;
   const setTagsSettings = jest.fn();
-  const createWrapper = (tags?: TagsSettings) => {
+  const createWrapper = (tags?: TagsSettingsOptions) => {
-    wrapper = shallow(<Tags settings={Mock.of<Settings>({ tags })} setTagsSettings={setTagsSettings} />);
+    wrapper = shallow(<TagsSettings settings={Mock.of<Settings>({ tags })} setTagsSettings={setTagsSettings} />);
 
     return wrapper;
   };
@@ -60,7 +60,7 @@ describe('<Tags />', () => {
     [{ defaultOrdering: { field: 'visits', dir: 'ASC' } as TagsOrder }, { field: 'visits', dir: 'ASC' }],
   ])('shows expected ordering', (tags, expectedOrder) => {
     const wrapper = createWrapper(tags);
-    const dropdown = wrapper.find(SortingDropdown);
+    const dropdown = wrapper.find(OrderingDropdown);
 
     expect(dropdown.prop('order')).toEqual(expectedOrder);
   });
@@ -72,7 +72,7 @@ describe('<Tags />', () => {
     [ 'shortUrls', 'DESC' ],
   ])('invokes setTagsSettings when ordering changes', (field, dir) => {
     const wrapper = createWrapper();
-    const dropdown = wrapper.find(SortingDropdown);
+    const dropdown = wrapper.find(OrderingDropdown);
 
     expect(setTagsSettings).not.toHaveBeenCalled();
     dropdown.simulate('change', field, dir);

test/settings/UserInterfaceSettings.test.tsx

@@ -3,15 +3,15 @@ import { Mock } from 'ts-mockery';
 import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Settings, UiSettings } from '../../src/settings/reducers/settings';
-import { UserInterface } from '../../src/settings/UserInterface';
+import { UserInterfaceSettings } from '../../src/settings/UserInterfaceSettings';
 import ToggleSwitch from '../../src/utils/ToggleSwitch';
 import { Theme } from '../../src/utils/theme';
 
-describe('<UserInterface />', () => {
+describe('<UserInterfaceSettings />', () => {
   let wrapper: ShallowWrapper;
   const setUiSettings = jest.fn();
   const createWrapper = (ui?: UiSettings) => {
-    wrapper = shallow(<UserInterface settings={Mock.of<Settings>({ ui })} setUiSettings={setUiSettings} />);
+    wrapper = shallow(<UserInterfaceSettings settings={Mock.of<Settings>({ ui })} setUiSettings={setUiSettings} />);
 
     return wrapper;
   };

test/settings/VisitsSettings.test.tsx

@@ -1,15 +1,15 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
 import { Settings } from '../../src/settings/reducers/settings';
-import { Visits } from '../../src/settings/Visits';
+import { VisitsSettings } from '../../src/settings/VisitsSettings';
 import { SimpleCard } from '../../src/utils/SimpleCard';
 import { DateIntervalSelector } from '../../src/utils/dates/DateIntervalSelector';
 
-describe('<Visits />', () => {
+describe('<VisitsSettings />', () => {
   let wrapper: ShallowWrapper;
   const setVisitsSettings = jest.fn();
   const createWrapper = (settings: Partial<Settings> = {}) => {
-    wrapper = shallow(<Visits settings={Mock.of<Settings>(settings)} setVisitsSettings={setVisitsSettings} />);
+    wrapper = shallow(<VisitsSettings settings={Mock.of<Settings>(settings)} setVisitsSettings={setVisitsSettings} />);
 
     return wrapper;
   };

test/short-urls/ShortUrlsList.test.tsx

@@ -4,10 +4,10 @@ import { Mock } from 'ts-mockery';
 import { History, Location } from 'history';
 import { match } from 'react-router';
 import shortUrlsListCreator from '../../src/short-urls/ShortUrlsList';
-import { OrderableFields, ShortUrl, ShortUrlsOrder } from '../../src/short-urls/data';
+import { ShortUrlsOrderableFields, ShortUrl, ShortUrlsOrder } from '../../src/short-urls/data';
 import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
 import { ShortUrlsList as ShortUrlsListModel } from '../../src/short-urls/reducers/shortUrlsList';
-import SortingDropdown from '../../src/utils/SortingDropdown';
+import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
 import Paginator from '../../src/short-urls/Paginator';
 import { ReachableServer } from '../../src/servers/data';
 import { ShortUrlListRouteParams } from '../../src/short-urls/helpers/hooks';
@@ -54,7 +54,7 @@ describe('<ShortUrlsList />', () => {
 
   it('wraps expected components', () => {
     expect(wrapper.find(ShortUrlsTable)).toHaveLength(1);
-    expect(wrapper.find(SortingDropdown)).toHaveLength(1);
+    expect(wrapper.find(OrderingDropdown)).toHaveLength(1);
     expect(wrapper.find(Paginator)).toHaveLength(1);
     expect(wrapper.find(SearchBar)).toHaveLength(1);
   });
@@ -75,44 +75,44 @@ describe('<ShortUrlsList />', () => {
   });
 
   it('invokes order icon rendering', () => {
-    const renderIcon = (field: OrderableFields) =>
+    const renderIcon = (field: ShortUrlsOrderableFields) =>
-      (wrapper.find(ShortUrlsTable).prop('renderOrderIcon') as (field: OrderableFields) => ReactElement)(field);
+      (wrapper.find(ShortUrlsTable).prop('renderOrderIcon') as (field: ShortUrlsOrderableFields) => ReactElement)(field);
 
     expect(renderIcon('visits').props.currentOrder).toEqual({});
 
-    wrapper.find(SortingDropdown).simulate('change', 'visits');
+    wrapper.find(OrderingDropdown).simulate('change', 'visits');
     expect(renderIcon('visits').props.currentOrder).toEqual({ field: 'visits' });
 
-    wrapper.find(SortingDropdown).simulate('change', 'visits', 'ASC');
+    wrapper.find(OrderingDropdown).simulate('change', 'visits', 'ASC');
     expect(renderIcon('visits').props.currentOrder).toEqual({ field: 'visits', dir: 'ASC' });
   });
 
   it('handles order through table', () => {
-    const orderByColumn: (field: OrderableFields) => Function = wrapper.find(ShortUrlsTable).prop('orderByColumn');
+    const orderByColumn: (field: ShortUrlsOrderableFields) => Function = wrapper.find(ShortUrlsTable).prop('orderByColumn');
 
-    expect(wrapper.find(SortingDropdown).prop('order')).toEqual({});
+    expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({});
 
     orderByColumn('visits')();
-    expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
+    expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
 
     orderByColumn('title')();
-    expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'title', dir: 'ASC' });
+    expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'title', dir: 'ASC' });
 
     orderByColumn('shortCode')();
-    expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'ASC' });
+    expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'ASC' });
   });
 
   it('handles order through dropdown', () => {
-    expect(wrapper.find(SortingDropdown).prop('order')).toEqual({});
+    expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({});
 
-    wrapper.find(SortingDropdown).simulate('change', 'visits', 'ASC');
+    wrapper.find(OrderingDropdown).simulate('change', 'visits', 'ASC');
-    expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
+    expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
 
-    wrapper.find(SortingDropdown).simulate('change', 'shortCode', 'DESC');
+    wrapper.find(OrderingDropdown).simulate('change', 'shortCode', 'DESC');
-    expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'DESC' });
+    expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'DESC' });
 
-    wrapper.find(SortingDropdown).simulate('change', undefined, undefined);
+    wrapper.find(OrderingDropdown).simulate('change', undefined, undefined);
-    expect(wrapper.find(SortingDropdown).prop('order')).toEqual({});
+    expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({});
   });
 
   it.each([
@@ -122,6 +122,6 @@ describe('<ShortUrlsList />', () => {
   ])('has expected initial ordering', (initialOrderBy, field, dir) => {
     const wrapper = createWrapper(initialOrderBy);
 
-    expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field, dir });
+    expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field, dir });
   });
 });

test/short-urls/ShortUrlsTable.test.tsx

@@ -5,7 +5,7 @@ import { ShortUrlsTable as shortUrlsTableCreator } from '../../src/short-urls/Sh
 import { ShortUrlsList } from '../../src/short-urls/reducers/shortUrlsList';
 import { ReachableServer, SelectedServer } from '../../src/servers/data';
 import { SemVer } from '../../src/utils/helpers/version';
-import { OrderableFields, SORTABLE_FIELDS } from '../../src/short-urls/data';
+import { ShortUrlsOrderableFields, SHORT_URLS_ORDERABLE_FIELDS } from '../../src/short-urls/data';
 
 describe('<ShortUrlsTable />', () => {
   let wrapper: ShallowWrapper;
@@ -51,8 +51,8 @@ describe('<ShortUrlsTable />', () => {
       .find('thead')
       .find('tr')
       .find('th')
-      .filterWhere((e) => e.text().includes(SORTABLE_FIELDS[orderableField as OrderableFields]));
+      .filterWhere((e) => e.text().includes(SHORT_URLS_ORDERABLE_FIELDS[orderableField as ShortUrlsOrderableFields]));
-    const sortableFields = Object.keys(SORTABLE_FIELDS).filter((sortableField) => sortableField !== 'title');
+    const sortableFields = Object.keys(SHORT_URLS_ORDERABLE_FIELDS).filter((sortableField) => sortableField !== 'title');
 
     expect.assertions(sortableFields.length);
     sortableFields.forEach((sortableField) => {

test/tags/TagsList.test.tsx

@@ -9,8 +9,8 @@ import { Result } from '../../src/utils/Result';
 import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown';
 import SearchField from '../../src/utils/SearchField';
 import { Settings } from '../../src/settings/reducers/settings';
-import { OrderableFields } from '../../src/tags/data/TagsListChildrenProps';
+import { TagsOrderableFields } from '../../src/tags/data/TagsListChildrenProps';
-import SortingDropdown from '../../src/utils/SortingDropdown';
+import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
 
 describe('<TagsList />', () => {
   let wrapper: ShallowWrapper;
@@ -89,16 +89,16 @@ describe('<TagsList />', () => {
   it('triggers ordering when sorting dropdown changes', () => {
     const wrapper = createWrapper({ filteredTags: [] });
 
-    expect(wrapper.find(SortingDropdown).prop('order')).toEqual({});
+    expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({});
-    wrapper.find(SortingDropdown).simulate('change', 'tag', 'DESC');
+    wrapper.find(OrderingDropdown).simulate('change', 'tag', 'DESC');
-    expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'tag', dir: 'DESC' });
+    expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'tag', dir: 'DESC' });
-    wrapper.find(SortingDropdown).simulate('change', 'visits', 'ASC');
+    wrapper.find(OrderingDropdown).simulate('change', 'visits', 'ASC');
-    expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
+    expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
   });
 
   it('can update current order via orderByColumn from table component', () => {
     const wrapper = createWrapper({ filteredTags: [ 'foo', 'bar' ], stats: {} });
-    const callOrderBy = (field: OrderableFields) => {
+    const callOrderBy = (field: TagsOrderableFields) => {
       ((wrapper.find(TagsTable).prop('orderByColumn') as Function)(field) as Function)();
     };
 

test/utils/SortingDropdown.test.tsx

@@ -3,7 +3,7 @@ import { DropdownItem, DropdownToggle } from 'reactstrap';
 import { identity, values } from 'ramda';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSortAmountDown as caretDownIcon } from '@fortawesome/free-solid-svg-icons';
-import SortingDropdown, { SortingDropdownProps } from '../../src/utils/SortingDropdown';
+import { OrderingDropdown, OrderingDropdownProps } from '../../src/utils/OrderingDropdown';
 import { OrderDir } from '../../src/utils/helpers/ordering';
 
 describe('<SortingDropdown />', () => {
@@ -13,8 +13,8 @@ describe('<SortingDropdown />', () => {
     bar: 'Bar',
     baz: 'Hello World',
   };
-  const createWrapper = (props: Partial<SortingDropdownProps> = {}) => {
+  const createWrapper = (props: Partial<OrderingDropdownProps> = {}) => {
-    wrapper = shallow(<SortingDropdown items={items} order={{}} onChange={identity} {...props} />);
+    wrapper = shallow(<OrderingDropdown items={items} order={{}} onChange={identity} {...props} />);
 
     return wrapper;
   };

test/visits/charts/SortableBarChartCard.test.tsx

@@ -1,6 +1,6 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { range } from 'ramda';
-import SortingDropdown from '../../../src/utils/SortingDropdown';
+import { OrderingDropdown } from '../../../src/utils/OrderingDropdown';
 import PaginationDropdown from '../../../src/utils/PaginationDropdown';
 import { rangeOf } from '../../../src/utils/utils';
 import { OrderDir } from '../../../src/utils/helpers/ordering';
@@ -45,7 +45,7 @@ describe('<SortableBarChartCard />', () => {
 
     beforeEach(() => {
       const wrapper = createWrapper();
-      const dropdown = wrapper.renderProp('title' as never)().find(SortingDropdown);
+      const dropdown = wrapper.renderProp('title' as never)().find(OrderingDropdown);
 
       assert = (sortName: string, sortDir: OrderDir, keys: string[], values: number[]) => {
         dropdown.prop('onChange')(sortName, sortDir);