Renamed SortingDropdown to OrderingDropdown, for consistency

src/settings/ShortUrlsList.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { FormGroup } from 'reactstrap';
-import { SortingDropdown } from '../utils/SortingDropdown';
+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';
@@ -14,7 +14,7 @@ export const ShortUrlsList: FC<ShortUrlsListProps> = ({ settings: { shortUrlsLis
   <SimpleCard title="Short URLs list" className="h-100">
     <FormGroup className="mb-0">
       <label>Default ordering for short URLs list:</label>
-      <SortingDropdown
+      <OrderingDropdown
         items={SHORT_URLS_ORDERABLE_FIELDS}
         order={shortUrlsList?.defaultOrdering ?? DEFAULT_SHORT_URLS_ORDERING}
         onChange={(field, dir) => setShortUrlsListSettings({ defaultOrdering: { field, dir } })}

src/settings/Tags.tsx

@@ -3,7 +3,7 @@ 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 { TAGS_ORDERABLE_FIELDS } from '../tags/data/TagsListChildrenProps';
 import { Settings, TagsSettings } from './reducers/settings';
 
@@ -25,7 +25,7 @@ export const Tags: FC<TagsProps> = ({ settings: { tags }, setTagsSettings }) =>
     </FormGroup>
     <FormGroup className="mb-0">
       <label>Default ordering for tags list:</label>
-      <SortingDropdown
+      <OrderingDropdown
         items={TAGS_ORDERABLE_FIELDS}
         order={tags?.defaultOrdering ?? {}}
         onChange={(field, dir) => setTagsSettings({ ...tags, defaultOrdering: { field, dir } })}

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';
@@ -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={SHORT_URLS_ORDERABLE_FIELDS} order={order} onChange={handleOrderBy} />
+        <OrderingDropdown items={SHORT_URLS_ORDERABLE_FIELDS} order={order} onChange={handleOrderBy} />
       </div>
       <Card body className="pb-1">
         <ShortUrlsTable

src/tags/TagsList.tsx

@@ -10,7 +10,7 @@ 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 {
   TagsOrderableFields,
@@ -93,7 +93,7 @@ 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
+          <OrderingDropdown
             items={TAGS_ORDERABLE_FIELDS}
             order={order}
             onChange={(field, dir) => setOrder({ field, dir })}

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 function SortingDropdown<T extends string = string>(
-  { items, order, onChange, isButton = true, right = false }: SortingDropdownProps<T>,
+export function OrderingDropdown<T extends string = string>(
+  { 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 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 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}