@carlonicora/nextjs-jsonapi 1.0.3 → 1.0.5

package/src/features/notification/components/lists/NotificationsList.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { ArchiveIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever, usePageUrlGenerator } from "../../../../hooks";
+import {
+  Button,
+  Card,
+  CardContent,
+  Link,
+  Skeleton,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../../../shadcnui";
+import { UserAvatar } from "../../../user/components";
+import { NotificationInterface, NotificationService } from "../../data";
+import { generateNotificationData } from "../notifications/Notification";
+
+type NotificationsListProps = {
+  archived: boolean;
+};
+
+export function NotificationsList({ archived }: NotificationsListProps) {
+  const t = useTranslations();
+  const generateUrl = usePageUrlGenerator();
+
+  const data: DataListRetriever<NotificationInterface> = useDataListRetriever({
+    retriever: (params) => NotificationService.findMany(params),
+    retrieverParams: { isArchived: archived },
+    module: Modules.Notification,
+  });
+
+  const archiveNotification = async (notification: NotificationInterface) => {
+    await NotificationService.archive({ id: notification.id });
+    data.removeElement(notification);
+  };
+
+  const LoadingSkeleton = () => (
+    <div className="space-y-4">
+      {Array.from({ length: 3 }).map((_, i) => (
+        <Card key={i}>
+          <CardContent className="p-2">
+            <div className="flex w-full flex-row items-center">
+              <Skeleton className="mr-4 h-8 w-8 rounded-full" />
+              <div className="flex-1 space-y-2">
+                <Skeleton className="h-4 w-3/4" />
+                <Skeleton className="h-3 w-1/2" />
+              </div>
+              <Skeleton className="h-8 w-20" />
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+
+  return (
+    <div className="space-y-4">
+      {data.isLoaded ? (
+        (data.data as NotificationInterface[])?.map((notification: NotificationInterface) => {
+          const notificationData = generateNotificationData({ notification: notification, generateUrl: generateUrl });
+
+          return (
+            <Card key={notification.id}>
+              <CardContent className="p-0">
+                <div className={`flex w-full flex-row items-center p-2`}>
+                  {notificationData.actor ? (
+                    <div className="flex w-12 max-w-12 px-2">
+                      <Link href={generateUrl({ page: Modules.User, id: notificationData.actor.id })}>
+                        <UserAvatar user={notificationData.actor} className="h-8 w-8" />
+                      </Link>
+                    </div>
+                  ) : (
+                    <div className="flex w-14 max-w-14 px-2"></div>
+                  )}
+                  <div className="flex w-full flex-col">
+                    <p className="text-sm">
+                      {t.rich(`foundations.notification.${notification.notificationType}.description` as any, {
+                        strong: (chunks: any) => <strong>{chunks}</strong>,
+                        actor: notificationData.actor?.name ?? "",
+                        title: notificationData.title,
+                      })}
+                    </p>
+                    <div className="text-muted-foreground mt-1 w-full text-xs">
+                      {new Date(notification.createdAt).toLocaleString()}
+                    </div>
+                  </div>
+                  <div className="flex flex-row items-center">
+                    {notificationData.url ? (
+                      <Link href={notificationData.url}>
+                        <Button variant={`outline`} size={`sm`} onClick={(e) => e.stopPropagation()}>
+                          {t(`foundations.notification.${notification.notificationType}.buttons.action` as any)}
+                        </Button>
+                      </Link>
+                    ) : (
+                      <></>
+                    )}
+                    {!archived && (
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Button
+                            variant={`link`}
+                            onClick={(e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              archiveNotification(notification);
+                            }}
+                            className="text-muted-foreground hover:text-destructive ml-2"
+                          >
+                            <ArchiveIcon className="h-4 w-4 cursor-pointer" />
+                          </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>{t(`foundations.notification.buttons.archive`)}</TooltipContent>
+                      </Tooltip>
+                    )}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })
+      ) : (
+        <LoadingSkeleton />
+      )}
+    </div>
+  );
+}

package/src/features/notification/components/lists/index.ts

@@ -0,0 +1 @@
+export * from "./NotificationsList";

package/src/features/notification/components/modals/NotificationModal.tsx

@@ -0,0 +1,220 @@
+import { BellIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import { useSocketContext } from "../../../../contexts";
+import { usePageUrlGenerator } from "../../../../hooks";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  ScrollArea,
+  Separator,
+  SidebarMenuButton,
+} from "../../../../shadcnui";
+import { useNotificationContext } from "../../contexts/NotificationContext";
+import { NotificationInterface } from "../../data";
+import { NotificationErrorBoundary } from "../common";
+
+interface NotificationModalProps {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+}
+
+function NotificationModalContent({ isOpen, setIsOpen }: NotificationModalProps) {
+  const instanceId = useRef(Math.random().toString(36).substr(2, 9));
+  const {
+    notifications,
+    addNotification,
+    generateNotification,
+    generateToastNotification,
+    markNotificationsAsRead,
+    isLoading,
+    error,
+  } = useNotificationContext();
+  const { socketNotifications, removeSocketNotification, clearSocketNotifications } = useSocketContext();
+  const t = useTranslations();
+  const generateUrl = usePageUrlGenerator();
+  const [newNotifications, setNewNotifications] = useState<boolean>(false);
+  const preventAutoClose = useRef(false);
+
+  const circuitBreakerRef = useRef({
+    count: 0,
+    resetTime: 0,
+    isOpen: false,
+  });
+
+  const checkCircuitBreaker = useCallback(() => {
+    const now = Date.now();
+    const breaker = circuitBreakerRef.current;
+
+    // Reset counter every 10 seconds
+    if (now > breaker.resetTime) {
+      breaker.count = 0;
+      breaker.resetTime = now + 10000; // 10 seconds
+      breaker.isOpen = false;
+    }
+
+    // Trip breaker if more than 20 notifications in 10 seconds
+    breaker.count++;
+    if (breaker.count > 20) {
+      breaker.isOpen = true;
+      return false;
+    }
+
+    return !breaker.isOpen;
+  }, []);
+
+  const { unreadCount, unreadIds } = useMemo(() => {
+    const unreadNotifications = notifications.filter((notif) => !notif.isRead);
+    return {
+      unreadCount: unreadNotifications.length,
+      unreadIds: unreadNotifications.map((notif) => notif.id),
+    };
+  }, [notifications]);
+
+  useEffect(() => {
+    setNewNotifications(unreadCount > 0);
+  }, [unreadCount]);
+
+  const processSocketNotificationsRef = useRef<NodeJS.Timeout | null>(null);
+
+  const processSocketNotifications = useCallback(() => {
+    if (socketNotifications.length === 0) {
+      return;
+    }
+
+    if (!checkCircuitBreaker()) {
+      clearSocketNotifications(); // Still clear to prevent memory leaks
+      return;
+    }
+
+    const currentSocketNotifications = [...socketNotifications];
+    clearSocketNotifications();
+
+    // Process notifications in smaller batches to prevent UI freeze
+    const batchSize = 3;
+    const batches = [];
+    for (let i = 0; i < currentSocketNotifications.length; i += batchSize) {
+      batches.push(currentSocketNotifications.slice(i, i + batchSize));
+    }
+
+    batches.forEach((batch, batchIndex) => {
+      setTimeout(() => {
+        batch.forEach((notification) => {
+          addNotification(notification);
+          const toastNotification = generateToastNotification(notification, t, generateUrl);
+
+          toast.message(toastNotification.title, {
+            description: toastNotification.description,
+            action: toastNotification.action,
+          });
+        });
+
+        // Only set newNotifications on the last batch
+        if (batchIndex === batches.length - 1) {
+          setNewNotifications(true);
+        }
+      }, batchIndex * 100); // 100ms delay between batches
+    });
+  }, [
+    socketNotifications,
+    clearSocketNotifications,
+    addNotification,
+    generateToastNotification,
+    t,
+    generateUrl,
+    checkCircuitBreaker,
+  ]);
+
+  // 🔗 SOCKET: Throttled processing with 300ms delay
+  useEffect(() => {
+    if (processSocketNotificationsRef.current) {
+      clearTimeout(processSocketNotificationsRef.current);
+    }
+
+    processSocketNotificationsRef.current = setTimeout(() => {
+      processSocketNotifications();
+    }, 300); // 300ms throttle
+
+    return () => {
+      if (processSocketNotificationsRef.current) {
+        clearTimeout(processSocketNotificationsRef.current);
+      }
+    };
+  }, [processSocketNotifications]);
+
+  const handleOpenChange = (newlyRequestedOpenState: boolean) => {
+    if (!newlyRequestedOpenState && preventAutoClose.current) {
+      return;
+    }
+
+    setIsOpen(newlyRequestedOpenState);
+
+    if (newlyRequestedOpenState) {
+      preventAutoClose.current = true;
+
+      if (unreadIds.length > 0) {
+        markNotificationsAsRead(unreadIds)
+          .catch((error) => {
+            console.error("❌ [NotificationModal] Failed to mark notifications as read:", error);
+          })
+          .finally(() => {
+            preventAutoClose.current = false;
+            // Workaround: re-open if it was open before
+            setIsOpen(true);
+          });
+      } else {
+        preventAutoClose.current = false;
+      }
+      setNewNotifications(false);
+    }
+  };
+
+  const unreadNotifications = newNotifications && unreadCount > 0;
+
+  return (
+    <Popover open={isOpen} onOpenChange={handleOpenChange} data-testid={`sidebar-notification button`}>
+      <PopoverTrigger asChild>
+        <SidebarMenuButton className="text-muted-foreground h-6" disabled={isLoading}>
+          <BellIcon
+            className={`h-5 w-5 cursor-pointer ${unreadNotifications ? "text-destructive" : ""} ${isLoading ? "animate-pulse" : ""}`}
+          />
+          {t(`types.notifications`, { count: 2 })}
+        </SidebarMenuButton>
+      </PopoverTrigger>
+      <PopoverContent className="relative left-10 w-80 border-0 p-0 shadow-none">
+        <Card>
+          <CardHeader className="p-4">
+            <CardTitle>{t(`types.notifications`, { count: 2 })}</CardTitle>
+            {isLoading && <div className="text-muted-foreground text-xs">Loading...</div>}
+            {error && <div className="text-destructive text-xs">Error: {error}</div>}
+          </CardHeader>
+          <Separator />
+          <ScrollArea className="h-96">
+            {notifications.length > 0 ? (
+              notifications.map((notification: NotificationInterface) => (
+                <Fragment key={notification.id}>{generateNotification(notification, () => setIsOpen(false))}</Fragment>
+              ))
+            ) : (
+              <div className="p-4 text-center text-sm text-gray-500">
+                {t(`foundations.notification.empty`, { count: 2 })}
+              </div>
+            )}
+          </ScrollArea>
+        </Card>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export function NotificationModal(props: NotificationModalProps) {
+  return (
+    <NotificationErrorBoundary>
+      <NotificationModalContent {...props} />
+    </NotificationErrorBoundary>
+  );
+}

package/src/features/notification/components/modals/index.ts

@@ -0,0 +1 @@
+export * from "./NotificationModal";

package/src/features/notification/components/notifications/Notification.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { ReactElement, useEffect, useState } from "react";
+import { usePageUrlGenerator } from "../../../../hooks";
+import { Link } from "../../../../shadcnui";
+import { UserInterface } from "../../../user";
+import { UserAvatar } from "../../../user/components";
+import { NotificationInterface } from "../../data";
+
+type TaskCommentedOnProps = {
+  notification: NotificationInterface;
+  closePopover: () => void;
+};
+
+export const generateNotificationData = (params: {
+  notification: NotificationInterface;
+  generateUrl: any;
+}): { title: string; actor?: UserInterface; url?: string; taskId?: string } => {
+  const response: any = {};
+
+  response.actor = params.notification.actor;
+
+  return response;
+};
+
+export function NotificationToast(
+  notification: NotificationInterface,
+  t: any,
+  generateUrl: any,
+  reouter: any,
+): {
+  title: string;
+  description: string | ReactElement<any>;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+} {
+  const data = generateNotificationData({ notification: notification, generateUrl: generateUrl });
+
+  return {
+    title: t(`foundations.notification.${notification.notificationType}.title`),
+    description: (
+      <div className={`flex w-full flex-row items-center p-2`}>
+        {data.actor ? (
+          <div className="flex w-12 max-w-12 px-2">
+            <UserAvatar user={data.actor} className="h-8 w-8" />
+          </div>
+        ) : (
+          <div className="flex w-14 max-w-14 px-2"></div>
+        )}
+        <div className="flex w-full flex-col">
+          <p className="text-sm">
+            {t.rich(`foundations.notification.${notification.notificationType}.description`, {
+              strong: (chunks: any) => <strong>{chunks}</strong>,
+              actor: data.actor?.name ?? "",
+              title: data.title,
+            })}
+          </p>
+          <div className="text-muted-foreground mt-1 w-full text-xs">
+            {new Date(notification.createdAt).toLocaleString()}
+          </div>
+        </div>
+      </div>
+    ),
+    action: data.url
+      ? {
+          label: t(`foundations.notification.${notification.notificationType}.buttons.action`),
+          onClick: () => {
+            reouter.push(data.url!);
+          },
+        }
+      : undefined,
+  };
+}
+
+export function NotificationMenuItem({ notification, closePopover }: TaskCommentedOnProps) {
+  const generateUrl = usePageUrlGenerator();
+  const [isRead, setIsRead] = useState<boolean>(false);
+  const t = useTranslations();
+
+  useEffect(() => {
+    setIsRead(notification.isRead);
+  }, []);
+
+  const data = generateNotificationData({ notification: notification, generateUrl: generateUrl });
+
+  const response = (
+    <div className={`flex w-full flex-row p-2 ${isRead ? "" : "bg-muted"} items-center`}>
+      {data.actor ? (
+        <div className="flex w-12 max-w-12 px-2">
+          <UserAvatar user={data.actor} className="h-8 w-8" />
+        </div>
+      ) : (
+        <div className="flex w-14 max-w-14 px-2"></div>
+      )}
+      <div className="flex w-full flex-col">
+        <p className="text-sm">
+          {t.rich(`foundations.notification.${notification.notificationType}.description` as any, {
+            strong: (chunks: any) => <strong>{chunks}</strong>,
+            actor: data.actor?.name ?? "",
+            title: data.title,
+          })}
+        </p>
+        <div className="text-muted-foreground mt-1 w-full text-xs">
+          {new Date(notification.createdAt).toLocaleString()}
+        </div>
+      </div>
+    </div>
+  );
+
+  if (!data.url) return response;
+
+  return (
+    <Link href={data.url} onClick={closePopover}>
+      {response}
+    </Link>
+  );
+}

package/src/features/notification/components/notifications/PushNotificationProvider.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { ReactNode, type JSX } from "react";
+import usePushNotifications from "../../../../hooks/usePushNotifications";
+
+export function PushNotificationProvider({ children }: { children: ReactNode }): JSX.Element {
+  usePushNotifications();
+  return <>{children}</>;
+}

package/src/features/notification/components/notifications/index.ts

@@ -0,0 +1,2 @@
+export * from "./Notification";
+export * from "./PushNotificationProvider";

package/src/features/notification/contexts/NotificationContext.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import React, { createContext, ReactElement, useCallback, useContext, useState } from "react";
+import { SharedProvider } from "../../../contexts";
+import { Modules } from "../../../core";
+import { useI18nRouter } from "../../../i18n";
+import { BreadcrumbItemData } from "../../../interfaces";
+import { NotificationMenuItem, NotificationToast } from "../components/notifications/Notification";
+import { NotificationInterface, NotificationService } from "../data";
+
+interface NotificationContextType {
+  notifications: NotificationInterface[];
+  setNotifications: (notifications: NotificationInterface[]) => void;
+  addNotification: (notification: NotificationInterface) => void;
+  addSocketNotifications: (socketNotifications: NotificationInterface[]) => void;
+  loadNotifications: () => Promise<void>;
+  generateNotification: (notification: NotificationInterface, closePopover: () => void) => ReactElement<any>;
+  generateToastNotification: (
+    notification: NotificationInterface,
+    t: any,
+    generateUrl: any,
+  ) => {
+    title: string;
+    description: string | ReactElement<any>;
+    action?: {
+      label: string;
+      onClick: () => void;
+    };
+  };
+  markNotificationsAsRead: (ids: string[]) => Promise<void>;
+  isLoading: boolean;
+  error: string | null;
+  lastLoaded: number;
+  shouldRefresh: boolean;
+}
+
+const NotificationContext = createContext<NotificationContextType | undefined>(undefined);
+
+type NotificationContextProviderProps = {
+  children: React.ReactNode;
+};
+
+export const NotificationContextProvider = ({ children }: NotificationContextProviderProps) => {
+  const t = useTranslations();
+  const router = useI18nRouter();
+
+  const [notifications, setNotifications] = useState<NotificationInterface[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [lastLoaded, setLastLoaded] = useState(0);
+
+  // Calculate shouldRefresh (5 minute cache)
+  const shouldRefresh = Date.now() - lastLoaded > 5 * 60 * 1000;
+
+  const addNotification = useCallback((notification: NotificationInterface) => {
+    setNotifications((prev) => {
+      // Check if notification already exists to prevent duplicates
+      const exists = prev.some((n) => n.id === notification.id);
+      if (exists) return prev;
+      return [notification, ...prev];
+    });
+  }, []);
+
+  const addSocketNotifications = useCallback((socketNotifications: NotificationInterface[]) => {
+    setNotifications((prev) => {
+      const newNotifications = socketNotifications.filter(
+        (newNotif) => !prev.some((existingNotif) => existingNotif.id === newNotif.id),
+      );
+      return [...prev, ...newNotifications];
+    });
+  }, []);
+
+  const loadNotifications = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const fetchedNotifications = await NotificationService.findMany({});
+      setNotifications(fetchedNotifications);
+      setLastLoaded(Date.now());
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : "Failed to load notifications";
+      setError(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const markNotificationsAsRead = useCallback(async (ids: string[]) => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const data: any = {
+        data: ids.map((id: string) => ({
+          type: Modules.Notification.name,
+          id: id,
+          attributes: {
+            isRead: true,
+          },
+          meta: {},
+          relationships: {},
+        })),
+      };
+
+      await NotificationService.markAsRead({ data: data });
+      const allNotifications = await NotificationService.findMany({});
+      setNotifications(allNotifications);
+      setLastLoaded(Date.now());
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : "Failed to mark notifications as read";
+      setError(errorMessage);
+      throw error;
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const generateToastNotification = (
+    notification: NotificationInterface,
+    t: any,
+    generateUrl: any,
+  ): {
+    title: string;
+    description: string | ReactElement<any>;
+    action?: {
+      label: string;
+      onClick: () => void;
+    };
+  } => {
+    return NotificationToast(notification, t, generateUrl, router);
+  };
+
+  const generateNotification = (notification: NotificationInterface, closePopover: () => void) => {
+    return <NotificationMenuItem notification={notification} closePopover={closePopover} />;
+  };
+
+  const breadcrumb = () => {
+    const response: BreadcrumbItemData[] = [];
+
+    response.push({
+      name: t(`types.notifications`, { count: 2 }),
+    });
+
+    return response;
+  };
+
+  const title = () => {
+    const response: any = {
+      type: t(`types.notifications`, { count: 2 }),
+    };
+
+    return response;
+  };
+
+  return (
+    <SharedProvider value={{ breadcrumbs: breadcrumb(), title: title() }}>
+      <NotificationContext.Provider
+        value={{
+          notifications,
+          setNotifications,
+          addNotification,
+          addSocketNotifications,
+          loadNotifications,
+          generateNotification,
+          generateToastNotification,
+          markNotificationsAsRead,
+          isLoading,
+          error,
+          lastLoaded,
+          shouldRefresh,
+        }}
+      >
+        {children}
+      </NotificationContext.Provider>
+    </SharedProvider>
+  );
+};
+
+export const useNotificationContext = (): NotificationContextType => {
+  const context = useContext(NotificationContext);
+  if (context === undefined) {
+    throw new Error(`Notification.messages.errors.use_context`);
+  }
+  return context;
+};

package/src/features/notification/contexts/index.ts

@@ -0,0 +1 @@
+export * from "./NotificationContext";

package/src/features/notification/data/index.ts

@@ -0,0 +1,4 @@
+export * from "./notification";
+export * from "./notification.fields";
+export * from "./notification.interface";
+export * from "./notification.service";

package/src/features/notification/data/notification.fields.ts

@@ -0,0 +1,8 @@
+export enum NotificationFields {
+  notificationId = "notificationId",
+
+  name = "name",
+
+  createdAt = "createdAt",
+  updatedAt = "updatedAt",
+}