feat: add basePath option and optimize SRP

Author: mauricesnip

CHANGELOG.md

@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Added
+
+- Option to define `basePath`.
+
+### Fixed
+
+- Default value for `option` parameters.
+- Optimizations for single responsibility principle (SRP).
+
 ## [0.2.0] - 2023-04-17
 
 ### Added

README.md

@@ -126,7 +126,8 @@ Creates a client.
 | Parameter                | Required? | Type                | Default                    | Description                                                           |
 |:-------------------------|:----------|:--------------------|:---------------------------|:----------------------------------------------------------------------|
 | `options`                | No        | `Object`            | `{}`                       | The options for the client.                                           |
-| `options.baseUrl`        | No        | `string`            | `window.location.pathname` | The base URL for the API.                                             |
+| `options.basePath`       | No        | `string`            | `/api`                     | The base path of the API.                                             |
+| `options.baseUrl`        | No        | `string`            | `window.location.pathname` | The base URL of the API.                                              |
 | `options.fetchClient`    | No        | `Function`          | `fetch`                    | The fetch client to use. Tested with `fetch` and `axios`.             |
 | `options.fetchOptions`   | No        | `Object`            | `{}`                       | The fetch client options.                                             |
 | `options.locale`         | No        | `string`            | `''`                       | The locale for every request.                                         |

src/client.js

@@ -4,6 +4,7 @@
  * An API client for SuluHeadlessBundle.
  */
 export default class Client {
+    basePath;
     baseUrl;
     fetchClient;
     fetchOptions;
@@ -15,8 +16,9 @@ export default class Client {
     /**
      * Creates a client.
      *
-     * @param {Object} options - The options for the client.
-     * @param {string} [options.baseUrl=window.location.origin] - The base URL for the API.
+     * @param {Object} [options={}] - The options for the client.
+     * @param {string} [options.baseUrl='/api'] - The base path of the API.
+     * @param {string} [options.baseUrl=window.location.origin] - The base URL of the API.
      * @param {function} [options.fetchClient=fetch.bind(window)] - The fetch client to use.
      * @param {Object} [options.fetchOptions={}] - The fetch client options.
      * @param {string} [options.locale=''] - The locale for every request.
@@ -25,14 +27,16 @@ export default class Client {
      * @param {boolean} [options.removeEmbedded=false] - Whether to remove the _embedded layer from the response if present.
      */
     constructor({
+        basePath = '/api',
         baseUrl = window.location.origin,
         fetchClient = fetch.bind(window),
         fetchOptions = {},
         locale = '',
         onError = () => {},
         onResponse = (r) => r,
         removeEmbedded = false,
-    }) {
+    } = {}) {
+        this.basePath = basePath;
         this.baseUrl = baseUrl;
         this.fetchClient = fetchClient;
         this.fetchOptions = fetchOptions;
@@ -46,12 +50,25 @@ export default class Client {
      * Builds a URL with the given path and optional query parameters.
      *
      * @param {string} path - The path for the URL.
-     * @param {Object} [params={}] - The query parameters for the URL.
-     * @param {boolean} [withLocale=true] - Whether to prepend locale to path.
+     * @param {Object} [options={}] - The options for building the URL.
+     * @param {Object} [options.params={}] - The query parameters for the URL.
+     * @param {boolean} [options.withBasePath=true] - Whether to apply the base path.
+     * @param {boolean} [options.withLocale=true] - Whether to prepend locale to path.
      * @returns {URL} The built URL.
      */
-    buildUrl(path, params = {}, withLocale = true) {
-        const url = new URL((this.locale && withLocale ? `/${this.locale}` : '') + path, this.baseUrl);
+    buildUrl(
+        path,
+        {
+            params = {},
+            withBasePath = true,
+            withLocale = true,
+        } = {}
+    ) {
+        const url = new URL([
+            ...(this.locale && withLocale ? [this.locale] : []),
+            ...(this.basePath && withBasePath ? [this.basePath] : []),
+            path,
+        ].join('/').replaceAll('//', '/'), this.baseUrl);
 
         if(params) {
             url.search = new URLSearchParams(params);
@@ -61,21 +78,16 @@ export default class Client {
     }
 
     /**
-     * Sends a request to the API with the given path and query parameters.
+     * Sends a request to the API with the given path and URL options.
      *
-     * @param {string} path - The path for the request.
-     * @param {Object} [params] - The query parameters for the request.
-     * @param {boolean} [withLocale] - Whether to build a localized URL.
+     * @param {URL} url - The URL for the request.
      * @returns {Promise<Object>} A Promise that resolves to the request's JSON.
      */
-    async request(path, params, withLocale) {
+    async request(url) {
         let response = null;
 
         try {
-            response = await this.fetchClient(
-                this.buildUrl(path, params, withLocale).toString(),
-                this.fetchOptions
-            );
+            response = await this.fetchClient(url.toString(), this.fetchOptions);
         } catch (error) {
             this.onError(error);
             throw error;
@@ -107,7 +119,12 @@ export default class Client {
      * @returns {Promise<Object>} A Promise that resolves to the page data.
      */
     getPageByPath(path) {
-        return this.request(`${path}.json`, null, false);
+        return this.request(
+            this.buildUrl(`${path}.json`, {
+                withBasePath: false,
+                withLocale: false,
+            }
+        ));
     }
 
     /**
@@ -118,7 +135,11 @@ export default class Client {
      * @returns {Promise<Object>} A Promise that resolves to the navigation data.
      */
     getNavigationByKey(key, params) {
-        return this.request(`/api/navigations/${key}`, params);
+        return this.request(
+            this.buildUrl(`/navigations/${key}`, {
+                params,
+            }
+        ));
     }
 
     /**
@@ -129,7 +150,11 @@ export default class Client {
      * @returns {Promise<Object>} A Promise that resolves to the snippet area data.
      */
     getSnippetByArea(area, params) {
-        return this.request(`/api/snippet-areas/${area}`, params);
+        return this.request(
+            this.buildUrl(`/snippet-areas/${area}`, {
+                params,
+            })
+        );
     }
 
     /**
@@ -139,8 +164,12 @@ export default class Client {
      * @returns {Promise<Object>} A Promise that resolves to the search results.
      */
     search(query) {
-        return this.request('/api/search', {
-            q: query,
-        });
+        return this.request(
+            this.buildUrl('/search', {
+                params: {
+                    q: query,
+                },
+            }
+        ));
     }
 }

tests/client.spec.js

@@ -5,7 +5,7 @@ import axios from 'axios';
 // Provide origin
 global.window = {
     location: {
-        origin: 'http://127.0.0.1:3000',
+        origin: 'http://localhost:3000',
     },
 };
 
@@ -15,26 +15,34 @@ test.describe('Client', () => {
 
     // Single client for all tests
     test.beforeAll(async () => {
-        client = new Client({});
+        client = new Client();
     });
 
     // Feature tests
     test('should build a correct URL without params', async () => {
-        const url = client.buildUrl('/test');
-        expect(url.toString()).toBe(`${client.baseUrl}/test`);
+        const url = client.buildUrl('/test.json', {
+            withBasePath: false,
+        });
+        expect(url.toString()).toBe(`${client.baseUrl}/test.json`);
     });
 
     test('should build a correct URL with params', async () => {
-        const url = client.buildUrl('/test', {
-            foo: 'bar',
-            baz: 'qux',
+        const url = client.buildUrl('/test.json', {
+            params: {
+                foo: 'bar',
+                baz: 'qux',
+            },
+            withBasePath: false,
         });
-        expect(url.toString()).toBe(`${client.baseUrl}/test?foo=bar&baz=qux`);
+        expect(url.toString()).toBe(`${client.baseUrl}/test.json?foo=bar&baz=qux`);
     });
 
     test('should build a correct URL with falsy params', async () => {
-        const url = client.buildUrl('/test', false);
-        expect(url.toString()).toBe(`${client.baseUrl}/test`);
+        const url = client.buildUrl('/test.json', {
+            params: false,
+            withBasePath: false,
+        });
+        expect(url.toString()).toBe(`${client.baseUrl}/test.json`);
     });
 
     test('should transform response', async () => {