Introduce "BaseClient"

.eslintrc.js

@@ -27,6 +27,8 @@ module.exports = {
 
                 'prettier/prettier': 'error',
 
+                'class-methods-use-this': 'off',
+
                 'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
 
                 // just why

src/lib/requests/client/BaseClient.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import storage from '@/util/localStorage.tsx';
+
+// eslint-disable-next-line import/prefer-default-export
+export abstract class BaseClient<Client, ClientConfig, Fetcher> {
+    protected client!: Client;
+
+    public abstract readonly fetcher: Fetcher;
+
+    constructor() {
+        this.createClient();
+    }
+
+    public getBaseUrl(): string {
+        const { hostname, port, protocol } = window.location;
+
+        // if port is 3000 it's probably running from webpack development server
+        const inferredPort = port === '3000' ? '4567' : port;
+        return storage.getItem('serverBaseURL', `${protocol}//${hostname}:${inferredPort}`);
+    }
+
+    protected abstract createClient(): void;
+
+    public abstract updateConfig(config: Partial<ClientConfig>): void;
+}

src/lib/requests/client/RestClient.ts

@@ -7,7 +7,7 @@
  */
 
 import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
-import storage from '@/util/localStorage.tsx';
+import { BaseClient } from '@/lib/requests/client/BaseClient.ts';
 
 export enum HttpMethod {
     GET = 'get',
@@ -28,13 +28,10 @@ export interface IRestClient {
     patch<Data = any, Response = SimpleRestResponse<Data>>(url: string, data?: any): Promise<Response>;
 }
 
-export class RestClient implements IRestClient {
+export class RestClient
-    protected client!: AxiosInstance;
+    extends BaseClient<AxiosInstance, AxiosInstance['defaults'], <Data = any>(url: string, data: any) => Promise<Data>>
-
+    implements IRestClient
-    constructor() {
+{
-        this.createClient();
-    }
-
     public readonly fetcher = async <Data = any>(
         url: string,
         {
@@ -75,12 +72,8 @@ export class RestClient implements IRestClient {
         return result.data;
     };
 
-    private createClient(): void {
+    protected override createClient(): void {
-        const { hostname, port, protocol } = window.location;
+        const baseURL = this.getBaseUrl();
-
-        // if port is 3000 it's probably running from webpack development server
-        const inferredPort = port === '3000' ? '4567' : port;
-        const baseURL = storage.getItem('serverBaseURL', `${protocol}//${hostname}:${inferredPort}`);
 
         this.client = axios.create({
             // baseURL must not have trailing slash