@carlonicora/nextjs-jsonapi 1.0.3 → 1.0.5

package/src/hooks/useDataListRetriever.ts

@@ -0,0 +1,349 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { AbstractService } from "../core";
+
+export type PageInfo = {
+  startItem: number;
+  endItem: number;
+  pageSize: number;
+};
+
+export type DataListRetriever<T> = {
+  ready?: boolean;
+  setReady: (state: boolean) => void;
+  isLoaded: boolean;
+  data: T[] | undefined;
+  next?: (onlyNewRecords?: boolean) => Promise<void>;
+  previous?: (onlyNewRecords?: boolean) => Promise<void>;
+  search: (search: string) => Promise<void>;
+  refresh: () => Promise<void>;
+  addAdditionalParameter: (key: string, value: any | null) => void;
+  removeAdditionalParameter: (key: string) => void;
+  setRefreshedElement: (element: T) => void;
+  removeElement: (element: T) => void;
+  isSearch: boolean;
+  pageInfo?: PageInfo;
+};
+
+export function useDataListRetriever<T>(params: {
+  ready?: boolean;
+  retriever: (params: any) => Promise<T[]>;
+  retrieverParams?: any;
+  search?: string;
+  addAdditionalParameter?: (key: string, value: any | null) => void;
+  requiresSearch?: boolean;
+  module: any;
+}): DataListRetriever<T> {
+  const [data, setData] = useState<T[] | undefined>(undefined);
+  const [nextPage, setNextPage] = useState<string | undefined>(undefined);
+  const [previousPage, setPreviousPage] = useState<string | undefined>(undefined);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [ready, setReady] = useState<boolean>(params.ready ?? true);
+  const searchTermRef = useRef<string>("");
+  const additionalParamsRef = useRef<any>({});
+  const requestIdRef = useRef(0);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const isFetchingRef = useRef(false);
+
+  const resolvedType = params.module;
+  const resolvedService = AbstractService; // We'll just use AbstractService directly for pagination
+
+  // Helper to parse page params from pagination URLs
+  const parsePageParams = useCallback((url: string | undefined): { offset: number; size: number } | null => {
+    if (!url) return null;
+    try {
+      const urlObj = new URL(url);
+      const offset = parseInt(urlObj.searchParams.get("page[offset]") || "0", 10);
+      const size = parseInt(urlObj.searchParams.get("page[size]") || "25", 10);
+      return { offset, size };
+    } catch {
+      return null;
+    }
+  }, []);
+
+  // Helper to adjust pagination URL offset (used when removing elements)
+  const adjustPaginationUrl = useCallback((url: string | undefined, delta: number): string | undefined => {
+    if (!url) return undefined;
+    try {
+      const urlObj = new URL(url);
+      const currentOffset = parseInt(urlObj.searchParams.get("page[offset]") || "0", 10);
+      const newOffset = Math.max(0, currentOffset + delta);
+      urlObj.searchParams.set("page[offset]", String(newOffset));
+      return urlObj.toString();
+    } catch {
+      return url;
+    }
+  }, []);
+
+  // Calculate pageInfo from pagination URLs and current data
+  const pageInfo = useMemo((): PageInfo | undefined => {
+    if (!data || data.length === 0) return undefined;
+
+    // Try to determine current offset and page size from pagination URLs
+    const nextParams = parsePageParams(nextPage);
+    const prevParams = parsePageParams(previousPage);
+
+    let currentOffset = 0;
+    let pageSize = 25; // default
+
+    if (nextParams) {
+      // If we have a next page, current offset = next offset - page size
+      pageSize = nextParams.size;
+      currentOffset = Math.max(0, nextParams.offset - pageSize);
+    } else if (prevParams) {
+      // If we only have a previous page (we're on the last page)
+      pageSize = prevParams.size;
+      currentOffset = prevParams.offset + pageSize;
+    }
+
+    const startItem = currentOffset + 1;
+    const endItem = currentOffset + data.length;
+
+    return { startItem, endItem, pageSize };
+  }, [data, nextPage, previousPage, parsePageParams]);
+
+  const stableParams = useMemo(
+    () => ({
+      service: resolvedService,
+      type: resolvedType,
+      retriever: params.retriever,
+      retrieverParams: params.retrieverParams,
+      requiresSearch: params.requiresSearch,
+    }),
+    [resolvedService, resolvedType, params.retriever, params.retrieverParams, params.requiresSearch],
+  );
+
+  const fetchData = useCallback(
+    async (fetchParams?: { isRefine?: boolean; isRefresh?: boolean; callNext?: boolean; callPrevious?: boolean }) => {
+      if (ready === false) {
+        return;
+      }
+
+      // Prevent concurrent fetches (unless it's a pagination call)
+      if (isFetchingRef.current && !fetchParams?.callNext && !fetchParams?.callPrevious) {
+        return;
+      }
+
+      const thisRequestId = ++requestIdRef.current;
+      isFetchingRef.current = true;
+
+      if (stableParams.requiresSearch === true && fetchParams?.isRefine !== true && fetchParams?.isRefresh !== true)
+        return;
+
+      if (
+        !nextPage &&
+        !previousPage &&
+        isLoaded &&
+        fetchParams?.callNext !== true &&
+        fetchParams?.callPrevious !== true &&
+        params.search === searchTermRef.current
+      )
+        return;
+
+      const currentSearchTerm = searchTermRef.current;
+
+      setIsLoaded(false);
+
+      try {
+        let response: T[];
+        const nextRef = { next: undefined };
+        const previousRef = { previous: undefined };
+        const selfRef = { self: undefined };
+
+        if (nextPage && fetchParams?.callNext && fetchParams?.isRefine !== true) {
+          const ServiceClass = stableParams.service as typeof AbstractService;
+
+          response = await ServiceClass.next<T[]>({
+            type: stableParams.type,
+            endpoint: nextPage,
+            next: nextRef,
+            previous: previousRef,
+            self: selfRef,
+          });
+        } else if (previousPage && fetchParams?.callPrevious && fetchParams?.isRefine !== true) {
+          const ServiceClass = stableParams.service as typeof AbstractService;
+
+          response = await ServiceClass.previous<T[]>({
+            type: stableParams.type,
+            endpoint: previousPage,
+            next: nextRef,
+            previous: previousRef,
+            self: selfRef,
+          });
+        } else {
+          let retrieverParams = stableParams.retrieverParams ? { ...stableParams.retrieverParams } : {};
+
+          retrieverParams = {
+            ...retrieverParams,
+            ...additionalParamsRef.current,
+          };
+
+          retrieverParams.search = currentSearchTerm;
+          retrieverParams.next = nextRef;
+          retrieverParams.previous = previousRef;
+          retrieverParams.self = selfRef;
+
+          response = await stableParams.retriever(retrieverParams);
+        }
+
+        // Only update state if this is still the latest request and wasn't aborted
+        if (thisRequestId === requestIdRef.current && !abortControllerRef.current?.signal.aborted) {
+          if (fetchParams?.isRefresh === true) {
+            setData(response);
+          } else {
+            setData((prevData) => [...(prevData ? (prevData as T[]) : []), ...response]);
+          }
+          setIsLoaded(true);
+          setNextPage(nextRef.next ? nextRef.next : undefined);
+          setPreviousPage(previousRef.previous ? previousRef.previous : undefined);
+        }
+      } catch (error) {
+        // Don't update state if request was aborted (AbortController disabled)
+        if (thisRequestId === requestIdRef.current) {
+          setIsLoaded(true);
+          console.error("Error fetching data:", error);
+        }
+      } finally {
+        // Always reset fetching flag when done
+        if (thisRequestId === requestIdRef.current) {
+          isFetchingRef.current = false;
+        }
+      }
+    },
+    [stableParams, ready, params.search],
+  );
+
+  const setRefreshedElement = useCallback(
+    (element: T) => {
+      setData((prevData) => {
+        if (!prevData) return prevData;
+
+        const index = prevData.findIndex((data) => (data as any).id === (element as any).id);
+        if (index === -1) return prevData;
+
+        // Use immutable update pattern instead of mutation
+        return prevData.map((item, i) => (i === index ? element : item));
+      });
+    },
+    [setData],
+  );
+
+  const removeElement = useCallback(
+    (element: T) => {
+      setData((prevData) => {
+        if (!prevData) return prevData;
+
+        const index = prevData.findIndex((data) => (data as any).id === (element as any).id);
+
+        if (index === -1) return prevData;
+
+        // Adjust nextPage offset since we're removing an item
+        setNextPage((prev) => adjustPaginationUrl(prev, -1));
+
+        const newData = [...prevData];
+        newData.splice(index, 1);
+        return newData;
+      });
+    },
+    [adjustPaginationUrl],
+  );
+
+  // Consolidated effect: Only fetch once when ready and not loaded
+  // This prevents the duplicate API calls that occurred when both the mount effect
+  // and ready effect fired simultaneously on initial render
+  useEffect(() => {
+    // Only fetch if ready and haven't loaded yet
+    if (ready && !isLoaded) {
+      fetchData({ isRefresh: true });
+    }
+  }, [ready, fetchData]);
+
+  const loadNext = useCallback(
+    async (onlyNewRecords?: boolean) => {
+      if (nextPage) fetchData({ isRefresh: onlyNewRecords, callNext: true });
+    },
+    [fetchData, nextPage],
+  );
+
+  const loadPrevious = useCallback(
+    async (onlyNewRecords?: boolean) => {
+      if (previousPage) fetchData({ isRefresh: onlyNewRecords, callPrevious: true });
+    },
+    [fetchData, previousPage],
+  );
+
+  const addAdditionalParameter = useCallback(
+    (key: string, value: any | null) => {
+      if (value === null) {
+        delete additionalParamsRef.current[key];
+      } else {
+        additionalParamsRef.current[key] = value;
+      }
+
+      setReady(true);
+      setNextPage(undefined);
+      setPreviousPage(undefined);
+      fetchData({ isRefine: true, isRefresh: true });
+    },
+    [fetchData],
+  );
+
+  const removeAdditionalParameter = useCallback(
+    (key: string) => {
+      if (additionalParamsRef.current[key] !== undefined) {
+        delete additionalParamsRef.current[key];
+        setNextPage(undefined);
+        setPreviousPage(undefined);
+        fetchData({ isRefine: true, isRefresh: true });
+      }
+    },
+    [fetchData],
+  );
+
+  const search = useCallback(
+    async (search: string) => {
+      if (search === searchTermRef.current) return;
+
+      setNextPage(undefined);
+      setPreviousPage(undefined);
+      searchTermRef.current = search;
+      fetchData({ isRefine: true, isRefresh: true });
+    },
+    [fetchData],
+  );
+
+  const isSearch = !!searchTermRef.current;
+
+  const refresh = useCallback(async () => {
+    setNextPage(undefined);
+    setPreviousPage(undefined);
+    fetchData({ isRefresh: true });
+  }, [fetchData]);
+
+  // Cleanup abort controller on unmount
+  useEffect(() => {
+    return () => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+  }, []);
+
+  return {
+    ready,
+    setReady,
+    isLoaded: isLoaded,
+    data: data as T[],
+    next: nextPage ? loadNext : undefined,
+    previous: previousPage ? loadPrevious : undefined,
+    search: search,
+    addAdditionalParameter: addAdditionalParameter,
+    removeAdditionalParameter: removeAdditionalParameter,
+    refresh: refresh,
+    setRefreshedElement: setRefreshedElement,
+    isSearch: isSearch,
+    removeElement: removeElement,
+    pageInfo: pageInfo,
+  };
+}

package/src/hooks/useDebounce.ts

@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useRef } from "react";
+
+export function useDebounce<T extends (...args: any[]) => any>(callback: T, delay: number): T & { cancel: () => void } {
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const callbackRef = useRef(callback);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  const debouncedFunction = useCallback(
+    (...args: Parameters<T>) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        callbackRef.current(...args);
+      }, delay);
+    },
+    [delay],
+  );
+
+  // Attach a cancel method to clear pending timeout
+  const cancel = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+  };
+
+  return Object.assign(debouncedFunction, { cancel }) as T & { cancel: () => void };
+}
+
+export default useDebounce;

package/src/hooks/useNotificationSync.ts

@@ -0,0 +1,20 @@
+"use client";
+
+import { useEffect } from "react";
+import { useNotificationContext, useSocketContext } from "../contexts";
+
+export function useNotificationSync() {
+  const { socketNotifications, clearSocketNotifications } = useSocketContext();
+  const { addSocketNotifications } = useNotificationContext();
+
+  useEffect(() => {
+    if (socketNotifications.length > 0) {
+      try {
+        addSocketNotifications(socketNotifications);
+        clearSocketNotifications();
+      } catch (error) {
+        console.error("💥 [useNotificationSync] Error processing notifications:", error);
+      }
+    }
+  }, [socketNotifications, addSocketNotifications, clearSocketNotifications]);
+}

package/src/hooks/usePageTracker.ts

@@ -0,0 +1,69 @@
+"use client";
+
+import { useAtom } from "jotai";
+import { usePathname } from "next/navigation";
+import { useEffect } from "react";
+import { RecentPage, recentPagesAtom } from "../atoms";
+import { getTrackablePages } from "../unified/JsonApiRequest";
+
+// Routes to exclude from tracking
+const EXCLUDED_ROUTES = ["/", "/login", "/register", "/forgot-password", "/reset-password", "/activate"];
+
+export function usePageTracker() {
+  const pathname = usePathname();
+  const [recentPages, setRecentPages] = useAtom(recentPagesAtom);
+
+  useEffect(() => {
+    if (!pathname) return;
+
+    // Exclude certain routes
+    if (EXCLUDED_ROUTES.some((route) => pathname === route || pathname.endsWith(route))) {
+      return;
+    }
+
+    // Extract page information from pathname (already locale-free from next-intl)
+    const pathParts = pathname.split("/").filter(Boolean);
+
+    if (pathParts.length === 0) return;
+
+    // Try to find the module based on the route
+    const moduleName = pathParts[0];
+    const entityId = pathParts.length > 1 ? pathParts[1] : null;
+
+    // Only track pages with entity IDs (detail pages)
+    if (!entityId) return;
+
+    // Find the module from configured trackable pages
+    const trackablePages = getTrackablePages();
+    const foundModule = trackablePages.find((mod) => mod.pageUrl === `/${moduleName}`);
+
+    if (!foundModule) return;
+
+    // Only use base path (module/id), ignoring any sub-paths
+    const baseUrl = `/${moduleName}/${entityId}`;
+
+    let pageTitle = foundModule.name;
+    if (typeof document !== "undefined") {
+      const titleParts = document.title.split("]");
+      if (titleParts[1]) {
+        const cleanTitle = titleParts[1].split("|")[0]?.trim();
+        pageTitle = cleanTitle || foundModule.name;
+      }
+    }
+
+    const newPage: RecentPage = {
+      url: baseUrl,
+      title: pageTitle,
+      moduleType: foundModule.name,
+      timestamp: Date.now(),
+    };
+
+    setRecentPages((prev) => {
+      // Remove if already exists (to move to top)
+      const filtered = prev.filter((page) => page.url !== newPage.url);
+
+      // Add to beginning and limit to 10
+      return [newPage, ...filtered].slice(0, 10);
+    });
+  }, [pathname, setRecentPages]);
+}

package/src/hooks/usePageUrlGenerator.ts

@@ -0,0 +1,50 @@
+import { PageUrl } from "../permissions/types";
+
+export function usePageUrlGenerator(): (params: {
+  page?: PageUrl | string;
+  id?: string;
+  childPage?: PageUrl | string;
+  childId?: string;
+  additionalParameters?: { [key: string]: string | string[] | undefined };
+  language?: string;
+}) => string {
+  const generateUrl = (params: {
+    page?: PageUrl | string;
+    id?: string;
+    childPage?: PageUrl | string;
+    childId?: string;
+    additionalParameters?: { [key: string]: string | string[] | undefined };
+    language?: string;
+  }): string => {
+    if (!params.page) return "/";
+
+    const pathParams: string[] = [
+      `${params.language ? `/${params.language}` : ""}${typeof params.page === "string" ? params.page : params.page.pageUrl}`,
+    ];
+
+    if (params.id) {
+      pathParams.push(params.id);
+      if (params.childPage) {
+        pathParams.push(typeof params.childPage === "string" ? params.childPage : (params.childPage.pageUrl ?? ""));
+        if (params.childId) {
+          pathParams.push(params.childId);
+        }
+      }
+    }
+    const response = pathParams.join(`/`);
+
+    if (params.additionalParameters) {
+      const searchParams = new URLSearchParams();
+      for (const key in params.additionalParameters) {
+        if (params.additionalParameters[key]) {
+          searchParams.append(key, params.additionalParameters[key] as string);
+        }
+      }
+      return `${response}?${searchParams.toString()}`;
+    }
+
+    return response;
+  };
+
+  return generateUrl;
+}

package/src/hooks/usePushNotifications.ts

@@ -0,0 +1,82 @@
+"use client";
+
+import { useEffect } from "react";
+import { useCurrentUserContext } from "../contexts";
+import { PushService, UserInterface } from "../features";
+import { getRoleId } from "../roles";
+import { getAppUrl } from "../unified/JsonApiRequest";
+
+function urlBase64ToUint8Array(base64String: string): Uint8Array {
+  const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
+  const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");
+  const rawData = window.atob(base64);
+  const outputArray = new Uint8Array(rawData.length);
+  for (let i = 0; i < rawData.length; i++) {
+    outputArray[i] = rawData.charCodeAt(i);
+  }
+  return outputArray;
+}
+
+export default function usePushNotifications(): void {
+  const { currentUser, hasRole } = useCurrentUserContext<UserInterface>();
+
+  useEffect(() => {
+    const register = async () => {
+      if ("serviceWorker" in navigator && "PushManager" in window) {
+        try {
+          // Check if we've already processed push notifications for this user in this session
+          const sessionKey = `push_registered_${currentUser?.id}`;
+          const lastRegisteredSubscription = sessionStorage.getItem(sessionKey);
+
+          const registration = await navigator.serviceWorker.register(`${getAppUrl()}/sw.js`);
+
+          // Check current permission status first
+          let permission = Notification.permission;
+
+          // Only request permission if it's not already determined
+          if (permission === "default") {
+            permission = await Notification.requestPermission();
+          }
+
+          if (permission !== "granted") {
+            return; // User denied permission, this is not an error
+          }
+
+          const vapidPublicKey = (process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY || "").trim();
+          const convertedKey = urlBase64ToUint8Array(vapidPublicKey);
+
+          await navigator.serviceWorker.ready;
+
+          let subscription = await registration.pushManager.getSubscription();
+          if (!subscription) {
+            const appServerKey = new Uint8Array(Array.from(convertedKey));
+
+            subscription = await registration.pushManager.subscribe({
+              userVisibleOnly: true,
+              applicationServerKey: appServerKey,
+            });
+          }
+
+          const plainSubscription = {
+            endpoint: subscription.endpoint,
+            keys: subscription.toJSON().keys,
+          };
+
+          // Create a simple hash to detect subscription changes
+          const subscriptionHash = btoa(JSON.stringify(plainSubscription));
+
+          // Only call the API if subscription has changed or this is the first registration
+          if (lastRegisteredSubscription !== subscriptionHash) {
+            await PushService.register({ data: plainSubscription });
+            // Store the current subscription hash to avoid duplicate registrations
+            sessionStorage.setItem(sessionKey, subscriptionHash);
+          }
+        } catch (error) {
+          console.error("Error during service worker registration or push subscription:", error);
+        }
+      }
+    };
+
+    if (currentUser && !hasRole(getRoleId().Administrator)) register();
+  }, [currentUser]);
+}