Replaced unmaintained dependency

src/common/services/ReportExporter.ts

@@ -1,13 +1,10 @@
-import { CsvJson } from 'csvjson';
 import { NormalizedVisit } from '../../visits/types';
 import { ExportableShortUrl } from '../../short-urls/data';
 import { saveCsv } from '../../utils/helpers/files';
+import { JsonToCsv } from '../../utils/helpers/csvjson';
 
 export class ReportExporter {
-  public constructor(
-    private readonly window: Window,
-    private readonly csvjson: CsvJson,
-  ) {}
+  public constructor(private readonly window: Window, private readonly jsonToCsv: JsonToCsv) {}
 
   public readonly exportVisits = (filename: string, visits: NormalizedVisit[]) => {
     if (!visits.length) {
@@ -26,7 +23,7 @@ export class ReportExporter {
   };
 
   private readonly exportCsv = (filename: string, rows: object[]) => {
-    const csv = this.csvjson.toCSV(rows, { headers: 'key', wrap: true });
+    const csv = this.jsonToCsv(rows);
 
     saveCsv(this.window, csv, filename);
   };

src/common/services/provideServices.ts

@@ -20,7 +20,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.constant('axios', axios);
 
   bottle.service('ImageDownloader', ImageDownloader, 'axios', 'window');
-  bottle.service('ReportExporter', ReportExporter, 'window', 'csvjson');
+  bottle.service('ReportExporter', ReportExporter, 'window', 'jsonToCsv');
 
   // Components
   bottle.serviceFactory('ScrollToTop', ScrollToTop);

src/servers/services/ServersExporter.ts

@@ -1,8 +1,8 @@
 import { values } from 'ramda';
-import { CsvJson } from 'csvjson';
 import LocalStorage from '../../utils/services/LocalStorage';
 import { ServersMap, serverWithIdToServerData } from '../data';
 import { saveCsv } from '../../utils/helpers/files';
+import { JsonToCsv } from '../../utils/helpers/csvjson';
 
 const SERVERS_FILENAME = 'shlink-servers.csv';
 
@@ -10,14 +10,14 @@ export default class ServersExporter {
   public constructor(
     private readonly storage: LocalStorage,
     private readonly window: Window,
-    private readonly csvjson: CsvJson,
+    private readonly jsonToCsv: JsonToCsv,
   ) {}
 
   public readonly exportServers = async () => {
     const servers = values(this.storage.get<ServersMap>('servers') ?? {}).map(serverWithIdToServerData);
 
     try {
-      const csv = this.csvjson.toCSV(servers, { headers: 'key' });
+      const csv = this.jsonToCsv(servers);
 
       saveCsv(this.window, csv, SERVERS_FILENAME);
     } catch (e) {

src/servers/services/ServersImporter.ts

@@ -1,5 +1,5 @@
-import { CsvJson } from 'csvjson';
 import { ServerData } from '../data';
+import { CsvToJson } from '../../utils/helpers/csvjson';
 
 const validateServer = (server: any): server is ServerData =>
   typeof server.url === 'string' && typeof server.apiKey === 'string' && typeof server.name === 'string';
@@ -8,7 +8,7 @@ const validateServers = (servers: any): servers is ServerData[] =>
   Array.isArray(servers) && servers.every(validateServer);
 
 export class ServersImporter {
-  public constructor(private readonly csvJson: CsvJson, private readonly fileReaderFactory: () => FileReader) {}
+  public constructor(private readonly csvToJson: CsvToJson, private readonly fileReaderFactory: () => FileReader) {}
 
   public readonly importServersFromFile = async (file?: File | null): Promise<ServerData[]> => {
     if (!file) {
@@ -18,11 +18,11 @@ export class ServersImporter {
     const reader = this.fileReaderFactory();
 
     return new Promise((resolve, reject) => {
-      reader.addEventListener('loadend', (e: ProgressEvent<FileReader>) => {
+      reader.addEventListener('loadend', async (e: ProgressEvent<FileReader>) => {
         try {
           // TODO Read as stream, otherwise, if the file is too big, this will block the browser tab
           const content = e.target?.result?.toString() ?? '';
-          const servers = this.csvJson.toObject(content);
+          const servers = await this.csvToJson(content);
 
           if (!validateServers(servers)) {
             throw new Error('Provided file does not have the right format.');

src/servers/services/provideServices.ts

@@ -1,4 +1,3 @@
-import csvjson from 'csvjson';
 import Bottle from 'bottlejs';
 import CreateServer from '../CreateServer';
 import ServersDropdown from '../ServersDropdown';
@@ -69,10 +68,9 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   ));
 
   // Services
-  bottle.constant('csvjson', csvjson);
   bottle.constant('fileReaderFactory', () => new FileReader());
-  bottle.service('ServersImporter', ServersImporter, 'csvjson', 'fileReaderFactory');
-  bottle.service('ServersExporter', ServersExporter, 'Storage', 'window', 'csvjson');
+  bottle.service('ServersImporter', ServersImporter, 'csvToJson', 'fileReaderFactory');
+  bottle.service('ServersExporter', ServersExporter, 'Storage', 'window', 'jsonToCsv');
 
   // Actions
   bottle.serviceFactory('selectServer', selectServer, 'buildShlinkApiClient', 'loadMercureInfo');

src/utils/helpers/csvjson.ts

@@ -0,0 +1,12 @@
+import csv from 'csvtojson';
+import { parse } from 'json2csv';
+
+export const csvToJson = <T>(csvContent: string) => new Promise<T[]>((resolve) => {
+  csv().fromString(csvContent).then(resolve);
+});
+
+export type CsvToJson = typeof csvToJson;
+
+export const jsonToCsv = <T>(data: T[]): string => parse(data);
+
+export type JsonToCsv = typeof jsonToCsv;

src/utils/services/provideServices.ts

@@ -2,12 +2,16 @@ import Bottle from 'bottlejs';
 import { useStateFlagTimeout } from '../helpers/hooks';
 import LocalStorage from './LocalStorage';
 import ColorGenerator from './ColorGenerator';
+import { csvToJson, jsonToCsv } from '../helpers/csvjson';
 
 const provideServices = (bottle: Bottle) => {
   bottle.constant('localStorage', (global as any).localStorage);
   bottle.service('Storage', LocalStorage, 'localStorage');
   bottle.service('ColorGenerator', ColorGenerator, 'Storage');
 
+  bottle.constant('csvToJson', csvToJson);
+  bottle.constant('jsonToCsv', jsonToCsv);
+
   bottle.constant('setTimeout', global.setTimeout);
   bottle.constant('clearTimeout', global.clearTimeout);
   bottle.serviceFactory('useStateFlagTimeout', useStateFlagTimeout, 'setTimeout', 'clearTimeout');