Refactor short URL export so that it is compatible with what Shlink expects

src/common/services/ReportExporter.ts

@@ -24,7 +24,6 @@ export class ReportExporter {
 
   private readonly exportCsv = (filename: string, rows: object[]) => {
     const csv = this.jsonToCsv(rows);
-
     saveCsv(this.window, csv, filename);
   };
 }

src/short-urls/data/index.ts

@@ -79,6 +79,8 @@ export interface ExportableShortUrl {
   createdAt: string;
   title: string;
   shortUrl: string;
+  domain?: string;
+  shortCode: string;
   longUrl: string;
   tags: string;
   visits: number;

src/short-urls/helpers/ExportShortUrlsBtn.tsx

@@ -1,4 +1,5 @@
 import type { FC } from 'react';
+import { useCallback } from 'react';
 import type { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
 import type { ReportExporter } from '../../common/services/ReportExporter';
 import type { SelectedServer } from '../../servers/data';
@@ -24,7 +25,7 @@ export const ExportShortUrlsBtn = (
 ): FC<ExportShortUrlsBtnConnectProps> => ({ amount = 0, selectedServer }) => {
   const [{ tags, search, startDate, endDate, orderBy, tagsMode }] = useShortUrlsQuery();
   const [loading,, startLoading, stopLoading] = useToggle();
-  const exportAllUrls = async () => {
+  const exportAllUrls = useCallback(async () => {
     if (!isServerWithId(selectedServer)) {
       return;
     }
@@ -47,16 +48,23 @@ export const ExportShortUrlsBtn = (
     startLoading();
     const shortUrls = await loadAllUrls();
 
-    exportShortUrls(shortUrls.map((shortUrl) => ({
-      createdAt: shortUrl.dateCreated,
-      shortUrl: shortUrl.shortUrl,
-      longUrl: shortUrl.longUrl,
-      title: shortUrl.title ?? '',
-      tags: shortUrl.tags.join(','),
-      visits: shortUrl?.visitsSummary?.total ?? shortUrl.visitsCount,
-    })));
+    exportShortUrls(shortUrls.map((shortUrl) => {
+      const { hostname: domain, pathname } = new URL(shortUrl.shortUrl);
+      const shortCode = pathname.substring(1); // Remove trailing slash
+
+      return {
+        createdAt: shortUrl.dateCreated,
+        domain,
+        shortCode,
+        shortUrl: shortUrl.shortUrl,
+        longUrl: shortUrl.longUrl,
+        title: shortUrl.title ?? '',
+        tags: shortUrl.tags.join('|'),
+        visits: shortUrl?.visitsSummary?.total ?? shortUrl.visitsCount,
+      };
+    }));
     stopLoading();
-  };
+  }, [selectedServer]);
 
   return <ExportBtn loading={loading} className="btn-md-block" amount={amount} onClick={exportAllUrls} />;
 };

test/short-urls/helpers/ExportShortUrlsBtn.test.tsx

@@ -3,6 +3,7 @@ import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router-dom';
 import type { ReportExporter } from '../../../src/common/services/ReportExporter';
 import type { NotFoundServer, SelectedServer } from '../../../src/servers/data';
+import type { ShortUrl } from '../../../src/short-urls/data';
 import { ExportShortUrlsBtn as createExportShortUrlsBtn } from '../../../src/short-urls/helpers/ExportShortUrlsBtn';
 import { renderWithEvents } from '../../__helpers__/setUpTest';
 
@@ -56,4 +57,22 @@ describe('<ExportShortUrlsBtn />', () => {
     expect(listShortUrls).toHaveBeenCalledTimes(expectedPageLoads);
     expect(exportShortUrls).toHaveBeenCalled();
   });
+
+  it('maps short URLs for exporting', async () => {
+    listShortUrls.mockResolvedValue({
+      data: [fromPartial<ShortUrl>({
+        shortUrl: 'https://s.test/short-code',
+        tags: [],
+      })],
+    });
+    const { user } = setUp(undefined, fromPartial({ id: '123' }));
+
+    await user.click(screen.getByRole('button'));
+
+    expect(exportShortUrls).toHaveBeenCalledWith([expect.objectContaining({
+      shortUrl: 'https://s.test/short-code',
+      domain: 's.test',
+      shortCode: 'short-code',
+    })]);
+  });
 });