Added Settings suffix to all settings sub-components

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 }) => {
-  const shortUrlCreation: ShortUrlCreationSettings = settings.shortUrlCreation ?? { validateUrls: false };
+export const ShortUrlCreationSettings: FC<ShortUrlCreationProps> = ({ settings, setShortUrlCreationSettings }) => {
+  const shortUrlCreation: ShortUrlsSettings = settings.shortUrlCreation ?? { validateUrls: false };
   const changeTagsFilteringMode = (tagFilteringMode: TagFilteringMode) => () => setShortUrlCreationSettings(
     { ...shortUrlCreation ?? { validateUrls: false }, tagFilteringMode },
   );

src/settings/ShortUrlsListSettings.tsx

@@ -3,14 +3,16 @@ import { FormGroup } from 'reactstrap';
 import { OrderingDropdown } from '../utils/OrderingDropdown';
 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>

src/settings/TagsSettings.tsx

@@ -5,14 +5,14 @@ import { TagsModeDropdown } from '../tags/TagsModeDropdown';
 import { capitalize } from '../utils/utils';
 import { OrderingDropdown } from '../utils/OrderingDropdown';
 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>

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 { UserInterface } from '../UserInterface';
-import { Visits } from '../Visits';
-import { Tags } from '../Tags';
-import { ShortUrlsList } from '../ShortUrlsList';
+import { ShortUrlCreationSettings } from '../ShortUrlCreationSettings';
+import { UserInterfaceSettings } from '../UserInterfaceSettings';
+import { VisitsSettings } from '../VisitsSettings';
+import { TagsSettings } from '../TagsSettings';
+import { ShortUrlsListSettings } from '../ShortUrlsListSettings';
 
 const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Components
   bottle.serviceFactory(
     'Settings',
     Settings,
-    'RealTimeUpdates',
-    'ShortUrlCreation',
+    'RealTimeUpdatesSettings',
+    'ShortUrlCreationSettings',
     'ShortUrlsListSettings',
-    'UserInterface',
-    'Visits',
-    'Tags',
+    'UserInterfaceSettings',
+    'VisitsSettings',
+    '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.decorator('ShortUrlCreation', connect([ 'settings' ], [ 'setShortUrlCreationSettings' ]));
+  bottle.serviceFactory('ShortUrlCreationSettings', () => ShortUrlCreationSettings);
+  bottle.decorator('ShortUrlCreationSettings', connect([ 'settings' ], [ 'setShortUrlCreationSettings' ]));
 
-  bottle.serviceFactory('UserInterface', () => UserInterface);
-  bottle.decorator('UserInterface', connect([ 'settings' ], [ 'setUiSettings' ]));
+  bottle.serviceFactory('UserInterfaceSettings', () => UserInterfaceSettings);
+  bottle.decorator('UserInterfaceSettings', connect([ 'settings' ], [ 'setUiSettings' ]));
 
-  bottle.serviceFactory('Visits', () => Visits);
-  bottle.decorator('Visits', connect([ 'settings' ], [ 'setVisitsSettings' ]));
+  bottle.serviceFactory('VisitsSettings', () => VisitsSettings);
+  bottle.decorator('VisitsSettings', connect([ 'settings' ], [ 'setVisitsSettings' ]));
 
-  bottle.serviceFactory('Tags', () => Tags);
-  bottle.decorator('Tags', connect([ 'settings' ], [ 'setTagsSettings' ]));
+  bottle.serviceFactory('TagsSettings', () => TagsSettings);
+  bottle.decorator('TagsSettings', connect([ 'settings' ], [ 'setTagsSettings' ]));
 
-  bottle.serviceFactory('ShortUrlsListSettings', () => ShortUrlsList);
+  bottle.serviceFactory('ShortUrlsListSettings', () => ShortUrlsListSettings);
   bottle.decorator('ShortUrlsListSettings', connect([ 'settings' ], [ 'setShortUrlsListSettings' ]));
 
   // Actions