fix: pagination hook

Author: AlbanSdl

src/api/api.ts

@@ -34,6 +34,10 @@ type RawResponseType<T> = T extends Date
       }
     : 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.
@@ -58,18 +62,22 @@ type RawResponseType<T> = T extends Date
  *     .toPromise();
  * }
  */
-export class ResponseHandler<
+class ResponseHandler<
   T,
   R extends { [status in StatusCodes]?: any } & { fallback: any } & {
     [status in ResponseError | 'success' | 'error' | 'failure']?: any;
   } = { fallback: undefined },
-> {
+> implements Abortable
+{
   private readonly handlers = { fallback: () => undefined } as {
     [K in keyof R]: K extends 'success' | StatusCodes ? (body: T) => R[K] : () => R[K];
   };
   private readonly promise: Promise<R[keyof R]>;
 
-  constructor(rawResponse: Promise<APIResponse<T>>) {
+  constructor(
+    rawResponse: Promise<APIResponse<T>>,
+    private readonly abortController: AbortController,
+  ) {
     this.promise = rawResponse.then((response) => {
       if ('error' in response) {
         return this.handlers[response.error]
@@ -96,6 +104,14 @@ export class ResponseHandler<
     return this as unknown as ResponseHandler<T, { [K in S | keyof R]: K extends S ? O : R[K] }>;
   }
 
+  /**
+   * 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<Exclude<R[keyof R], void | undefined> | (undefined extends R[keyof R] ? null : never)> // For some reason, undefined extends void. See https://github.com/ungdev/etu-utt-front/pull/28/files#r2357325209, Alban got the explanation
   > {
@@ -140,6 +156,7 @@ async function internalRequestAPI<RequestType>(
   version: string,
   isFile: true,
   applicationId: string,
+  abortController: AbortController,
 ): Promise<APIResponse<Blob>>;
 async function internalRequestAPI<RequestType, ResponseType>(
   method: string,
@@ -149,6 +166,7 @@ async function internalRequestAPI<RequestType, ResponseType>(
   version: string,
   isFile: boolean,
   applicationId: string,
+  abortController: AbortController,
 ): Promise<APIResponse<ResponseType>>;
 async function internalRequestAPI<RequestType, ResponseType>(
   method: string,
@@ -158,6 +176,7 @@ async function internalRequestAPI<RequestType, ResponseType>(
   version: string,
   isFile: boolean,
   applicationId: string,
+  abortController: AbortController,
 ): Promise<APIResponse<ResponseType | Blob>> {
   // Generate headers
   const headers = new Headers();
@@ -166,7 +185,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);
@@ -255,7 +273,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, useAPI } from './api';
 import { Pagination } from './api.interface';
 
 type PaginationHook<T> = {
@@ -15,57 +15,47 @@ 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('error', () => delete handler.current);
   };
 
   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('error', () => delete handler.current);
   };
   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';
 /**