fix: pagination hook

Author: AlbanSdl

src/api/api.ts

@@ -60,6 +60,10 @@ type ResponseHandlerExtendsType<T> = Partial<Record<'success' | StatusCodesSucce
 type VoidToUndefinedReturn<T extends (...args: any) => any> =
   ReturnType<T> extends void ? (...args: Parameters<T>) => undefined : T;
 
+export interface Abortable {
+  abort(): void;
+}
+
 /**
  * The response handler is a class that allows you to handle the response of a request to the API.
  * It allows you to define what to do when the request is successful, when it returns an error (an API error), when it fails (a request error), or when it returns a specific status code or specific failure.
@@ -84,11 +88,16 @@ type VoidToUndefinedReturn<T extends (...args: any) => any> =
  *     .toPromise();
  * }
  */
-export class ResponseHandler<T, R extends ResponseHandlerExtendsType<T> = { fallback: HandlerNoParam<undefined> }> {
+export class ResponseHandler<T, R extends ResponseHandlerExtendsType<T> = { fallback: HandlerNoParam<undefined> }>
+  implements Abortable
+{
   private readonly handlers = { fallback: () => undefined } as R;
   private readonly promise: Promise<ReturnType<R[keyof R] extends (...args: any) => any ? R[keyof R] : never>>;
 
-  constructor(rawResponse: Promise<APIResponse<T>>) {
+  constructor(
+    rawResponse: Promise<APIResponse<T>>,
+    private readonly abortController: AbortController,
+  ) {
     this.promise = rawResponse.then((response) => {
       if ('failureReason' in response) {
         if (this.handlers[response.failureReason]) {
@@ -152,6 +161,14 @@ export class ResponseHandler<T, R extends ResponseHandlerExtendsType<T> = { fall
     >;
   }
 
+  /**
+   * Aborts the request that produces this reponse.
+   * Fires ResponseError.timeout handler or falls back to failure handler.
+   */
+  abort() {
+    this.abortController.abort();
+  }
+
   async toPromise(): Promise<Awaited<ReturnType<R[keyof R] extends (...args: any) => any ? R[keyof R] : never>>> {
     return await this.promise;
   }
@@ -193,6 +210,7 @@ async function internalRequestAPI<RequestType>(
   version: string,
   isFile: true,
   applicationId: string,
+  abortController: AbortController,
 ): Promise<APIResponse<Blob>>;
 async function internalRequestAPI<RequestType, ResponseType>(
   method: string,
@@ -202,6 +220,7 @@ async function internalRequestAPI<RequestType, ResponseType>(
   version: string,
   isFile: boolean,
   applicationId: string,
+  abortController: AbortController,
 ): Promise<APIResponse<ResponseType>>;
 async function internalRequestAPI<RequestType, ResponseType>(
   method: string,
@@ -211,6 +230,7 @@ async function internalRequestAPI<RequestType, ResponseType>(
   version: string,
   isFile: boolean,
   applicationId: string,
+  abortController: AbortController,
 ): Promise<APIResponse<ResponseType | Blob>> {
   // Generate headers
   const headers = new Headers();
@@ -219,7 +239,6 @@ async function internalRequestAPI<RequestType, ResponseType>(
   if (!isFile) headers.append('Content-Type', 'application/json');
 
   // Add timeout to the request
-  const abortController = new AbortController();
   const timeout = setTimeout(() => {
     abortController.abort();
   }, timeoutMillis);
@@ -309,7 +328,11 @@ function requestAPI<RequestType, ResponseType>(
     applicationId = etuuttWebApplicationId,
   }: { timeoutMillis?: number; version?: string; isFile?: boolean; applicationId?: string } = {},
 ): ResponseHandler<ResponseType> {
-  return new ResponseHandler(internalRequestAPI(method, route, body, timeoutMillis, version, isFile, applicationId));
+  const abortController = new AbortController();
+  return new ResponseHandler(
+    internalRequestAPI(method, route, body, timeoutMillis, version, isFile, applicationId, abortController),
+    abortController,
+  );
 }
 
 // Set the authorization header with the given token for next requests

src/api/pagination.hook.ts

@@ -1,5 +1,5 @@
 import { useState, useRef } from 'react';
-import { useAPI } from './api';
+import { Abortable, ResponseFailureReason, useAPI } from './api';
 import { Pagination } from './api.interface';
 
 type PaginationHook<T> = {
@@ -15,57 +15,49 @@ type PaginationHook<T> = {
 export function usePaginationLoader<T>(path: string): PaginationHook<T> {
   const [items, setItems] = useState<T[]>([]);
   const [total, setTotal] = useState(0);
-  const onUpdate = useRef<Promise<void>>();
+  const handler = useRef<Abortable | undefined>(undefined);
   const lastSearch = useRef<Record<string, string>>({});
   const itemsPerPage = useRef(0);
   const pageIndex = useRef(1);
 
   const api = useAPI();
 
   const updateItems = (query: Record<string, string>) => {
-    let resolvePromise: () => void;
-    if (onUpdate.current) {
-      onUpdate.current.then(() => updateItems(query));
-      return;
-    } else onUpdate.current = new Promise((res) => (resolvePromise = res));
+    if (handler.current) handler.current.abort();
 
     setItems([...Array(itemsPerPage.current || 20).fill(null)]);
     const { page, ...queryData } = query;
-    api
+    handler.current = api
       .get<Pagination<T>>(`${path}?${new URLSearchParams(query)}`)
       .on('success', (body) => {
         setTotal(body.itemCount);
         setItems(body.items);
         itemsPerPage.current = body.itemsPerPage;
         lastSearch.current = queryData;
         pageIndex.current = (page && Number(page)) || 1;
-        delete onUpdate.current;
-        resolvePromise();
+        delete handler.current;
       })
-      .on('error', () => (delete onUpdate.current, resolvePromise()))
-      .on('failure', () => (delete onUpdate.current, resolvePromise()));
+      .on('fallback', () => delete handler.current)
+      .on(ResponseFailureReason.timeout, () => {}); // Hide toast error here as we might have aborted the request
   };
 
   const fetchNextPage = () => {
-    let resolvePromise: () => void;
-    if (onUpdate.current) return;
-    else onUpdate.current = new Promise((res) => (resolvePromise = res));
+    if (handler.current) return;
 
     const pendingItemCount = Math.min(itemsPerPage.current, total - items.length);
     setItems((prev) => [...prev, ...Array(pendingItemCount).fill(null)]);
-    api
+    handler.current = api
       .get<Pagination<T>>(
         `${path}?${new URLSearchParams({ ...lastSearch.current, page: String(pageIndex.current + 1) })}`,
       )
       .on('success', (body) => {
         pageIndex.current++;
         setTotal(body.itemCount);
         setItems((prev) => [...prev.slice(0, prev.length - pendingItemCount), ...body.items]);
-        delete onUpdate.current;
-        resolvePromise();
+        delete handler.current;
       })
-      .on('error', () => (delete onUpdate.current, resolvePromise()))
-      .on('failure', () => (delete onUpdate.current, resolvePromise()));
+      .on('fallback', () => delete handler.current)
+      .on(ResponseFailureReason.timeout, () => {}); // Hide toast error here as we might have aborted the request
   };
   return { items, total, updateFilters: updateItems, fetchNextItems: fetchNextPage };
 }

src/components/ResultsList.tsx

@@ -36,7 +36,7 @@ export function ResultsList<T extends object>({
   const visibilityTrigger = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (onEndReached && data[data.length - 1]) {
+    if (onEndReached && data[data.length - 1] && totalResults > data.length) {
       const intersectionObserver = new IntersectionObserver(
         ([entry]) => {
           if (entry.isIntersecting) {

src/components/UI/ModalForm.tsx

@@ -26,7 +26,7 @@ interface DataModalType {
 
 /**
  * All keys of {@link DataModalType} whose type require an `options` field in {@link DataModalEntry}.
- * These are types are already arrays.
+ * These types are already arrays.
  */
 type OptionsFieldsRequired = 'stringList';
 /**