Moved short URL ordering dropdown to ShortUrlsFilteringBar to simplify positioning

src/short-urls/ShortUrlsFilteringBar.tsx

@@ -15,18 +15,23 @@ import { supportsAllTagsFiltering } from '../utils/helpers/features';
 import { SelectedServer } from '../servers/data';
 import { TooltipToggleSwitch } from '../utils/TooltipToggleSwitch';
 import { ExportBtn } from '../utils/ExportBtn';
+import { OrderDir } from '../utils/helpers/ordering';
+import { OrderingDropdown } from '../utils/OrderingDropdown';
 import { useShortUrlsQuery } from './helpers/hooks';
+import { SHORT_URLS_ORDERABLE_FIELDS, ShortUrlsOrder, ShortUrlsOrderableFields } from './data';
 import './ShortUrlsFilteringBar.scss';
 
 export interface ShortUrlsFilteringProps {
   selectedServer: SelectedServer;
+  order: ShortUrlsOrder;
+  handleOrderBy: (orderField?: ShortUrlsOrderableFields, orderDir?: OrderDir) => void;
   className?: string;
 }
 
 const dateOrNull = (date?: string) => date ? parseISO(date) : null;
 
 const ShortUrlsFilteringBar = (colorGenerator: ColorGenerator): FC<ShortUrlsFilteringProps> => (
-  { selectedServer, className },
+  { selectedServer, className, order, handleOrderBy },
 ) => {
   const [{ search, tags, startDate, endDate, tagsMode = 'any' }, toFirstPage ] = useShortUrlsQuery();
   const selectedTags = tags?.split(',') ?? [];
@@ -73,7 +78,7 @@ const ShortUrlsFilteringBar = (colorGenerator: ColorGenerator): FC<ShortUrlsFilt
       </Row>
 
       {selectedTags.length > 0 && (
-        <h4 className="mt-3">
+        <h4 className="my-3">
           {canChangeTagsMode && selectedTags.length > 1 && (
             <div className="float-end ms-2 mt-1">
               <TooltipToggleSwitch
@@ -90,6 +95,10 @@ const ShortUrlsFilteringBar = (colorGenerator: ColorGenerator): FC<ShortUrlsFilt
             <Tag colorGenerator={colorGenerator} key={tag} text={tag} clearable onClose={() => removeTag(tag)} />)}
         </h4>
       )}
+
+      <div className="d-block d-lg-none mb-3">
+        <OrderingDropdown items={SHORT_URLS_ORDERABLE_FIELDS} order={order} onChange={handleOrderBy} />
+      </div>
     </div>
   );
 };

src/short-urls/ShortUrlsList.tsx

@@ -2,7 +2,6 @@ import { pipe } from 'ramda';
 import { FC, useEffect, useMemo, useState } from 'react';
 import { Card } from 'reactstrap';
 import { useLocation, useParams } from 'react-router-dom';
-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 +13,7 @@ import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
 import { ShortUrlsTableProps } from './ShortUrlsTable';
 import Paginator from './Paginator';
 import { useShortUrlsQuery } from './helpers/hooks';
-import { ShortUrlsOrderableFields, SHORT_URLS_ORDERABLE_FIELDS } from './data';
+import { ShortUrlsOrderableFields } from './data';
 import { ShortUrlsFilteringProps } from './ShortUrlsFilteringBar';
 
 interface ShortUrlsListProps {
@@ -65,10 +64,12 @@ const ShortUrlsList = (
 
   return (
     <>
-      <ShortUrlsFilteringBar selectedServer={selectedServer} className="mb-3" />
+      <ShortUrlsFilteringBar
-      <div className="d-block d-lg-none mb-3">
+        selectedServer={selectedServer}
-        <OrderingDropdown items={SHORT_URLS_ORDERABLE_FIELDS} order={actualOrderBy} onChange={handleOrderBy} />
+        order={actualOrderBy}
-      </div>
+        handleOrderBy={handleOrderBy}
+        className="mb-3"
+      />
       <Card body className="pb-1">
         <ShortUrlsTable
           selectedServer={selectedServer}

test/short-urls/ShortUrlsFilteringBar.test.tsx

@@ -9,6 +9,7 @@ import { DateRangeSelector } from '../../src/utils/dates/DateRangeSelector';
 import ColorGenerator from '../../src/utils/services/ColorGenerator';
 import { ReachableServer, SelectedServer } from '../../src/servers/data';
 import { TooltipToggleSwitch } from '../../src/utils/TooltipToggleSwitch';
+import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -21,12 +22,19 @@ describe('<ShortUrlsFilteringBar />', () => {
   let wrapper: ShallowWrapper;
   const ShortUrlsFilteringBar = filteringBarCreator(Mock.all<ColorGenerator>());
   const navigate = jest.fn();
+  const handleOrderBy = jest.fn();
   const now = new Date();
   const createWrapper = (search = '', selectedServer?: SelectedServer) => {
     (useLocation as any).mockReturnValue({ search });
     (useNavigate as any).mockReturnValue(navigate);
 
-    wrapper = shallow(<ShortUrlsFilteringBar selectedServer={selectedServer ?? Mock.all<SelectedServer>()} />);
+    wrapper = shallow(
+      <ShortUrlsFilteringBar
+        selectedServer={selectedServer ?? Mock.all<SelectedServer>()}
+        order={{}}
+        handleOrderBy={handleOrderBy}
+      />,
+    );
 
     return wrapper;
   };
@@ -34,11 +42,12 @@ describe('<ShortUrlsFilteringBar />', () => {
   afterEach(jest.clearAllMocks);
   afterEach(() => wrapper?.unmount());
 
-  it('renders some children components SearchField', () => {
+  it('renders expected children components', () => {
     const wrapper = createWrapper();
 
     expect(wrapper.find(SearchField)).toHaveLength(1);
     expect(wrapper.find(DateRangeSelector)).toHaveLength(1);
+    expect(wrapper.find(OrderingDropdown)).toHaveLength(1);
   });
 
   it.each([
@@ -127,4 +136,19 @@ describe('<ShortUrlsFilteringBar />', () => {
     toggle.simulate('change');
     expect(navigate).toHaveBeenCalledWith(expect.stringContaining(expectedRedirectTagsMode));
   });
+
+  it('handles order through dropdown', () => {
+    const wrapper = createWrapper();
+
+    expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({});
+
+    wrapper.find(OrderingDropdown).simulate('change', 'visits', 'ASC');
+    expect(handleOrderBy).toHaveBeenCalledWith('visits', 'ASC');
+
+    wrapper.find(OrderingDropdown).simulate('change', 'shortCode', 'DESC');
+    expect(handleOrderBy).toHaveBeenCalledWith('shortCode', 'DESC');
+
+    wrapper.find(OrderingDropdown).simulate('change', undefined, undefined);
+    expect(handleOrderBy).toHaveBeenCalledWith(undefined, undefined);
+  });
 });

test/short-urls/ShortUrlsList.test.tsx

@@ -6,7 +6,6 @@ import shortUrlsListCreator from '../../src/short-urls/ShortUrlsList';
 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 { OrderingDropdown } from '../../src/utils/OrderingDropdown';
 import Paginator from '../../src/short-urls/Paginator';
 import { ReachableServer } from '../../src/servers/data';
 import { Settings } from '../../src/settings/reducers/settings';
@@ -58,7 +57,6 @@ describe('<ShortUrlsList />', () => {
 
   it('wraps expected components', () => {
     expect(wrapper.find(ShortUrlsTable)).toHaveLength(1);
-    expect(wrapper.find(OrderingDropdown)).toHaveLength(1);
     expect(wrapper.find(Paginator)).toHaveLength(1);
     expect(wrapper.find(ShortUrlsFilteringBar)).toHaveLength(1);
   });
@@ -84,39 +82,26 @@ describe('<ShortUrlsList />', () => {
 
     expect(renderIcon('visits').props.currentOrder).toEqual({});
 
-    wrapper.find(OrderingDropdown).simulate('change', 'visits');
+    (wrapper.find(ShortUrlsFilteringBar).prop('handleOrderBy') as Function)('visits');
     expect(renderIcon('visits').props.currentOrder).toEqual({ field: 'visits' });
 
-    wrapper.find(OrderingDropdown).simulate('change', 'visits', 'ASC');
+    (wrapper.find(ShortUrlsFilteringBar).prop('handleOrderBy') as Function)('visits', 'ASC');
     expect(renderIcon('visits').props.currentOrder).toEqual({ field: 'visits', dir: 'ASC' });
   });
 
   it('handles order through table', () => {
     const orderByColumn: (field: ShortUrlsOrderableFields) => Function = wrapper.find(ShortUrlsTable).prop('orderByColumn');
 
-    expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({});
+    expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({});
 
     orderByColumn('visits')();
-    expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
+    expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
 
     orderByColumn('title')();
-    expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'title', dir: 'ASC' });
+    expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({ field: 'title', dir: 'ASC' });
 
     orderByColumn('shortCode')();
-    expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'ASC' });
+    expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({ field: 'shortCode', dir: 'ASC' });
-  });
-
-  it('handles order through dropdown', () => {
-    expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({});
-
-    wrapper.find(OrderingDropdown).simulate('change', 'visits', 'ASC');
-    expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
-
-    wrapper.find(OrderingDropdown).simulate('change', 'shortCode', 'DESC');
-    expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'DESC' });
-
-    wrapper.find(OrderingDropdown).simulate('change', undefined, undefined);
-    expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({});
   });
 
   it.each([
@@ -126,6 +111,6 @@ describe('<ShortUrlsList />', () => {
   ])('has expected initial ordering', (initialOrderBy, field, dir) => {
     const wrapper = createWrapper(initialOrderBy);
 
-    expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field, dir });
+    expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({ field, dir });
   });
 });