Migrated all servers services to TS

src/container/index.ts

@@ -24,7 +24,7 @@ const mapActionService = (map: ActionMap, actionName: string): ActionMap => ({
   // Wrap actual action service in a function so that it is lazily created the first time it is called
   [actionName]: lazyService(container, actionName),
 });
-const connect: ConnectDecorator = (propsFromState: string[], actionServiceNames: string[] = []) =>
+const connect: ConnectDecorator = (propsFromState: string[] | null, actionServiceNames: string[] = []) =>
   reduxConnect(
     propsFromState ? pick(propsFromState) : null,
     actionServiceNames.reduce(mapActionService, {}),

src/container/types.ts

@@ -35,6 +35,6 @@ export interface ShlinkState {
   settings: Settings;
 }
 
-export type ConnectDecorator = (props: string[], actions?: string[]) => any;
+export type ConnectDecorator = (props: string[] | null, actions?: string[]) => any;
 
 export type GetState = () => ShlinkState;

src/servers/services/ServersExporter.ts

@@ -1,6 +1,9 @@
 import { dissoc, head, keys, values } from 'ramda';
+import { CsvJson } from 'csvjson';
+import LocalStorage from '../../utils/services/LocalStorage';
+import { ServersMap } from '../data';
 
-const saveCsv = (window, csv) => {
+const saveCsv = (window: Window, csv: string) => {
   const { navigator, document } = window;
   const filename = 'shlink-servers.csv';
   const blob = new Blob([ csv ], { type: 'text/csv;charset=utf-8;' });
@@ -25,14 +28,14 @@ const saveCsv = (window, csv) => {
 };
 
 export default class ServersExporter {
-  constructor(storage, window, csvjson) {
-    this.storage = storage;
-    this.window = window;
-    this.csvjson = csvjson;
-  }
+  public constructor(
+    private readonly storage: LocalStorage,
+    private readonly window: Window,
+    private readonly csvjson: CsvJson,
+  ) {}
 
-  exportServers = async () => {
-    const servers = values(this.storage.get('servers') || {}).map(dissoc('id'));
+  public readonly exportServers = async () => {
+    const servers = values(this.storage.get<ServersMap>('servers') || {}).map(dissoc('id'));
 
     try {
       const csv = this.csvjson.toCSV(servers, {

src/servers/services/ServersImporter.ts

@@ -6,7 +6,7 @@ const CSV_MIME_TYPE = 'text/csv';
 export default class ServersImporter {
   public constructor(private readonly csvjson: CsvJson, private readonly fileReaderFactory: () => FileReader) {}
 
-  public importServersFromFile = async (file?: File | null): Promise<ServerData[]> => {
+  public readonly importServersFromFile = async (file?: File | null): Promise<ServerData[]> => {
     if (!file || file.type !== CSV_MIME_TYPE) {
       throw new Error('No file provided or file is not a CSV');
     }

src/servers/services/provideServices.ts

@@ -1,4 +1,5 @@
 import csvjson from 'csvjson';
+import Bottle, { Decorator } from 'bottlejs';
 import CreateServer from '../CreateServer';
 import ServersDropdown from '../ServersDropdown';
 import DeleteServerModal from '../DeleteServerModal';
@@ -10,10 +11,11 @@ import { createServer, createServers, deleteServer, editServer } from '../reduce
 import { fetchServers } from '../reducers/remoteServers';
 import ForServerVersion from '../helpers/ForServerVersion';
 import { ServerError } from '../helpers/ServerError';
+import { ConnectDecorator } from '../../container/types';
 import ServersImporter from './ServersImporter';
 import ServersExporter from './ServersExporter';
 
-const provideServices = (bottle, connect, withRouter) => {
+const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter: Decorator) => {
   // Components
   bottle.serviceFactory('CreateServer', CreateServer, 'ImportServersBtn', 'useStateFlagTimeout');
   bottle.decorator('CreateServer', connect([ 'selectedServer' ], [ 'createServer', 'resetSelectedServer' ]));

src/utils/services/LocalStorage.ts

@@ -0,0 +1,14 @@
+const PREFIX = 'shlink';
+const buildPath = (path: string) => `${PREFIX}.${path}`;
+
+export default class LocalStorage {
+  public constructor(private readonly localStorage: Storage) {}
+
+  public readonly get = <T>(key: string): T => {
+    const item = this.localStorage.getItem(buildPath(key));
+
+    return item ? JSON.parse(item) : undefined;
+  };
+
+  public readonly set = (key: string, value: any) => this.localStorage.setItem(buildPath(key), JSON.stringify(value));
+}

src/utils/services/Storage.js

@@ -1,16 +0,0 @@
-const PREFIX = 'shlink';
-const buildPath = (path) => `${PREFIX}.${path}`;
-
-export default class Storage {
-  constructor(localStorage) {
-    this.localStorage = localStorage;
-  }
-
-  get = (key) => {
-    const item = this.localStorage.getItem(buildPath(key));
-
-    return item ? JSON.parse(item) : undefined;
-  };
-
-  set = (key, value) => this.localStorage.setItem(buildPath(key), JSON.stringify(value));
-}

src/utils/services/provideServices.ts

@@ -1,13 +1,13 @@
 import axios from 'axios';
 import Bottle from 'bottlejs';
 import { useStateFlagTimeout } from '../helpers/hooks';
-import Storage from './Storage';
+import LocalStorage from './LocalStorage';
 import ColorGenerator from './ColorGenerator';
 import buildShlinkApiClient from './ShlinkApiClientBuilder';
 
 const provideServices = (bottle: Bottle) => {
   bottle.constant('localStorage', (global as any).localStorage);
-  bottle.service('Storage', Storage, 'localStorage');
+  bottle.service('Storage', LocalStorage, 'localStorage');
   bottle.service('ColorGenerator', ColorGenerator, 'Storage');
 
   bottle.constant('axios', axios);