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

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 RealTimeUpdates from '../../src/settings/RealTimeUpdates';
+import {
+  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 { ShortUrlCreation } from '../../src/settings/ShortUrlCreation';
+import { ShortUrlCreationSettings as ShortUrlsSettings, Settings } from '../../src/settings/reducers/settings';
+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 { ShortUrlsList } from '../../src/settings/ShortUrlsList';
+import {
+  DEFAULT_SHORT_URLS_ORDERING,
+  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;

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 { 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) => {
-    wrapper = shallow(<Tags settings={Mock.of<Settings>({ tags })} setTagsSettings={setTagsSettings} />);
+  const createWrapper = (tags?: TagsSettingsOptions) => {
+    wrapper = shallow(<TagsSettings settings={Mock.of<Settings>({ tags })} setTagsSettings={setTagsSettings} />);
 
     return wrapper;
   };

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;
   };