Added new settings card to customize short URLs lists

src/settings/Settings.tsx

@@ -16,13 +16,20 @@ const SettingsSections: FC<{ items: ReactNode[][] }> = ({ items }) => (
   </>
 );
 
-const Settings = (RealTimeUpdates: FC, ShortUrlCreation: FC, UserInterface: FC, Visits: FC, Tags: FC) => () => (
+const Settings = (
+  RealTimeUpdates: FC,
+  ShortUrlCreation: FC,
+  ShortUrlsList: FC,
+  UserInterface: FC,
+  Visits: FC,
+  Tags: FC,
+) => () => (
   <NoMenuLayout>
     <SettingsSections
       items={[
-        [ <UserInterface /> ], // eslint-disable-line react/jsx-key
-        [ <ShortUrlCreation />, <RealTimeUpdates /> ], // eslint-disable-line react/jsx-key
-        [ <Tags />, <Visits /> ], // eslint-disable-line react/jsx-key
+        [ <UserInterface />, <Visits /> ], // eslint-disable-line react/jsx-key
+        [ <ShortUrlCreation />, <ShortUrlsList /> ], // eslint-disable-line react/jsx-key
+        [ <Tags />, <RealTimeUpdates /> ], // eslint-disable-line react/jsx-key
       ]}
     />
   </NoMenuLayout>

src/settings/ShortUrlsList.tsx

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import { FormGroup } from 'reactstrap';
+import SortingDropdown from '../utils/SortingDropdown';
+import { SORTABLE_FIELDS } from '../short-urls/data';
+import { SimpleCard } from '../utils/SimpleCard';
+import { DEFAULT_SHORT_URLS_ORDERING, Settings, ShortUrlsListSettings } from './reducers/settings';
+
+interface ShortUrlsListProps {
+  settings: Settings;
+  setShortUrlsListSettings: (settings: ShortUrlsListSettings) => void;
+}
+
+export const ShortUrlsList: 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
+        items={SORTABLE_FIELDS}
+        order={shortUrlsList?.defaultOrdering ?? DEFAULT_SHORT_URLS_ORDERING}
+        onChange={(field, dir) => setShortUrlsListSettings({ defaultOrdering: { field, dir } })}
+      />
+    </FormGroup>
+  </SimpleCard>
+);

src/settings/Tags.tsx

@@ -13,7 +13,7 @@ interface TagsProps {
 }
 
 export const Tags: FC<TagsProps> = ({ settings: { tags }, setTagsSettings }) => (
-  <SimpleCard title="Tags">
+  <SimpleCard title="Tags" className="h-100">
     <FormGroup>
       <label>Default display mode when managing tags:</label>
       <TagsModeDropdown

src/settings/reducers/settings.ts

@@ -47,14 +47,14 @@ export interface TagsSettings {
   defaultMode?: TagsMode;
 }
 
-export interface ShortUrlListSettings {
+export interface ShortUrlsListSettings {
   defaultOrdering?: ShortUrlsOrder;
 }
 
 export interface Settings {
   realTimeUpdates: RealTimeUpdatesSettings;
   shortUrlCreation?: ShortUrlCreationSettings;
-  shortUrlList?: ShortUrlListSettings;
+  shortUrlsList?: ShortUrlsListSettings;
   ui?: UiSettings;
   visits?: VisitsSettings;
   tags?: TagsSettings;
@@ -73,7 +73,7 @@ const initialState: Settings = {
   visits: {
     defaultInterval: 'last30Days',
   },
-  shortUrlList: {
+  shortUrlsList: {
     defaultOrdering: DEFAULT_SHORT_URLS_ORDERING,
   },
 };
@@ -101,6 +101,11 @@ export const setShortUrlCreationSettings = (settings: ShortUrlCreationSettings):
   shortUrlCreation: settings,
 });
 
+export const setShortUrlsListSettings = (settings: ShortUrlsListSettings): PartialSettingsAction => ({
+  type: SET_SETTINGS,
+  shortUrlsList: settings,
+});
+
 export const setUiSettings = (settings: UiSettings): PartialSettingsAction => ({
   type: SET_SETTINGS,
   ui: settings,

src/settings/services/provideServices.ts

@@ -4,6 +4,7 @@ import Settings from '../Settings';
 import {
   setRealTimeUpdatesInterval,
   setShortUrlCreationSettings,
+  setShortUrlsListSettings,
   setTagsSettings,
   setUiSettings,
   setVisitsSettings,
@@ -15,10 +16,20 @@ import { ShortUrlCreation } from '../ShortUrlCreation';
 import { UserInterface } from '../UserInterface';
 import { Visits } from '../Visits';
 import { Tags } from '../Tags';
+import { ShortUrlsList } from '../ShortUrlsList';
 
 const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Components
-  bottle.serviceFactory('Settings', Settings, 'RealTimeUpdates', 'ShortUrlCreation', 'UserInterface', 'Visits', 'Tags');
+  bottle.serviceFactory(
+    'Settings',
+    Settings,
+    'RealTimeUpdates',
+    'ShortUrlCreation',
+    'ShortUrlsListSettings',
+    'UserInterface',
+    'Visits',
+    'Tags',
+  );
   bottle.decorator('Settings', withoutSelectedServer);
   bottle.decorator('Settings', connect(null, [ 'resetSelectedServer' ]));
 
@@ -40,10 +51,14 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.serviceFactory('Tags', () => Tags);
   bottle.decorator('Tags', connect([ 'settings' ], [ 'setTagsSettings' ]));
 
+  bottle.serviceFactory('ShortUrlsListSettings', () => ShortUrlsList);
+  bottle.decorator('ShortUrlsListSettings', connect([ 'settings' ], [ 'setShortUrlsListSettings' ]));
+
   // Actions
   bottle.serviceFactory('toggleRealTimeUpdates', () => toggleRealTimeUpdates);
   bottle.serviceFactory('setRealTimeUpdatesInterval', () => setRealTimeUpdatesInterval);
   bottle.serviceFactory('setShortUrlCreationSettings', () => setShortUrlCreationSettings);
+  bottle.serviceFactory('setShortUrlsListSettings', () => setShortUrlsListSettings);
   bottle.serviceFactory('setUiSettings', () => setUiSettings);
   bottle.serviceFactory('setVisitsSettings', () => setVisitsSettings);
   bottle.serviceFactory('setTagsSettings', () => setTagsSettings);

src/short-urls/ShortUrlsList.tsx

@@ -33,7 +33,7 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>, SearchBar: FC) =
   settings,
 }: ShortUrlsListProps) => {
   const serverId = getServerId(selectedServer);
-  const initialOrderBy = settings.shortUrlList?.defaultOrdering ?? DEFAULT_SHORT_URLS_ORDERING;
+  const initialOrderBy = settings.shortUrlsList?.defaultOrdering ?? DEFAULT_SHORT_URLS_ORDERING;
   const [ order, setOrder ] = useState<ShortUrlsOrder>(initialOrderBy);
   const [{ tags, search, startDate, endDate }, toFirstPage ] = useShortUrlsQuery({ history, match, location });
   const selectedTags = useMemo(() => tags?.split(',') ?? [], [ tags ]);