Wrapped logic to perform HTTP requests with fetch into an HttpClient class

src/api/services/ShlinkApiClient.ts

@@ -20,7 +20,7 @@ import {
 import { orderToString } from '../../utils/helpers/ordering';
 import { isRegularNotFound, parseApiError } from '../utils';
 import { stringifyQuery } from '../../utils/helpers/query';
-import { JsonFetch } from '../../utils/types';
+import { HttpClient } from '../../common/services/HttpClient';
 
 const buildShlinkBaseUrl = (url: string, version: 2 | 3) => `${url}/rest/v${version}`;
 const rejectNilProps = reject(isNil);
@@ -34,7 +34,7 @@ export class ShlinkApiClient {
   private apiVersion: 2 | 3;
 
   public constructor(
-    private readonly fetch: JsonFetch,
+    private readonly httpClient: HttpClient,
     private readonly baseUrl: string,
     private readonly apiKey: string,
   ) {
@@ -119,11 +119,14 @@ export class ShlinkApiClient {
     const normalizedQuery = stringifyQuery(rejectNilProps(query));
     const stringifiedQuery = isEmpty(normalizedQuery) ? '' : `?${normalizedQuery}`;
 
-    return this.fetch<T>(`${buildShlinkBaseUrl(this.baseUrl, this.apiVersion)}${url}${stringifiedQuery}`, {
-      method,
-      body: body && JSON.stringify(body),
-      headers: { 'X-Api-Key': this.apiKey },
-    }).catch((e: unknown) => {
+    return this.httpClient.fetchJson<T>(
+      `${buildShlinkBaseUrl(this.baseUrl, this.apiVersion)}${url}${stringifiedQuery}`,
+      {
+        method,
+        body: body && JSON.stringify(body),
+        headers: { 'X-Api-Key': this.apiKey },
+      },
+    ).catch((e: unknown) => {
       if (!isRegularNotFound(parseApiError(e))) {
         throw e;
       }

src/api/services/ShlinkApiClientBuilder.ts

@@ -1,7 +1,7 @@
 import { hasServerData, ServerWithId } from '../../servers/data';
 import { GetState } from '../../container/types';
 import { ShlinkApiClient } from './ShlinkApiClient';
-import { JsonFetch } from '../../utils/types';
+import { HttpClient } from '../../common/services/HttpClient';
 
 const apiClients: Record<string, ShlinkApiClient> = {};
 
@@ -16,14 +16,14 @@ const getSelectedServerFromState = (getState: GetState): ServerWithId => {
   return selectedServer;
 };
 
-export const buildShlinkApiClient = (fetch: JsonFetch) => (getStateOrSelectedServer: GetState | ServerWithId) => {
+export const buildShlinkApiClient = (httpClient: HttpClient) => (getStateOrSelectedServer: GetState | ServerWithId) => {
   const { url, apiKey } = isGetState(getStateOrSelectedServer)
     ? getSelectedServerFromState(getStateOrSelectedServer)
     : getStateOrSelectedServer;
   const clientKey = `${url}_${apiKey}`;
 
   if (!apiClients[clientKey]) {
-    apiClients[clientKey] = new ShlinkApiClient(fetch, url, apiKey);
+    apiClients[clientKey] = new ShlinkApiClient(httpClient, url, apiKey);
   }
 
   return apiClients[clientKey];

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, 'jsonFetch');
+  bottle.serviceFactory('buildShlinkApiClient', buildShlinkApiClient, 'HttpClient');
 };
 
 export default provideServices;

src/common/services/HttpClient.ts

@@ -0,0 +1,21 @@
+import { Fetch } from '../../utils/types';
+
+export class HttpClient {
+  constructor(private readonly fetch: Fetch) {}
+
+  public fetchJson<T>(url: string, options?: RequestInit): Promise<T> {
+    return this.fetch(url, options).then(async (resp) => {
+      const parsed = await resp.json();
+
+      if (!resp.ok) {
+        throw parsed;
+      }
+
+      return parsed as T;
+    });
+  }
+
+  public fetchBlob(url: string): Promise<Blob> {
+    return this.fetch(url).then((resp) => resp.blob());
+  }
+}

src/common/services/ImageDownloader.ts

@@ -1,11 +1,11 @@
-import { Fetch } from '../../utils/types';
 import { saveUrl } from '../../utils/helpers/files';
+import { HttpClient } from './HttpClient';
 
 export class ImageDownloader {
-  public constructor(private readonly fetch: Fetch, private readonly window: Window) {}
+  public constructor(private readonly httpClient: HttpClient, private readonly window: Window) {}
 
   public async saveImage(imgUrl: string, filename: string): Promise<void> {
-    const data = await this.fetch(imgUrl).then((resp) => resp.blob());
+    const data = await this.httpClient.fetchBlob(imgUrl);
     const url = URL.createObjectURL(data);
 
     saveUrl(this.window, url, filename);

src/common/services/provideServices.ts

@@ -11,16 +11,16 @@ 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';
+import { HttpClient } from './HttpClient';
 
 const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Services
   bottle.constant('window', (global as any).window);
   bottle.constant('console', global.console);
   bottle.constant('fetch', (global as any).fetch.bind(global));
-  bottle.serviceFactory('jsonFetch', jsonFetch, 'fetch');
 
-  bottle.service('ImageDownloader', ImageDownloader, 'fetch', 'window');
+  bottle.service('HttpClient', HttpClient, 'fetch');
+  bottle.service('ImageDownloader', ImageDownloader, 'HttpClient', 'window');
   bottle.service('ReportExporter', ReportExporter, 'window', 'jsonToCsv');
 
   // Components

src/servers/reducers/remoteServers.ts

@@ -2,14 +2,14 @@ import pack from '../../../package.json';
 import { hasServerData, ServerData } from '../data';
 import { createServers } from './servers';
 import { createAsyncThunk } from '../../utils/helpers/redux';
-import { JsonFetch } from '../../utils/types';
+import { HttpClient } from '../../common/services/HttpClient';
 
 const responseToServersList = (data: any): ServerData[] => (Array.isArray(data) ? data.filter(hasServerData) : []);
 
-export const fetchServers = (fetch: JsonFetch) => createAsyncThunk(
+export const fetchServers = (httpClient: HttpClient) => createAsyncThunk(
   'shlink/remoteServers/fetchServers',
   async (_: void, { dispatch }): Promise<void> => {
-    const resp = await fetch<any>(`${pack.homepage}/servers.json`);
+    const resp = await httpClient.fetchJson<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, 'jsonFetch');
+  bottle.serviceFactory('fetchServers', fetchServers, 'HttpClient');
 
   bottle.serviceFactory('resetSelectedServer', () => resetSelectedServer);
 

src/utils/helpers/fetch.ts

@@ -1,10 +0,0 @@
-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;
-  });