@greatapps/common 1.1.81 → 1.1.82

package/dist/components/pages/notifications/Notifications.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Bell, Check } from "lucide-react";
+import { Bell, Check, Loader2 } from "lucide-react";
 import { Button } from "../../ui/buttons/Button";
 import {
   Tabs,
@@ -7,24 +7,65 @@ import {
   TabsList,
   TabsTrigger
 } from "../../ui/data-display/Tabs";
-import { useMessages } from "../../../modules/users/hooks/messages.hook";
+import { useInfiniteMessages } from "../../../modules/users/hooks/messages.hook";
 import NotificationCard from "../../widgets/notifications/NotificationCard";
 import { formatDistanceToNow } from "date-fns";
 import { ptBR } from "date-fns/locale";
+function NotificationsList({
+  pages,
+  isFetchingNextPage,
+  hasNextPage,
+  fetchNextPage
+}) {
+  const notifications = pages?.pages.flatMap((p) => p.data) ?? [];
+  const handleScroll = (e) => {
+    const target = e.currentTarget;
+    const nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 50;
+    if (!nearBottom) return;
+    if (hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex flex-col border border-gray-200 rounded-lg w-full bg-white max-h-[70vh] overflow-y-auto custom-scrollbar",
+      onScroll: handleScroll,
+      children: [
+        notifications.map((notification, index) => /* @__PURE__ */ jsx(
+          NotificationCard,
+          {
+            icon: /* @__PURE__ */ jsx(Bell, { size: 20, className: "text-pages-600" }),
+            iconBgColor: "bg-pages-100",
+            title: notification.subject,
+            description: notification.message,
+            gapPx: 16,
+            time: formatDistanceToNow(new Date(notification.datetime_add), {
+              addSuffix: true,
+              locale: ptBR
+            }),
+            isUnread: notification.status === 1,
+            showBorder: index < notifications.length - 1
+          },
+          notification.id
+        )),
+        isFetchingNextPage && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx(Loader2, { size: 20, className: "animate-spin text-gray-400" }) })
+      ]
+    }
+  );
+}
 function NotificationPageContent() {
-  const { data: unreadedNotifications } = useMessages({
-    page: 1,
-    limit: 10,
-    status: 1,
+  const unreadNotifications = useInfiniteMessages({
+    unread: true,
     type: "notification",
     order: "desc"
   });
-  const { data: allNotifications } = useMessages({
-    page: 1,
-    limit: 10,
+  const allNotifications = useInfiniteMessages({
     type: "notification",
     order: "desc"
   });
+  const totalAll = allNotifications.data?.pages[0]?.total ?? 0;
+  const totalUnread = unreadNotifications.data?.pages[0]?.total ?? 0;
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 lg:gap-10 px-4 py-6 lg:px-20 lg:py-14", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
@@ -49,7 +90,7 @@ function NotificationPageContent() {
               " ",
               /* @__PURE__ */ jsxs("span", { className: "text-gray-500", children: [
                 "(",
-                allNotifications?.data.length,
+                totalAll,
                 ")"
               ] })
             ] }),
@@ -58,45 +99,29 @@ function NotificationPageContent() {
               " ",
               /* @__PURE__ */ jsxs("span", { className: "text-gray-500", children: [
                 "(",
-                unreadedNotifications?.data.length,
+                totalUnread,
                 ")"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsx(TabsContent, { value: "all", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col border border-gray-200 rounded-lg w-full bg-white", children: allNotifications?.data.map((notification, index) => /* @__PURE__ */ jsx(
-            NotificationCard,
+          /* @__PURE__ */ jsx(TabsContent, { value: "all", children: /* @__PURE__ */ jsx(
+            NotificationsList,
             {
-              icon: /* @__PURE__ */ jsx(Bell, { size: 20, className: "text-pages-600" }),
-              iconBgColor: "bg-pages-100",
-              title: notification.subject,
-              description: notification.message,
-              gapPx: 16,
-              time: formatDistanceToNow(new Date(notification.datetime_add), {
-                addSuffix: true,
-                locale: ptBR
-              }),
-              isUnread: notification.status === 1,
-              showBorder: index < allNotifications.data.length - 1
-            },
-            notification.id
-          )) }) }),
-          /* @__PURE__ */ jsx(TabsContent, { value: "unreads", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col border border-gray-200 rounded-lg w-full bg-white", children: unreadedNotifications?.data.map((notification, index) => /* @__PURE__ */ jsx(
-            NotificationCard,
+              pages: allNotifications.data,
+              isFetchingNextPage: allNotifications.isFetchingNextPage,
+              hasNextPage: allNotifications.hasNextPage,
+              fetchNextPage: allNotifications.fetchNextPage
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TabsContent, { value: "unreads", children: /* @__PURE__ */ jsx(
+            NotificationsList,
             {
-              icon: /* @__PURE__ */ jsx(Bell, { size: 20, className: "text-pages-600" }),
-              iconBgColor: "bg-pages-100",
-              title: notification.subject,
-              description: notification.message,
-              gapPx: 16,
-              time: formatDistanceToNow(new Date(notification.datetime_add), {
-                addSuffix: true,
-                locale: ptBR
-              }),
-              isUnread: notification.status === 1,
-              showBorder: index < unreadedNotifications.data.length - 1
-            },
-            notification.id
-          )) }) })
+              pages: unreadNotifications.data,
+              isFetchingNextPage: unreadNotifications.isFetchingNextPage,
+              hasNextPage: unreadNotifications.hasNextPage,
+              fetchNextPage: unreadNotifications.fetchNextPage
+            }
+          ) })
         ]
       }
     )

package/dist/components/pages/notifications/Notifications.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/pages/notifications/Notifications.tsx"],"sourcesContent":["import { Bell, Check } from \"lucide-react\";\nimport { Button } from \"../../ui/buttons/Button\";\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"../../ui/data-display/Tabs\";\nimport { useMessages } from \"../../../modules/users/hooks/messages.hook\";\nimport NotificationCard from \"../../widgets/notifications/NotificationCard\";\nimport { formatDistanceToNow } from \"date-fns\";\nimport { ptBR } from \"date-fns/locale\";\n\nexport function NotificationPageContent() {\n  const { data: unreadedNotifications } = useMessages({\n    page: 1,\n    limit: 10,\n    status: 1,\n    type: \"notification\",\n    order: \"desc\",\n  });\n  const { data: allNotifications } = useMessages({\n    page: 1,\n    limit: 10,\n    type: \"notification\",\n    order: \"desc\",\n  });\n  return (\n    <div className=\"flex flex-col gap-6 lg:gap-10 px-4 py-6 lg:px-20 lg:py-14\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <div className=\"flex flex-col gap-2\">\n          <h1 className=\"paragraph-xlarge-semibold lg:title-large-semibold text-gray-950\">\n            Notificações\n          </h1>\n          <p className=\"paragraph-medium-regular text-gray-600 hidden lg:block\">\n            Tenha controle total sobre páginas, experiências e conversões.\n          </p>\n        </div>\n        <Button variant={\"secondary\"} className=\"h-10! lg:h-12! shrink-0\">\n          <Check size={20} />\n          <span className=\"lg:block hidden\">Marcar todos como lidos</span>\n          <span className=\"lg:hidden\">Marcar como lidos</span>\n        </Button>\n      </div>\n      <Tabs\n        defaultValue=\"all\"\n        className=\"flex flex-col w-full bg-transparent gap-6 lg:gap-8\"\n      >\n        <TabsList className=\"h-auto pb-0 bg-transparent\">\n          <TabsTrigger className=\"gap-2\" value=\"all\">\n            Todas as notificações{\" \"}\n            <span className=\"text-gray-500\">\n              ({allNotifications?.data.length})\n            </span>\n          </TabsTrigger>\n          <TabsTrigger className=\"gap-2\" value=\"unreads\">\n            Não lidas{\" \"}\n            <span className=\"text-gray-500\">\n              ({unreadedNotifications?.data.length})\n            </span>\n          </TabsTrigger>\n        </TabsList>\n\n        <TabsContent value=\"all\">\n          <div className=\"flex flex-col border border-gray-200 rounded-lg w-full bg-white\">\n            {allNotifications?.data.map((notification, index) => (\n              <NotificationCard\n                key={notification.id}\n                icon={<Bell size={20} className=\"text-pages-600\" />}\n                iconBgColor=\"bg-pages-100\"\n                title={notification.subject}\n                description={notification.message}\n                gapPx={16}\n                time={formatDistanceToNow(new Date(notification.datetime_add), {\n                  addSuffix: true,\n                  locale: ptBR,\n                })}\n                isUnread={notification.status === 1}\n                showBorder={index < allNotifications.data.length - 1}\n              />\n            ))}\n          </div>\n        </TabsContent>\n\n        <TabsContent value=\"unreads\">\n          <div className=\"flex flex-col border border-gray-200 rounded-lg w-full bg-white\">\n            {unreadedNotifications?.data.map((notification, index) => (\n              <NotificationCard\n                key={notification.id}\n                icon={<Bell size={20} className=\"text-pages-600\" />}\n                iconBgColor=\"bg-pages-100\"\n                title={notification.subject}\n                description={notification.message}\n                gapPx={16}\n                time={formatDistanceToNow(new Date(notification.datetime_add), {\n                  addSuffix: true,\n                  locale: ptBR,\n                })}\n                isUnread={notification.status === 1}\n                showBorder={index < unreadedNotifications.data.length - 1}\n              />\n            ))}\n          </div>\n        </TabsContent>\n      </Tabs>\n    </div>\n  );\n}\n"],"mappings":"AA8BQ,SACE,KADF;AA9BR,SAAS,MAAM,aAAa;AAC5B,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,OAAO,sBAAsB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,YAAY;AAEd,SAAS,0BAA0B;AACxC,QAAM,EAAE,MAAM,sBAAsB,IAAI,YAAY;AAAA,IAClD,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,EACT,CAAC;AACD,QAAM,EAAE,MAAM,iBAAiB,IAAI,YAAY;AAAA,IAC7C,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,EACT,CAAC;AACD,SACE,qBAAC,SAAI,WAAU,6DACb;AAAA,yBAAC,SAAI,WAAU,2CACb;AAAA,2BAAC,SAAI,WAAU,uBACb;AAAA,4BAAC,QAAG,WAAU,mEAAkE,gCAEhF;AAAA,QACA,oBAAC,OAAE,WAAU,0DAAyD,qFAEtE;AAAA,SACF;AAAA,MACA,qBAAC,UAAO,SAAS,aAAa,WAAU,2BACtC;AAAA,4BAAC,SAAM,MAAM,IAAI;AAAA,QACjB,oBAAC,UAAK,WAAU,mBAAkB,qCAAuB;AAAA,QACzD,oBAAC,UAAK,WAAU,aAAY,+BAAiB;AAAA,SAC/C;AAAA,OACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,cAAa;AAAA,QACb,WAAU;AAAA,QAEV;AAAA,+BAAC,YAAS,WAAU,8BAClB;AAAA,iCAAC,eAAY,WAAU,SAAQ,OAAM,OAAM;AAAA;AAAA,cACnB;AAAA,cACtB,qBAAC,UAAK,WAAU,iBAAgB;AAAA;AAAA,gBAC5B,kBAAkB,KAAK;AAAA,gBAAO;AAAA,iBAClC;AAAA,eACF;AAAA,YACA,qBAAC,eAAY,WAAU,SAAQ,OAAM,WAAU;AAAA;AAAA,cACnC;AAAA,cACV,qBAAC,UAAK,WAAU,iBAAgB;AAAA;AAAA,gBAC5B,uBAAuB,KAAK;AAAA,gBAAO;AAAA,iBACvC;AAAA,eACF;AAAA,aACF;AAAA,UAEA,oBAAC,eAAY,OAAM,OACjB,8BAAC,SAAI,WAAU,mEACZ,4BAAkB,KAAK,IAAI,CAAC,cAAc,UACzC;AAAA,YAAC;AAAA;AAAA,cAEC,MAAM,oBAAC,QAAK,MAAM,IAAI,WAAU,kBAAiB;AAAA,cACjD,aAAY;AAAA,cACZ,OAAO,aAAa;AAAA,cACpB,aAAa,aAAa;AAAA,cAC1B,OAAO;AAAA,cACP,MAAM,oBAAoB,IAAI,KAAK,aAAa,YAAY,GAAG;AAAA,gBAC7D,WAAW;AAAA,gBACX,QAAQ;AAAA,cACV,CAAC;AAAA,cACD,UAAU,aAAa,WAAW;AAAA,cAClC,YAAY,QAAQ,iBAAiB,KAAK,SAAS;AAAA;AAAA,YAX9C,aAAa;AAAA,UAYpB,CACD,GACH,GACF;AAAA,UAEA,oBAAC,eAAY,OAAM,WACjB,8BAAC,SAAI,WAAU,mEACZ,iCAAuB,KAAK,IAAI,CAAC,cAAc,UAC9C;AAAA,YAAC;AAAA;AAAA,cAEC,MAAM,oBAAC,QAAK,MAAM,IAAI,WAAU,kBAAiB;AAAA,cACjD,aAAY;AAAA,cACZ,OAAO,aAAa;AAAA,cACpB,aAAa,aAAa;AAAA,cAC1B,OAAO;AAAA,cACP,MAAM,oBAAoB,IAAI,KAAK,aAAa,YAAY,GAAG;AAAA,gBAC7D,WAAW;AAAA,gBACX,QAAQ;AAAA,cACV,CAAC;AAAA,cACD,UAAU,aAAa,WAAW;AAAA,cAClC,YAAY,QAAQ,sBAAsB,KAAK,SAAS;AAAA;AAAA,YAXnD,aAAa;AAAA,UAYpB,CACD,GACH,GACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/pages/notifications/Notifications.tsx"],"sourcesContent":["import { Bell, Check, Loader2 } from \"lucide-react\";\nimport { Button } from \"../../ui/buttons/Button\";\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"../../ui/data-display/Tabs\";\nimport { useInfiniteMessages } from \"../../../modules/users/hooks/messages.hook\";\nimport NotificationCard from \"../../widgets/notifications/NotificationCard\";\nimport { formatDistanceToNow } from \"date-fns\";\nimport { ptBR } from \"date-fns/locale\";\nimport React from \"react\";\n\nfunction NotificationsList({\n  pages,\n  isFetchingNextPage,\n  hasNextPage,\n  fetchNextPage,\n}: {\n  pages: ReturnType<typeof useInfiniteMessages>[\"data\"];\n  isFetchingNextPage: boolean;\n  hasNextPage: boolean;\n  fetchNextPage: () => void;\n}) {\n  const notifications = pages?.pages.flatMap((p) => p.data) ?? [];\n\n  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {\n    const target = e.currentTarget;\n    const nearBottom =\n      target.scrollTop + target.clientHeight >= target.scrollHeight - 50;\n    if (!nearBottom) return;\n    if (hasNextPage && !isFetchingNextPage) {\n      fetchNextPage();\n    }\n  };\n\n  return (\n    <div\n      className=\"flex flex-col border border-gray-200 rounded-lg w-full bg-white max-h-[70vh] overflow-y-auto custom-scrollbar\"\n      onScroll={handleScroll}\n    >\n      {notifications.map((notification, index) => (\n        <NotificationCard\n          key={notification.id}\n          icon={<Bell size={20} className=\"text-pages-600\" />}\n          iconBgColor=\"bg-pages-100\"\n          title={notification.subject}\n          description={notification.message}\n          gapPx={16}\n          time={formatDistanceToNow(new Date(notification.datetime_add), {\n            addSuffix: true,\n            locale: ptBR,\n          })}\n          isUnread={notification.status === 1}\n          showBorder={index < notifications.length - 1}\n        />\n      ))}\n      {isFetchingNextPage && (\n        <div className=\"flex items-center justify-center py-4\">\n          <Loader2 size={20} className=\"animate-spin text-gray-400\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function NotificationPageContent() {\n  const unreadNotifications = useInfiniteMessages({\n    unread: true,\n    type: \"notification\",\n    order: \"desc\",\n  });\n  const allNotifications = useInfiniteMessages({\n    type: \"notification\",\n    order: \"desc\",\n  });\n\n  const totalAll = allNotifications.data?.pages[0]?.total ?? 0;\n  const totalUnread = unreadNotifications.data?.pages[0]?.total ?? 0;\n\n  return (\n    <div className=\"flex flex-col gap-6 lg:gap-10 px-4 py-6 lg:px-20 lg:py-14\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <div className=\"flex flex-col gap-2\">\n          <h1 className=\"paragraph-xlarge-semibold lg:title-large-semibold text-gray-950\">\n            Notificações\n          </h1>\n          <p className=\"paragraph-medium-regular text-gray-600 hidden lg:block\">\n            Tenha controle total sobre páginas, experiências e conversões.\n          </p>\n        </div>\n        <Button variant={\"secondary\"} className=\"h-10! lg:h-12! shrink-0\">\n          <Check size={20} />\n          <span className=\"lg:block hidden\">Marcar todos como lidos</span>\n          <span className=\"lg:hidden\">Marcar como lidos</span>\n        </Button>\n      </div>\n      <Tabs\n        defaultValue=\"all\"\n        className=\"flex flex-col w-full bg-transparent gap-6 lg:gap-8\"\n      >\n        <TabsList className=\"h-auto pb-0 bg-transparent\">\n          <TabsTrigger className=\"gap-2\" value=\"all\">\n            Todas as notificações{\" \"}\n            <span className=\"text-gray-500\">({totalAll})</span>\n          </TabsTrigger>\n          <TabsTrigger className=\"gap-2\" value=\"unreads\">\n            Não lidas{\" \"}\n            <span className=\"text-gray-500\">({totalUnread})</span>\n          </TabsTrigger>\n        </TabsList>\n\n        <TabsContent value=\"all\">\n          <NotificationsList\n            pages={allNotifications.data}\n            isFetchingNextPage={allNotifications.isFetchingNextPage}\n            hasNextPage={allNotifications.hasNextPage}\n            fetchNextPage={allNotifications.fetchNextPage}\n          />\n        </TabsContent>\n\n        <TabsContent value=\"unreads\">\n          <NotificationsList\n            pages={unreadNotifications.data}\n            isFetchingNextPage={unreadNotifications.isFetchingNextPage}\n            hasNextPage={unreadNotifications.hasNextPage}\n            fetchNextPage={unreadNotifications.fetchNextPage}\n          />\n        </TabsContent>\n      </Tabs>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/modules/users/hooks/messages.hook.mjs

@@ -1,16 +1,32 @@
 "use client";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { listMessagesAction } from "../action/list-messages.action";
 import { markMessageAsReadAction } from "../action/mark-message-as-read.action";
 import { markAllMessagesAsReadAction } from "../action/mark-all-messages-as-read.action";
 import { safeServerAction } from "../../../utils/safeServerAction";
 const MESSAGES_QUERY_KEY = ["messages"];
+const INFINITE_MESSAGES_PAGE_SIZE = 10;
 function useMessages(params) {
   return useQuery({
     queryKey: [...MESSAGES_QUERY_KEY, params],
     queryFn: () => safeServerAction(listMessagesAction, params)
   });
 }
+function useInfiniteMessages(params) {
+  return useInfiniteQuery({
+    queryKey: [...MESSAGES_QUERY_KEY, "infinite", params],
+    queryFn: ({ pageParam }) => safeServerAction(listMessagesAction, {
+      ...params,
+      page: pageParam,
+      limit: INFINITE_MESSAGES_PAGE_SIZE
+    }),
+    getNextPageParam: (lastPage, allPages) => {
+      const loaded = allPages.reduce((sum, p) => sum + p.data.length, 0);
+      return loaded < lastPage.total ? allPages.length + 1 : void 0;
+    },
+    initialPageParam: 1
+  });
+}
 function useMarkMessageAsRead() {
   const queryClient = useQueryClient();
   return useMutation({
@@ -31,6 +47,7 @@ function useMarkAllMessagesAsRead() {
 }
 export {
   MESSAGES_QUERY_KEY,
+  useInfiniteMessages,
   useMarkAllMessagesAsRead,
   useMarkMessageAsRead,
   useMessages

package/dist/modules/users/hooks/messages.hook.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/modules/users/hooks/messages.hook.ts"],"sourcesContent":["'use client';\r\n\r\nimport { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';\r\nimport { listMessagesAction } from '../action/list-messages.action';\r\nimport { markMessageAsReadAction } from '../action/mark-message-as-read.action';\r\nimport { markAllMessagesAsReadAction } from '../action/mark-all-messages-as-read.action';\r\nimport { safeServerAction } from '../../../utils/safeServerAction';\r\nimport type { FindMessagesParams } from '../schema/messages.schema';\r\n\r\nexport const MESSAGES_QUERY_KEY = ['messages'];\r\n\r\nexport function useMessages(params?: Partial<FindMessagesParams>) {\r\n  return useQuery({\r\n    queryKey: [...MESSAGES_QUERY_KEY, params],\r\n    queryFn: () => safeServerAction(listMessagesAction, params),\r\n  });\r\n}\r\n\r\nexport function useMarkMessageAsRead() {\r\n  const queryClient = useQueryClient();\r\n\r\n  return useMutation({\r\n    mutationFn: (messageId: string) => safeServerAction(markMessageAsReadAction, messageId),\r\n    onSuccess: () => {\r\n      queryClient.invalidateQueries({ queryKey: MESSAGES_QUERY_KEY });\r\n    },\r\n  });\r\n}\r\n\r\nexport function useMarkAllMessagesAsRead() {\r\n  const queryClient = useQueryClient();\r\n\r\n  return useMutation({\r\n    mutationFn: () => safeServerAction(markAllMessagesAsReadAction),\r\n    onSuccess: () => {\r\n      queryClient.invalidateQueries({ queryKey: MESSAGES_QUERY_KEY });\r\n    },\r\n  });\r\n}\r\n"],"mappings":";AAEA,SAAS,aAAa,UAAU,sBAAsB;AACtD,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AACxC,SAAS,mCAAmC;AAC5C,SAAS,wBAAwB;AAG1B,MAAM,qBAAqB,CAAC,UAAU;AAEtC,SAAS,YAAY,QAAsC;AAChE,SAAO,SAAS;AAAA,IACd,UAAU,CAAC,GAAG,oBAAoB,MAAM;AAAA,IACxC,SAAS,MAAM,iBAAiB,oBAAoB,MAAM;AAAA,EAC5D,CAAC;AACH;AAEO,SAAS,uBAAuB;AACrC,QAAM,cAAc,eAAe;AAEnC,SAAO,YAAY;AAAA,IACjB,YAAY,CAAC,cAAsB,iBAAiB,yBAAyB,SAAS;AAAA,IACtF,WAAW,MAAM;AACf,kBAAY,kBAAkB,EAAE,UAAU,mBAAmB,CAAC;AAAA,IAChE;AAAA,EACF,CAAC;AACH;AAEO,SAAS,2BAA2B;AACzC,QAAM,cAAc,eAAe;AAEnC,SAAO,YAAY;AAAA,IACjB,YAAY,MAAM,iBAAiB,2BAA2B;AAAA,IAC9D,WAAW,MAAM;AACf,kBAAY,kBAAkB,EAAE,UAAU,mBAAmB,CAAC;AAAA,IAChE;AAAA,EACF,CAAC;AACH;","names":[]}
+{"version":3,"sources":["../../../../src/modules/users/hooks/messages.hook.ts"],"sourcesContent":["'use client';\r\n\r\nimport { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';\r\nimport { listMessagesAction } from '../action/list-messages.action';\r\nimport { markMessageAsReadAction } from '../action/mark-message-as-read.action';\r\nimport { markAllMessagesAsReadAction } from '../action/mark-all-messages-as-read.action';\r\nimport { safeServerAction } from '../../../utils/safeServerAction';\r\nimport type { FindMessagesParams } from '../schema/messages.schema';\r\n\r\nexport const MESSAGES_QUERY_KEY = ['messages'];\r\n\r\nconst INFINITE_MESSAGES_PAGE_SIZE = 10;\r\n\r\nexport function useMessages(params?: Partial<FindMessagesParams>) {\r\n  return useQuery({\r\n    queryKey: [...MESSAGES_QUERY_KEY, params],\r\n    queryFn: () => safeServerAction(listMessagesAction, params),\r\n  });\r\n}\r\n\r\nexport function useInfiniteMessages(params?: Partial<Omit<FindMessagesParams, 'page' | 'limit'>>) {\r\n  return useInfiniteQuery({\r\n    queryKey: [...MESSAGES_QUERY_KEY, 'infinite', params],\r\n    queryFn: ({ pageParam }) =>\r\n      safeServerAction(listMessagesAction, {\r\n        ...params,\r\n        page: pageParam as number,\r\n        limit: INFINITE_MESSAGES_PAGE_SIZE,\r\n      }),\r\n    getNextPageParam: (lastPage, allPages) => {\r\n      const loaded = allPages.reduce((sum, p) => sum + p.data.length, 0);\r\n      return loaded < lastPage.total ? allPages.length + 1 : undefined;\r\n    },\r\n    initialPageParam: 1,\r\n  });\r\n}\r\n\r\nexport function useMarkMessageAsRead() {\r\n  const queryClient = useQueryClient();\r\n\r\n  return useMutation({\r\n    mutationFn: (messageId: string) => safeServerAction(markMessageAsReadAction, messageId),\r\n    onSuccess: () => {\r\n      queryClient.invalidateQueries({ queryKey: MESSAGES_QUERY_KEY });\r\n    },\r\n  });\r\n}\r\n\r\nexport function useMarkAllMessagesAsRead() {\r\n  const queryClient = useQueryClient();\r\n\r\n  return useMutation({\r\n    mutationFn: () => safeServerAction(markAllMessagesAsReadAction),\r\n    onSuccess: () => {\r\n      queryClient.invalidateQueries({ queryKey: MESSAGES_QUERY_KEY });\r\n    },\r\n  });\r\n}\r\n"],"mappings":";AAEA,SAAS,kBAAkB,aAAa,UAAU,sBAAsB;AACxE,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AACxC,SAAS,mCAAmC;AAC5C,SAAS,wBAAwB;AAG1B,MAAM,qBAAqB,CAAC,UAAU;AAE7C,MAAM,8BAA8B;AAE7B,SAAS,YAAY,QAAsC;AAChE,SAAO,SAAS;AAAA,IACd,UAAU,CAAC,GAAG,oBAAoB,MAAM;AAAA,IACxC,SAAS,MAAM,iBAAiB,oBAAoB,MAAM;AAAA,EAC5D,CAAC;AACH;AAEO,SAAS,oBAAoB,QAA8D;AAChG,SAAO,iBAAiB;AAAA,IACtB,UAAU,CAAC,GAAG,oBAAoB,YAAY,MAAM;AAAA,IACpD,SAAS,CAAC,EAAE,UAAU,MACpB,iBAAiB,oBAAoB;AAAA,MACnC,GAAG;AAAA,MACH,MAAM;AAAA,MACN,OAAO;AAAA,IACT,CAAC;AAAA,IACH,kBAAkB,CAAC,UAAU,aAAa;AACxC,YAAM,SAAS,SAAS,OAAO,CAAC,KAAK,MAAM,MAAM,EAAE,KAAK,QAAQ,CAAC;AACjE,aAAO,SAAS,SAAS,QAAQ,SAAS,SAAS,IAAI;AAAA,IACzD;AAAA,IACA,kBAAkB;AAAA,EACpB,CAAC;AACH;AAEO,SAAS,uBAAuB;AACrC,QAAM,cAAc,eAAe;AAEnC,SAAO,YAAY;AAAA,IACjB,YAAY,CAAC,cAAsB,iBAAiB,yBAAyB,SAAS;AAAA,IACtF,WAAW,MAAM;AACf,kBAAY,kBAAkB,EAAE,UAAU,mBAAmB,CAAC;AAAA,IAChE;AAAA,EACF,CAAC;AACH;AAEO,SAAS,2BAA2B;AACzC,QAAM,cAAc,eAAe;AAEnC,SAAO,YAAY;AAAA,IACjB,YAAY,MAAM,iBAAiB,2BAA2B;AAAA,IAC9D,WAAW,MAAM;AACf,kBAAY,kBAAkB,EAAE,UAAU,mBAAmB,CAAC;AAAA,IAChE;AAAA,EACF,CAAC;AACH;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/common",
-  "version": "1.1.81",
+  "version": "1.1.82",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",

package/src/components/pages/notifications/Notifications.tsx

@@ -1,4 +1,4 @@
-import { Bell, Check } from "lucide-react";
+import { Bell, Check, Loader2 } from "lucide-react";
 import { Button } from "../../ui/buttons/Button";
 import {
   Tabs,
@@ -6,25 +6,79 @@ import {
   TabsList,
   TabsTrigger,
 } from "../../ui/data-display/Tabs";
-import { useMessages } from "../../../modules/users/hooks/messages.hook";
+import { useInfiniteMessages } from "../../../modules/users/hooks/messages.hook";
 import NotificationCard from "../../widgets/notifications/NotificationCard";
 import { formatDistanceToNow } from "date-fns";
 import { ptBR } from "date-fns/locale";
+import React from "react";
+
+function NotificationsList({
+  pages,
+  isFetchingNextPage,
+  hasNextPage,
+  fetchNextPage,
+}: {
+  pages: ReturnType<typeof useInfiniteMessages>["data"];
+  isFetchingNextPage: boolean;
+  hasNextPage: boolean;
+  fetchNextPage: () => void;
+}) {
+  const notifications = pages?.pages.flatMap((p) => p.data) ?? [];
+
+  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const target = e.currentTarget;
+    const nearBottom =
+      target.scrollTop + target.clientHeight >= target.scrollHeight - 50;
+    if (!nearBottom) return;
+    if (hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  };
+
+  return (
+    <div
+      className="flex flex-col border border-gray-200 rounded-lg w-full bg-white max-h-[70vh] overflow-y-auto custom-scrollbar"
+      onScroll={handleScroll}
+    >
+      {notifications.map((notification, index) => (
+        <NotificationCard
+          key={notification.id}
+          icon={<Bell size={20} className="text-pages-600" />}
+          iconBgColor="bg-pages-100"
+          title={notification.subject}
+          description={notification.message}
+          gapPx={16}
+          time={formatDistanceToNow(new Date(notification.datetime_add), {
+            addSuffix: true,
+            locale: ptBR,
+          })}
+          isUnread={notification.status === 1}
+          showBorder={index < notifications.length - 1}
+        />
+      ))}
+      {isFetchingNextPage && (
+        <div className="flex items-center justify-center py-4">
+          <Loader2 size={20} className="animate-spin text-gray-400" />
+        </div>
+      )}
+    </div>
+  );
+}
 
 export function NotificationPageContent() {
-  const { data: unreadedNotifications } = useMessages({
-    page: 1,
-    limit: 10,
-    status: 1,
+  const unreadNotifications = useInfiniteMessages({
+    unread: true,
     type: "notification",
     order: "desc",
   });
-  const { data: allNotifications } = useMessages({
-    page: 1,
-    limit: 10,
+  const allNotifications = useInfiniteMessages({
     type: "notification",
     order: "desc",
   });
+
+  const totalAll = allNotifications.data?.pages[0]?.total ?? 0;
+  const totalUnread = unreadNotifications.data?.pages[0]?.total ?? 0;
+
   return (
     <div className="flex flex-col gap-6 lg:gap-10 px-4 py-6 lg:px-20 lg:py-14">
       <div className="flex items-center justify-between gap-4">
@@ -49,58 +103,30 @@ export function NotificationPageContent() {
         <TabsList className="h-auto pb-0 bg-transparent">
           <TabsTrigger className="gap-2" value="all">
             Todas as notificações{" "}
-            <span className="text-gray-500">
-              ({allNotifications?.data.length})
-            </span>
+            <span className="text-gray-500">({totalAll})</span>
           </TabsTrigger>
           <TabsTrigger className="gap-2" value="unreads">
             Não lidas{" "}
-            <span className="text-gray-500">
-              ({unreadedNotifications?.data.length})
-            </span>
+            <span className="text-gray-500">({totalUnread})</span>
           </TabsTrigger>
         </TabsList>
 
         <TabsContent value="all">
-          <div className="flex flex-col border border-gray-200 rounded-lg w-full bg-white">
-            {allNotifications?.data.map((notification, index) => (
-              <NotificationCard
-                key={notification.id}
-                icon={<Bell size={20} className="text-pages-600" />}
-                iconBgColor="bg-pages-100"
-                title={notification.subject}
-                description={notification.message}
-                gapPx={16}
-                time={formatDistanceToNow(new Date(notification.datetime_add), {
-                  addSuffix: true,
-                  locale: ptBR,
-                })}
-                isUnread={notification.status === 1}
-                showBorder={index < allNotifications.data.length - 1}
-              />
-            ))}
-          </div>
+          <NotificationsList
+            pages={allNotifications.data}
+            isFetchingNextPage={allNotifications.isFetchingNextPage}
+            hasNextPage={allNotifications.hasNextPage}
+            fetchNextPage={allNotifications.fetchNextPage}
+          />
         </TabsContent>
 
         <TabsContent value="unreads">
-          <div className="flex flex-col border border-gray-200 rounded-lg w-full bg-white">
-            {unreadedNotifications?.data.map((notification, index) => (
-              <NotificationCard
-                key={notification.id}
-                icon={<Bell size={20} className="text-pages-600" />}
-                iconBgColor="bg-pages-100"
-                title={notification.subject}
-                description={notification.message}
-                gapPx={16}
-                time={formatDistanceToNow(new Date(notification.datetime_add), {
-                  addSuffix: true,
-                  locale: ptBR,
-                })}
-                isUnread={notification.status === 1}
-                showBorder={index < unreadedNotifications.data.length - 1}
-              />
-            ))}
-          </div>
+          <NotificationsList
+            pages={unreadNotifications.data}
+            isFetchingNextPage={unreadNotifications.isFetchingNextPage}
+            hasNextPage={unreadNotifications.hasNextPage}
+            fetchNextPage={unreadNotifications.fetchNextPage}
+          />
         </TabsContent>
       </Tabs>
     </div>

package/src/modules/users/hooks/messages.hook.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { listMessagesAction } from '../action/list-messages.action';
 import { markMessageAsReadAction } from '../action/mark-message-as-read.action';
 import { markAllMessagesAsReadAction } from '../action/mark-all-messages-as-read.action';
@@ -9,6 +9,8 @@ import type { FindMessagesParams } from '../schema/messages.schema';
 
 export const MESSAGES_QUERY_KEY = ['messages'];
 
+const INFINITE_MESSAGES_PAGE_SIZE = 10;
+
 export function useMessages(params?: Partial<FindMessagesParams>) {
   return useQuery({
     queryKey: [...MESSAGES_QUERY_KEY, params],
@@ -16,6 +18,23 @@ export function useMessages(params?: Partial<FindMessagesParams>) {
   });
 }
 
+export function useInfiniteMessages(params?: Partial<Omit<FindMessagesParams, 'page' | 'limit'>>) {
+  return useInfiniteQuery({
+    queryKey: [...MESSAGES_QUERY_KEY, 'infinite', params],
+    queryFn: ({ pageParam }) =>
+      safeServerAction(listMessagesAction, {
+        ...params,
+        page: pageParam as number,
+        limit: INFINITE_MESSAGES_PAGE_SIZE,
+      }),
+    getNextPageParam: (lastPage, allPages) => {
+      const loaded = allPages.reduce((sum, p) => sum + p.data.length, 0);
+      return loaded < lastPage.total ? allPages.length + 1 : undefined;
+    },
+    initialPageParam: 1,
+  });
+}
+
 export function useMarkMessageAsRead() {
   const queryClient = useQueryClient();