Exported some specific component types and improved spacing in short URLs list

src/servers/Overview.tsx

@@ -4,7 +4,7 @@ import { Link, useNavigate } from 'react-router-dom';
 import { ITEMS_IN_OVERVIEW_PAGE, ShortUrlsList as ShortUrlsListState } from '../short-urls/reducers/shortUrlsList';
 import { prettify } from '../utils/helpers/numbers';
 import { TagsList } from '../tags/reducers/tagsList';
-import { ShortUrlsTableProps } from '../short-urls/ShortUrlsTable';
+import { ShortUrlsTableType } from '../short-urls/ShortUrlsTable';
 import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
 import { CreateShortUrlProps } from '../short-urls/CreateShortUrl';
 import { VisitsOverview } from '../visits/reducers/visitsOverview';
@@ -25,7 +25,7 @@ interface OverviewConnectProps {
 }
 
 export const Overview = (
-  ShortUrlsTable: FC<ShortUrlsTableProps>,
+  ShortUrlsTable: ShortUrlsTableType,
   CreateShortUrl: FC<CreateShortUrlProps>,
 ) => boundToMercureHub(({
   shortUrlsList,

src/short-urls/Paginator.tsx

@@ -21,7 +21,7 @@ export const Paginator = ({ paginator, serverId, currentQueryString = '' }: Pagi
     `/server/${serverId}/list-short-urls/${pageNumber}${currentQueryString}`;
 
   if (pagesCount <= 1) {
-    return null;
+    return <div className="pb-3" />; // Return some space
   }
 
   const renderPages = () =>
@@ -38,7 +38,7 @@ export const Paginator = ({ paginator, serverId, currentQueryString = '' }: Pagi
     ));
 
   return (
-    <Pagination className="sticky-card-paginator" listClassName="flex-wrap justify-content-center mb-0">
+    <Pagination className="sticky-card-paginator py-3" listClassName="flex-wrap justify-content-center mb-0">
       <PaginationItem disabled={currentPage === 1}>
         <PaginationLink previous tag={Link} to={urlForPage(currentPage - 1)} />
       </PaginationItem>

src/short-urls/ShortUrlsFilteringBar.tsx

@@ -18,7 +18,7 @@ import { ExportShortUrlsBtnProps } from './helpers/ExportShortUrlsBtn';
 import { TagsSelectorProps } from '../tags/helpers/TagsSelector';
 import './ShortUrlsFilteringBar.scss';
 
-export interface ShortUrlsFilteringProps {
+interface ShortUrlsFilteringProps {
   selectedServer: SelectedServer;
   order: ShortUrlsOrder;
   handleOrderBy: (orderField?: ShortUrlsOrderableFields, orderDir?: OrderDir) => void;
@@ -90,3 +90,5 @@ export const ShortUrlsFilteringBar = (
     </div>
   );
 };
+
+export type ShortUrlsFilteringBarType = ReturnType<typeof ShortUrlsFilteringBar>;

src/short-urls/ShortUrlsList.tsx

@@ -1,5 +1,5 @@
 import { pipe } from 'ramda';
-import { FC, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Card } from 'reactstrap';
 import { useLocation, useParams } from 'react-router-dom';
 import { determineOrderDir, OrderDir } from '../utils/helpers/ordering';
@@ -10,11 +10,11 @@ import { TableOrderIcon } from '../utils/table/TableOrderIcon';
 import { ShlinkShortUrlsListParams } from '../api/types';
 import { DEFAULT_SHORT_URLS_ORDERING, Settings } from '../settings/reducers/settings';
 import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
-import { ShortUrlsTableProps } from './ShortUrlsTable';
+import { ShortUrlsTableType } from './ShortUrlsTable';
 import { Paginator } from './Paginator';
 import { useShortUrlsQuery } from './helpers/hooks';
 import { ShortUrlsOrderableFields } from './data';
-import { ShortUrlsFilteringProps } from './ShortUrlsFilteringBar';
+import { ShortUrlsFilteringBarType } from './ShortUrlsFilteringBar';
 
 interface ShortUrlsListProps {
   selectedServer: SelectedServer;
@@ -24,8 +24,8 @@ interface ShortUrlsListProps {
 }
 
 export const ShortUrlsList = (
-  ShortUrlsTable: FC<ShortUrlsTableProps>,
-  ShortUrlsFilteringBar: FC<ShortUrlsFilteringProps>,
+  ShortUrlsTable: ShortUrlsTableType,
+  ShortUrlsFilteringBar: ShortUrlsFilteringBarType,
 ) => boundToMercureHub(({ listShortUrls, shortUrlsList, selectedServer, settings }: ShortUrlsListProps) => {
   const serverId = getServerId(selectedServer);
   const { page } = useParams();
@@ -70,7 +70,7 @@ export const ShortUrlsList = (
         handleOrderBy={handleOrderBy}
         className="mb-3"
       />
-      <Card body className="pb-1">
+      <Card body className="pb-0">
         <ShortUrlsTable
           selectedServer={selectedServer}
           shortUrlsList={shortUrlsList}

src/short-urls/ShortUrlsTable.scss

@@ -1,3 +1,7 @@
+.short-urls-table.short-urls-table {
+  margin-bottom: -1px;
+}
+
 .short-urls-table__header-cell--with-action {
   cursor: pointer;
 }

src/short-urls/ShortUrlsTable.tsx

@@ -1,13 +1,13 @@
-import { FC, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { isEmpty } from 'ramda';
 import classNames from 'classnames';
 import { SelectedServer } from '../servers/data';
 import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
-import { ShortUrlsRowProps } from './helpers/ShortUrlsRow';
+import { ShortUrlsRowType } from './helpers/ShortUrlsRow';
 import { ShortUrlsOrderableFields } from './data';
 import './ShortUrlsTable.scss';
 
-export interface ShortUrlsTableProps {
+interface ShortUrlsTableProps {
   orderByColumn?: (column: ShortUrlsOrderableFields) => () => void;
   renderOrderIcon?: (column: ShortUrlsOrderableFields) => ReactNode;
   shortUrlsList: ShortUrlsListState;
@@ -16,7 +16,7 @@ export interface ShortUrlsTableProps {
   className?: string;
 }
 
-export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
+export const ShortUrlsTable = (ShortUrlsRow: ShortUrlsRowType) => ({
   orderByColumn,
   renderOrderIcon,
   shortUrlsList,
@@ -27,7 +27,7 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
   const { error, loading, shortUrls } = shortUrlsList;
   const actionableFieldClasses = classNames({ 'short-urls-table__header-cell--with-action': !!orderByColumn });
   const orderableColumnsClasses = classNames('short-urls-table__header-cell', actionableFieldClasses);
-  const tableClasses = classNames('table table-hover responsive-table', className);
+  const tableClasses = classNames('table table-hover responsive-table short-urls-table', className);
 
   const renderShortUrls = () => {
     if (error) {
@@ -90,3 +90,5 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
     </table>
   );
 };
+
+export type ShortUrlsTableType = ReturnType<typeof ShortUrlsTable>;

src/short-urls/helpers/ShortUrlsRow.tsx

@@ -12,7 +12,7 @@ import { ShortUrlVisitsCount } from './ShortUrlVisitsCount';
 import { ShortUrlsRowMenuProps } from './ShortUrlsRowMenu';
 import './ShortUrlsRow.scss';
 
-export interface ShortUrlsRowProps {
+interface ShortUrlsRowProps {
   onTagClick?: (tag: string) => void;
   selectedServer: SelectedServer;
   shortUrl: ShortUrl;
@@ -89,3 +89,5 @@ export const ShortUrlsRow = (
     </tr>
   );
 };
+
+export type ShortUrlsRowType = ReturnType<typeof ShortUrlsRow>;

test/short-urls/Paginator.test.tsx

@@ -18,9 +18,11 @@ describe('<Paginator />', () => {
     [buildPaginator()],
     [buildPaginator(0)],
     [buildPaginator(1)],
-  ])('renders nothing if the number of pages is below 2', (paginator) => {
+  ])('renders an empty gap if the number of pages is below 2', (paginator) => {
     const { container } = setUp(paginator);
-    expect(container.firstChild).toBeNull();
+
+    expect(container.firstChild).toBeEmpty();
+    expect(container.firstChild).toHaveClass('pb-3');
   });
 
   it.each([

test/short-urls/ShortUrlsList.test.tsx

@@ -1,5 +1,4 @@
 import { screen } from '@testing-library/react';
-import { FC } from 'react';
 import { Mock } from 'ts-mockery';
 import { MemoryRouter, useNavigate } from 'react-router-dom';
 import { ShortUrlsList as createShortUrlsList } from '../../src/short-urls/ShortUrlsList';
@@ -8,7 +7,7 @@ import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
 import { ShortUrlsList as ShortUrlsListModel } from '../../src/short-urls/reducers/shortUrlsList';
 import { ReachableServer } from '../../src/servers/data';
 import { Settings } from '../../src/settings/reducers/settings';
-import { ShortUrlsTableProps } from '../../src/short-urls/ShortUrlsTable';
+import { ShortUrlsTableType } from '../../src/short-urls/ShortUrlsTable';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 jest.mock('react-router-dom', () => ({
@@ -18,7 +17,7 @@ jest.mock('react-router-dom', () => ({
 }));
 
 describe('<ShortUrlsList />', () => {
-  const ShortUrlsTable: FC<ShortUrlsTableProps> = ({ onTagClick }) => <span onClick={() => onTagClick?.('foo')}>ShortUrlsTable</span>;
+  const ShortUrlsTable: ShortUrlsTableType = ({ onTagClick }) => <span onClick={() => onTagClick?.('foo')}>ShortUrlsTable</span>;
   const ShortUrlsFilteringBar = () => <span>ShortUrlsFilteringBar</span>;
   const listShortUrlsMock = jest.fn();
   const navigate = jest.fn();