From 71468379bd861535bb27f5a85d2115a6ef5dc95a Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 14 Mar 2021 18:12:10 +0100
Subject: [PATCH] Fixed headers when exporting visits to CSV

---
 shlink-web-client.d.ts                      | 2 +-
 src/servers/services/ServersExporter.ts     | 6 ++----
 src/visits/VisitsStats.tsx                  | 4 ++--
 src/visits/services/VisitsExporter.ts       | 5 +----
 test/visits/services/VisitsExporter.test.ts | 4 +---
 5 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/shlink-web-client.d.ts b/shlink-web-client.d.ts
index 58d3c5df..dbc6e0fd 100644
--- a/shlink-web-client.d.ts
+++ b/shlink-web-client.d.ts
@@ -10,7 +10,7 @@ declare module 'event-source-polyfill' {
 declare module 'csvjson' {
   export declare class CsvJson {
     public toObject<T>(content: string): T[];
-    public toCSV<T>(data: T[], options: { headers: string }): string;
+    public toCSV<T>(data: T[], options: { headers: 'full' | 'none' | 'relative' | 'key' }): string;
   }
 }
 
diff --git a/src/servers/services/ServersExporter.ts b/src/servers/services/ServersExporter.ts
index fb68c8b9..b6dc6679 100644
--- a/src/servers/services/ServersExporter.ts
+++ b/src/servers/services/ServersExporter.ts
@@ -1,4 +1,4 @@
-import { dissoc, head, keys, values } from 'ramda';
+import { dissoc, values } from 'ramda';
 import { CsvJson } from 'csvjson';
 import LocalStorage from '../../utils/services/LocalStorage';
 import { ServersMap } from '../data';
@@ -17,9 +17,7 @@ export default class ServersExporter {
     const servers = values(this.storage.get<ServersMap>('servers') ?? {}).map(dissoc('id'));
 
     try {
-      const csv = this.csvjson.toCSV(servers, {
-        headers: keys(head(servers)).join(','),
-      });
+      const csv = this.csvjson.toCSV(servers, { headers: 'key' });
 
       saveCsv(this.window, csv, SERVERS_FILENAME);
     } catch (e) {
diff --git a/src/visits/VisitsStats.tsx b/src/visits/VisitsStats.tsx
index 6a0ac193..09271d2d 100644
--- a/src/visits/VisitsStats.tsx
+++ b/src/visits/VisitsStats.tsx
@@ -2,7 +2,7 @@ import { isEmpty, propEq, values } from 'ramda';
 import { useState, useEffect, useMemo, FC } from 'react';
 import { Button, Card, Nav, NavLink, Progress, Row } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCalendarAlt, faMapMarkedAlt, faList, faChartPie, faFileExport } from '@fortawesome/free-solid-svg-icons';
+import { faCalendarAlt, faMapMarkedAlt, faList, faChartPie, faFileDownload } from '@fortawesome/free-solid-svg-icons';
 import { IconDefinition } from '@fortawesome/fontawesome-common-types';
 import { Route, Switch, NavLink as RouterNavLink, Redirect } from 'react-router-dom';
 import { Location } from 'history';
@@ -274,7 +274,7 @@ const VisitsStats: FC<VisitsStatsProps> = (
                   className="btn-md-block"
                   onClick={() => exportCsv(normalizedVisits)}
                 >
-                  Export ({normalizedVisits.length}) <FontAwesomeIcon icon={faFileExport} />
+                  <FontAwesomeIcon icon={faFileDownload} /> Export ({normalizedVisits.length})
                 </Button>
               </div>
             </div>
diff --git a/src/visits/services/VisitsExporter.ts b/src/visits/services/VisitsExporter.ts
index 77eb07e5..daa8b81b 100644
--- a/src/visits/services/VisitsExporter.ts
+++ b/src/visits/services/VisitsExporter.ts
@@ -13,10 +13,7 @@ export class VisitsExporter {
       return;
     }
 
-    const [ firstVisit ] = visits;
-    const csv = this.csvjson.toCSV(visits, {
-      headers: Object.keys(firstVisit).join(','),
-    });
+    const csv = this.csvjson.toCSV(visits, { headers: 'key' });
 
     saveCsv(this.window, csv, filename);
   };
diff --git a/test/visits/services/VisitsExporter.test.ts b/test/visits/services/VisitsExporter.test.ts
index a0d66acb..e21c923a 100644
--- a/test/visits/services/VisitsExporter.test.ts
+++ b/test/visits/services/VisitsExporter.test.ts
@@ -44,9 +44,7 @@ describe('VisitsExporter', () => {
 
       exporter.exportVisits('my_visits.csv', visits);
 
-      expect(toCSV).toHaveBeenCalledWith(visits, {
-        headers: 'browser,city,country,date,latitude,longitude,os,referer',
-      });
+      expect(toCSV).toHaveBeenCalledWith(visits, { headers: 'key' });
     });
 
     it('skips execution when list of visits is empty', () => {