feat: localization support

Author: mauricesnip

CHANGELOG.md

@@ -7,9 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Support for localization.
+
 ### Fixed
 
-- Improved JSDoc
+- Improved JSDoc.
 
 ## [0.1.0] - 2023-04-14
 

README.md

@@ -129,6 +129,7 @@ Creates a client.
 | `options.baseUrl`        | No        | `string`            | `window.location.pathname` | The base URL for 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.                                         |
 | `options.onError`        | No        | `Function(error)`   | `() => {}`                 | The function to call on error.                                        |
 | `options.onResponse`     | No        | `Function(reponse)` | `(r) => r`                 | The function to call on response.                                     |
 | `options.removeEmbedded` | No        | `boolean`           | `false`                    | Whether to remove the `_embedded` layer from the response if present. |

mock-api.json

@@ -143,6 +143,87 @@
       "enabled": true,
       "responseMode": null,
       "type": "http"
+    },
+    {
+      "uuid": "340d0baf-a233-4e54-9f33-521d2b94b251",
+      "type": "http",
+      "documentation": "",
+      "method": "get",
+      "endpoint": ":locale/:page.json",
+      "responses": [
+        {
+          "uuid": "219e2896-e921-44b5-a0a9-06ee35c48da0",
+          "body": "",
+          "latency": 0,
+          "statusCode": 200,
+          "label": "",
+          "headers": [],
+          "bodyType": "DATABUCKET",
+          "filePath": "",
+          "databucketID": "48s8",
+          "sendFileAsBody": false,
+          "rules": [],
+          "rulesOperator": "OR",
+          "disableTemplating": false,
+          "fallbackTo404": false,
+          "default": true
+        }
+      ],
+      "enabled": true,
+      "responseMode": null
+    },
+    {
+      "uuid": "e4445514-4bbf-4bfd-bb6e-2b03b904d2ea",
+      "documentation": "",
+      "method": "get",
+      "endpoint": ":locale/api/snippet-areas/:area",
+      "responses": [
+        {
+          "uuid": "a86e39e6-5e1b-4339-8124-cd74d0a9ee97",
+          "body": "",
+          "latency": 0,
+          "statusCode": 200,
+          "label": "",
+          "headers": [],
+          "filePath": "",
+          "sendFileAsBody": false,
+          "rules": [],
+          "rulesOperator": "OR",
+          "disableTemplating": false,
+          "fallbackTo404": false,
+          "default": true,
+          "databucketID": "48s8",
+          "bodyType": "DATABUCKET"
+        },
+        {
+          "uuid": "a647df05-8e5b-4b4e-916b-bf62a5cafde1",
+          "body": "{\n  \"message\": \"Snippet area does not exist\"\n}",
+          "latency": 0,
+          "statusCode": 404,
+          "label": "",
+          "headers": [],
+          "bodyType": "INLINE",
+          "filePath": "",
+          "databucketID": "",
+          "sendFileAsBody": false,
+          "rules": [
+            {
+              "target": "params",
+              "modifier": "area",
+              "value": "non-existent",
+              "invert": false,
+              "operator": "equals"
+            }
+          ],
+          "rulesOperator": "OR",
+          "disableTemplating": false,
+          "fallbackTo404": false,
+          "default": false
+        }
+      ],
+      "enabled": true,
+      "responseMode": null,
+      "type": "http"
     }
   ],
   "proxyMode": false,
@@ -195,6 +276,13 @@
       "name": "Content response",
       "documentation": "",
       "value": "{\n  \"content\": {\n    \"title\": \"Lorem ipsum\"\n  }\n}"
+    },
+    {
+      "uuid": "5ae3fa4a-5348-4264-bba6-85e76e93473e",
+      "id": "48s8",
+      "name": "Locallized content response",
+      "documentation": "",
+      "value": "{\n  \"content\": {\n    \"title\": \"Hello world\"\n  }\n}"
     }
   ],
   "folders": [],
@@ -214,6 +302,14 @@
     {
       "type": "route",
       "uuid": "96421bb6-dfea-4dce-9a5b-3da89896feee"
+    },
+    {
+      "type": "route",
+      "uuid": "340d0baf-a233-4e54-9f33-521d2b94b251"
+    },
+    {
+      "type": "route",
+      "uuid": "e4445514-4bbf-4bfd-bb6e-2b03b904d2ea"
     }
   ]
 }

src/client.js

@@ -7,6 +7,7 @@ export default class Client {
     baseUrl;
     fetchClient;
     fetchOptions;
+    locale;
     onError;
     onResponse;
     removeEmbedded;
@@ -18,6 +19,7 @@ export default class Client {
      * @param {string} [options.baseUrl=window.location.origin] - The base URL for 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.
      * @param {function} [options.onError=() => {}] - The function to call on error.
      * @param {function} [options.onResponse=(r) => r] - The function to call on response.
      * @param {boolean} [options.removeEmbedded=false] - Whether to remove the _embedded layer from the response if present.
@@ -26,13 +28,15 @@ export default class Client {
         baseUrl = window.location.origin,
         fetchClient = fetch.bind(window),
         fetchOptions = {},
+        locale = '',
         onError = () => {},
         onResponse = (r) => r,
         removeEmbedded = false,
     }) {
         this.baseUrl = baseUrl;
         this.fetchClient = fetchClient;
         this.fetchOptions = fetchOptions;
+        this.locale = locale;
         this.onError = onError;
         this.onResponse = onResponse;
         this.removeEmbedded = removeEmbedded;
@@ -43,10 +47,11 @@ export default class Client {
      *
      * @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.
      * @returns {URL} The built URL.
      */
-    buildUrl(path, params = {}) {
-        const url = new URL(path, this.baseUrl);
+    buildUrl(path, params = {}, withLocale = true) {
+        const url = new URL((this.locale && withLocale ? `/${this.locale}` : '') + path, this.baseUrl);
         url.search = new URLSearchParams(params);
 
         return url;
@@ -56,15 +61,16 @@ export default class Client {
      * Sends a request to the API with the given path and query parameters.
      *
      * @param {string} path - The path for the request.
-     * @param {Object} [params={}] - The query parameters for the request.
+     * @param {Object} [params] - The query parameters for the request.
+     * @param {boolean} [withLocale] - Whether to build a localized URL.
      * @returns {Promise<Object>} A Promise that resolves to the request's JSON.
      */
-    async request(path, params = {}) {
+    async request(path, params, withLocale) {
         let response = null;
 
         try {
             response = await this.fetchClient(
-                this.buildUrl(path, params).toString(),
+                this.buildUrl(path, params, withLocale).toString(),
                 this.fetchOptions
             );
         } catch (error) {
@@ -98,7 +104,7 @@ export default class Client {
      * @returns {Promise<Object>} A Promise that resolves to the page data.
      */
     getPageByPath(path) {
-        return this.request(`${path}.json`);
+        return this.request(`${path}.json`, null, false);
     }
 
     /**

tests/client.spec.js

@@ -85,4 +85,20 @@ test.describe('Client', () => {
         const data = await client.search('lorem');
         expect(data).toHaveProperty('_embedded.hits');
     });
+
+    test('should retrieve localized page data by path', async () => {
+        const originalLocale = client.locale;
+        client.locale = 'en';
+        const data = await client.getPageByPath('/en/hello-world');
+        client.locale = originalLocale;
+        expect(data.content.title).toBe('Hello world');
+    });
+
+    test('should retrieve localized snippet data by area name', async () => {
+        const originalLocale = client.locale;
+        client.locale = 'en';
+        const data = await client.getSnippetByArea('default');
+        client.locale = originalLocale;
+        expect(data.content.title).toBe('Hello world');
+    });
 });