Extracted helper fetch function and migrated remoteServers redux action from axios to fetch

src/api/services/ShlinkApiClient.ts

@@ -119,29 +119,19 @@ export class ShlinkApiClient {
     const normalizedQuery = stringifyQuery(rejectNilProps(query));
     const stringifiedQuery = isEmpty(normalizedQuery) ? '' : `?${normalizedQuery}`;
 
-    return this.fetch(`${buildShlinkBaseUrl(this.baseUrl, this.apiVersion)}${url}${stringifiedQuery}`, {
+    return this.fetch<T>(`${buildShlinkBaseUrl(this.baseUrl, this.apiVersion)}${url}${stringifiedQuery}`, {
       method,
       body: body && JSON.stringify(body),
       headers: { 'X-Api-Key': this.apiKey },
-    })
-      .then(async (resp) => {
-        const parsed = await resp.json();
+    }).catch((e: unknown) => {
+      if (!isRegularNotFound(parseApiError(e))) {
+        throw e;
+      }
 
-        if (!resp.ok) {
-          throw parsed; // eslint-disable-line @typescript-eslint/no-throw-literal
-        }
-
-        return parsed as T; // TODO Improve type inference here without explicit casting
-      })
-      .catch((e: unknown) => {
-        if (!isRegularNotFound(parseApiError(e))) {
-          throw e;
-        }
-
-        // If we capture a not found error, let's assume this Shlink version does not support API v3, so we decrease to
-        // v2 and retry
-        this.apiVersion = 2;
-        return this.performRequest(url, method, query, body);
-      });
+      // If we capture a not found error, let's assume this Shlink version does not support API v3, so we decrease to
+      // v2 and retry
+      this.apiVersion = 2;
+      return this.performRequest(url, method, query, body);
+    });
   };
 }

src/api/services/provideServices.ts

@@ -2,7 +2,7 @@ import Bottle from 'bottlejs';
 import { buildShlinkApiClient } from './ShlinkApiClientBuilder';
 
 const provideServices = (bottle: Bottle) => {
-  bottle.serviceFactory('buildShlinkApiClient', buildShlinkApiClient, 'fetch');
+  bottle.serviceFactory('buildShlinkApiClient', buildShlinkApiClient, 'jsonFetch');
 };
 
 export default provideServices;

src/common/services/provideServices.ts

@@ -12,6 +12,7 @@ import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServ
 import { sidebarNotPresent, sidebarPresent } from '../reducers/sidebar';
 import { ImageDownloader } from './ImageDownloader';
 import { ReportExporter } from './ReportExporter';
+import { jsonFetch } from '../../utils/helpers/fetch';
 
 const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Services
@@ -19,6 +20,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.constant('console', global.console);
   bottle.constant('axios', axios);
   bottle.constant('fetch', (global as any).fetch.bind((global as any)));
+  bottle.serviceFactory('jsonFetch', jsonFetch, 'fetch');
 
   bottle.service('ImageDownloader', ImageDownloader, 'axios', 'window');
   bottle.service('ReportExporter', ReportExporter, 'window', 'jsonToCsv');

src/servers/reducers/remoteServers.ts

@@ -1,19 +1,15 @@
-import { pipe, prop } from 'ramda';
-import { AxiosInstance } from 'axios';
 import pack from '../../../package.json';
 import { hasServerData, ServerData } from '../data';
 import { createServers } from './servers';
 import { createAsyncThunk } from '../../utils/helpers/redux';
+import { Fetch } from '../../utils/types';
 
-const responseToServersList = pipe(
-  prop<any, any>('data'),
-  (data: any): ServerData[] => (Array.isArray(data) ? data.filter(hasServerData) : []),
-);
+const responseToServersList = (data: any): ServerData[] => (Array.isArray(data) ? data.filter(hasServerData) : []);
 
-export const fetchServers = ({ get }: AxiosInstance) => createAsyncThunk(
+export const fetchServers = (fetch: Fetch) => createAsyncThunk(
   'shlink/remoteServers/fetchServers',
   async (_: void, { dispatch }): Promise<void> => {
-    const resp = await get(`${pack.homepage}/servers.json`);
+    const resp = await fetch<any>(`${pack.homepage}/servers.json`);
     const result = responseToServersList(resp);
 
     dispatch(createServers(result));

src/servers/services/provideServices.ts

@@ -80,7 +80,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.serviceFactory('deleteServer', () => deleteServer);
   bottle.serviceFactory('editServer', () => editServer);
   bottle.serviceFactory('setAutoConnect', () => setAutoConnect);
-  bottle.serviceFactory('fetchServers', fetchServers, 'axios');
+  bottle.serviceFactory('fetchServers', fetchServers, 'jsonFetch');
 
   bottle.serviceFactory('resetSelectedServer', () => resetSelectedServer);
 

src/utils/helpers/fetch.ts

@@ -0,0 +1,10 @@
+export const jsonFetch = (fetch: typeof window.fetch) => <T>(url: string, options?: RequestInit) => fetch(url, options)
+  .then(async (resp) => {
+    const parsed = await resp.json();
+
+    if (!resp.ok) {
+      throw parsed; // eslint-disable-line @typescript-eslint/no-throw-literal
+    }
+
+    return parsed as T;
+  });

src/utils/types.ts

@@ -1,3 +1,3 @@
 export type MediaMatcher = (query: string) => MediaQueryList;
 
-export type Fetch = typeof window.fetch;
+export type Fetch = <T>(url: string, options?: RequestInit) => Promise<T>;