Created button to use when anything needs to be exported

src/short-urls/ShortUrlsFilteringBar.tsx

@@ -1,7 +1,10 @@
+import { FC } from 'react';
 import { faTags as tagsIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { isEmpty, pipe } from 'ramda';
 import { parseISO } from 'date-fns';
+import { Row } from 'reactstrap';
+import classNames from 'classnames';
 import SearchField from '../utils/SearchField';
 import Tag from '../tags/helpers/Tag';
 import { DateRangeSelector } from '../utils/dates/DateRangeSelector';
@@ -11,16 +14,20 @@ import { DateRange } from '../utils/dates/types';
 import { supportsAllTagsFiltering } from '../utils/helpers/features';
 import { SelectedServer } from '../servers/data';
 import { TooltipToggleSwitch } from '../utils/TooltipToggleSwitch';
+import { ExportBtn } from '../utils/ExportBtn';
 import { useShortUrlsQuery } from './helpers/hooks';
 import './ShortUrlsFilteringBar.scss';
 
-interface ShortUrlsFilteringProps {
+export interface ShortUrlsFilteringProps {
   selectedServer: SelectedServer;
+  className?: string;
 }
 
 const dateOrNull = (date?: string) => date ? parseISO(date) : null;
 
-const ShortUrlsFilteringBar = (colorGenerator: ColorGenerator) => ({ selectedServer }: ShortUrlsFilteringProps) => {
+const ShortUrlsFilteringBar = (colorGenerator: ColorGenerator): FC<ShortUrlsFilteringProps> => (
+  { selectedServer, className },
+) => {
   const [{ search, tags, startDate, endDate, tagsMode = 'any' }, toFirstPage ] = useShortUrlsQuery();
   const selectedTags = tags?.split(',') ?? [];
   const setDates = pipe(
@@ -46,23 +53,24 @@ const ShortUrlsFilteringBar = (colorGenerator: ColorGenerator) => ({ selectedSer
   );
 
   return (
-    <div className="short-urls-filtering-bar-container">
+    <div className={classNames('short-urls-filtering-bar-container', className)}>
       <SearchField initialValue={search} onChange={setSearch} />
 
-      <div className="mt-3">
-        <div className="row">
-          <div className="col-lg-8 offset-lg-4 col-xl-6 offset-xl-6">
-            <DateRangeSelector
-              defaultText="All short URLs"
-              initialDateRange={{
-                startDate: dateOrNull(startDate),
-                endDate: dateOrNull(endDate),
-              }}
-              onDatesChange={setDates}
-            />
-          </div>
+      <Row>
+        <div className="col-lg-4 col-xl-6 mt-3">
+          <ExportBtn className="btn-md-block" amount={4} onClick={() => {}} />
         </div>
-      </div>
+        <div className="col-lg-8 col-xl-6 mt-3">
+          <DateRangeSelector
+            defaultText="All short URLs"
+            initialDateRange={{
+              startDate: dateOrNull(startDate),
+              endDate: dateOrNull(endDate),
+            }}
+            onDatesChange={setDates}
+          />
+        </div>
+      </Row>
 
       {selectedTags.length > 0 && (
         <h4 className="mt-3">

src/short-urls/ShortUrlsList.tsx

@@ -15,6 +15,7 @@ import { ShortUrlsTableProps } from './ShortUrlsTable';
 import Paginator from './Paginator';
 import { useShortUrlsQuery } from './helpers/hooks';
 import { ShortUrlsOrderableFields, SHORT_URLS_ORDERABLE_FIELDS } from './data';
+import { ShortUrlsFilteringProps } from './ShortUrlsFilteringBar';
 
 interface ShortUrlsListProps {
   selectedServer: SelectedServer;
@@ -23,12 +24,10 @@ interface ShortUrlsListProps {
   settings: Settings;
 }
 
-const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>, ShortUrlsFilteringBar: FC) => boundToMercureHub(({
-  listShortUrls,
-  shortUrlsList,
-  selectedServer,
-  settings,
-}: ShortUrlsListProps) => {
+const ShortUrlsList = (
+  ShortUrlsTable: FC<ShortUrlsTableProps>,
+  ShortUrlsFilteringBar: FC<ShortUrlsFilteringProps>,
+) => boundToMercureHub(({ listShortUrls, shortUrlsList, selectedServer, settings }: ShortUrlsListProps) => {
   const serverId = getServerId(selectedServer);
   const { page } = useParams();
   const location = useLocation();
@@ -66,7 +65,7 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>, ShortUrlsFilteri
 
   return (
     <>
-      <div className="mb-3"><ShortUrlsFilteringBar /></div>
+      <ShortUrlsFilteringBar selectedServer={selectedServer} className="mb-3" />
       <div className="d-block d-lg-none mb-3">
         <OrderingDropdown items={SHORT_URLS_ORDERABLE_FIELDS} order={actualOrderBy} onChange={handleOrderBy} />
       </div>

src/short-urls/services/provideServices.ts

@@ -50,7 +50,6 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.decorator('QrCodeModal', connect([ 'selectedServer' ]));
 
   bottle.serviceFactory('ShortUrlsFilteringBar', ShortUrlsFilteringBar, 'ColorGenerator');
-  bottle.decorator('ShortUrlsFilteringBar', connect([ 'selectedServer' ]));
 
   // Actions
   bottle.serviceFactory('listShortUrls', listShortUrls, 'buildShlinkApiClient');