[jslib] Refactored Acknowledgements with Enhanced HTTP Utilities #9999

HenriRabalais · 2025-09-08T18:39:10Z

This PR refactors the acknowledgements page to use a new, more robust and reusable API client and a suite of custom error classes. This change modernizes our data fetching approach by moving away from raw fetch requests and adopting a structured, type-safe methodology.

Key Changes

Introduced a new Core Library: Added a new directory at jslib/core containing:

Client.ts: A generic, extensible class for handling API requests (GET, POST, PUT). It includes robust error handling for network issues, HTTP response statuses (e.g., 404), and JSON parsing errors.
Query.ts: A class for building type-safe URL query strings, supporting various operators and parameters.
Added Custom Error Classes: A comprehensive set of custom error classes are now available at jslib/core/errors to provide more context for debugging API failures. This includes ApiNetworkError, ApiResponseError, JsonParseError, and more.

Introduced a Entities Library: Added a new directory at jslib/entities containing:

Acknowledgment entity and affiliated type and client
This will eventually house all LORIS entities, and contexts they provide, specific errors, hooks, components, etc.

Updated Acknowledgements Module

The acknowledgementsIndex.js file has been refactored to use the new AcknowledgementClient instead of a raw fetch call. This significantly cleans up the component's logic and separates concerns.
The AcknowledgementClient is a specialized client that extends the new generic Client.ts, providing an interface for interacting with the acknowledgements API.

Misc

Module and Path Configuration: Updated package.json, tsconfig.json, and webpack.config.ts to support the new libraries, including:
New dependencies: stream-browserify, pbkdf2, and transliteration.

HenriRabalais · 2025-09-08T18:39:54Z

htdocs/index.php

    $factory->config(),
    [
-        __DIR__ . "/../project/",
+        __DIR__ . "/../project/modules",


needed to get things to load...

HenriRabalais · 2025-09-08T18:41:04Z

webpack.config.ts

  fallback: {
    fs: false,
    path: false,
+    stream: require.resolve("stream-browserify"),


npm compile was giving errors without this

HenriRabalais · 2025-09-08T18:41:15Z

package.json

        "jstat": "^1.9.5",
        "jszip": "^3.10.1",
        "papaparse": "^5.3.0",
+        "pbkdf2": "^3.1.3",


npm compile was giving errors without these

HenriRabalais · 2025-09-09T11:34:11Z

jslib/core/http/Client.ts

+export class Client<T> {
+  protected baseUrl: string;
+  protected subEndpoint?: string;
+  public getCustomMessage: (


this is to allow each Client concrete class to define it's own errors across all the error types, not sure if it's the best implementation, but it seems to work — maybe it just needs a better name. return type be something like Record<string, string>

modules/acknowledgements/jsx/acknowledgementsIndex.js

HenriRabalais · 2025-09-11T21:45:36Z

@driusan @ridz1208 would love your thoughts on this! Hoping to extend this to more parts of loris after and add more entities. I'm also curious what you think of the directory structure I've started to build out, as it will likely get expanded. Should everything live in jslib? I'm thinking the top level components that currently live in jsx/ should also get moved into what ever the top level javascript directory is and live under a /components directory of sorts.

HenriRabalais · 2025-09-16T16:11:44Z

jslib/core/errors/BaseError.ts

+ * Base class for all custom API-related errors.
+ */
+export class BaseError extends Error {
+  public name: string;


need to delete this since name is already a property of Error

HenriRabalais · 2025-10-08T13:56:47Z

@kongtiaowang could you help me with these errors?

 ✘ Filters
   │
   │ Facebook\WebDriver\Exception\NoSuchElementException: Unable to locate element: input[name="fullName"]
   │
   │ /app/vendor/php-webdriver/webdriver/lib/Exception/WebDriverException.php:120
   │ /app/vendor/php-webdriver/webdriver/lib/Remote/HttpCommandExecutor.php:359
   │ /app/vendor/php-webdriver/webdriver/lib/Remote/RemoteWebDriver.php:601
   │ /app/vendor/php-webdriver/webdriver/lib/Remote/RemoteWebDriver.php:217
   │ /app/vendor/php-webdriver/webdriver/lib/WebDriverExpectedCondition.php:177
   │ /app/vendor/php-webdriver/webdriver/lib/WebDriverWait.php:54
   │ /app/test/integrationtests/LorisIntegrationTest.class.inc:544
   │ /app/test/integrationtests/LorisIntegrationTest.class.inc:707
   │ /app/modules/acknowledgements/test/AcknowledgementsIntegrationTest.php:170
   │
 ✔ Cant add new record
 ✘ Config setting policy
   │
   │ Facebook\WebDriver\Exception\NoSuchElementException: Unable to locate element: #citationPolicy
   │
   │ /app/vendor/php-webdriver/webdriver/lib/Exception/WebDriverException.php:120
   │ /app/vendor/php-webdriver/webdriver/lib/Remote/HttpCommandExecutor.php:359
   │ /app/vendor/php-webdriver/webdriver/lib/Remote/RemoteWebDriver.php:601
   │ /app/vendor/php-webdriver/webdriver/lib/Remote/RemoteWebDriver.php:217
   │ /app/vendor/php-webdriver/webdriver/lib/WebDriverExpectedCondition.php:177
   │ /app/vendor/php-webdriver/webdriver/lib/WebDriverWait.php:54
   │ /app/test/integrationtests/LorisIntegrationTest.class.inc:544
   │ /app/modules/acknowledgements/test/AcknowledgementsIntegrationTest.php:234
   │

kongtiaowang · 2025-10-14T11:15:57Z

@HenriRabalais I will handle it.

kongtiaowang · 2025-10-18T11:24:57Z

I made some changes in 3b59957

HenriRabalais · 2025-10-20T15:33:25Z

Thanks @kongtiaowang !

@driusan do you have time to take a look at this? Otherwise, can I assign it to someone else?

ridz1208 · 2025-10-21T16:33:46Z

@skarya22 @marandmart I assigned the both of you here because its a JSX heavy PR but also brongs some nice additions to what we already have. This is not exactly a critical priority but definitely a nice have so if you ca take a bit of time here and there to review it it would be perfect. We always talk baout improving our react side and this is doing just that.

marandmart · 2025-10-22T19:25:47Z

jslib/entities/acknowledgement/clients/AcknowledgementClient.ts

@@ -0,0 +1,14 @@
+import {Acknowledgement} from '../../';
+import {Http} from 'jsx/../jslib/core';


If there isn't a specific reason for this import being done like this, change to /jslib/core

marandmart · 2025-10-22T19:28:19Z

jslib/core/http/Client.ts

+
+      // 1. Handle HTTP status errors (e.g., 404, 500)
+      if (!response.ok) {
+        const message = this.getMessage(response.status, request, response);


Shouldn't the first value being passed here be 'ApiResponseError' instead of response.status? The response object is already being passed as the third parameter, therefore it would be more useful to have the type of error like the examples bellow, I think

marandmart · 2025-10-22T19:36:34Z

jslib/core/http/Client.ts

+  /**
+   * Function to retrieve a custom error message for a given error context.
+   */
+  public getMessage: (


Since this method handles error messages, I think its name should make that purpose more immediately clear

marandmart · 2025-10-22T19:36:56Z

jslib/core/http/Client.ts

+   * @param baseUrl The base URL for the API requests.
+   */
+  constructor(baseUrl: string) {
+    this.baseUrl = loris.BaseURL+'/'+baseUrl+'/';


Instead of concatenating strings to build the URL, I recommend using the URL object for cleaner and more reliable construction

marandmart · 2025-10-22T19:39:30Z

jslib/core/http/Query.ts

+    case Operator.GreaterThan: return '>';
+    case Operator.LessThanOrEqual: return '<=';
+    case Operator.GreaterThanOrEqual: return '>=';
+    case Operator.Like: return '_like';


The Operator.Includes case is missing

marandmart · 2025-10-22T19:42:18Z

jslib/core/http/Client.ts

+      // Handle responses with no content
+      const contentType = response.headers.get('content-type');
+      if (!contentType || !contentType.includes('application/json')) {
+        return null as U;


Instead of typing null as U, return null directly and include it in the return type. This way, it is required to handle the null case instead of always expecting an object of type U

marandmart · 2025-10-22T19:57:39Z

jslib/core/http/Client.ts

+  protected async fetchJSON<U>(url: string, options: RequestInit): Promise<U> {
+    const request = new Request(url, options);
+    try {
+      const response = await fetch(url, options);


Doesn't really change much, but it looks cleaner to use the request const from line 121 here instead of passing url and options again

ridz1208 added 2 commits September 8, 2025 14:35

added base level files before testing

7852302

added package lock

74f7e8f

github-actions bot added Language: PHP PR or issue that update PHP code Language: Javascript PR or issue that update Javascript code Module: acknowledgements PR or issue related to acknowledgements module labels Sep 8, 2025

HenriRabalais commented Sep 8, 2025

View reviewed changes

driusan assigned driusan and kongtiaowang Sep 8, 2025

HenriRabalais changed the title ~~[jslib] Refactored Acknowledgements Client with Enhanced API Utilities~~ [jslib] Refactored Acknowledgements with Enhanced HTTP Utilities Sep 9, 2025

HenriRabalais commented Sep 9, 2025

View reviewed changes

modules/acknowledgements/jsx/acknowledgementsIndex.js Show resolved Hide resolved

HenriRabalais commented Sep 16, 2025

View reviewed changes

fixing fan

cfef8f5

kongtiaowang added 3 commits October 18, 2025 01:54

fix

3b59957

fix 2

7b8645d

fix 3

8e7bc39

kongtiaowang added the Passed manual tests PR has been successfully tested by at least one peer label Oct 18, 2025

kongtiaowang added 2 commits October 20, 2025 10:59

fix-add data:acknowledgements

6242665

cs fix

9c4a271

ridz1208 assigned marandmart and skarya22 Oct 21, 2025

marandmart reviewed Oct 22, 2025

View reviewed changes

		@@ -0,0 +1,14 @@
		import {Acknowledgement} from '../../';
		import {Http} from 'jsx/../jslib/core';

[jslib] Refactored Acknowledgements with Enhanced HTTP Utilities #9999

Are you sure you want to change the base?

[jslib] Refactored Acknowledgements with Enhanced HTTP Utilities #9999

Uh oh!

Conversation

HenriRabalais commented Sep 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Key Changes

Updated Acknowledgements Module

Misc

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HenriRabalais Sep 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

HenriRabalais commented Sep 11, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HenriRabalais commented Oct 8, 2025

Uh oh!

kongtiaowang commented Oct 14, 2025

Uh oh!

kongtiaowang commented Oct 18, 2025

Uh oh!

HenriRabalais commented Oct 20, 2025

Uh oh!

ridz1208 commented Oct 21, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

HenriRabalais commented Sep 8, 2025 •

edited

Loading

HenriRabalais Sep 9, 2025 •

edited

Loading