fix: Add itemsPerFetch prop for updating notification count

Author: reshmarevi17

README.md

@@ -99,6 +99,7 @@ loadMoreLabel | Text to be shown on the bottom load more component | string | "L
 hideHeader | Flag to hide or show the header |  boolean | false |
 hideClearAll | Flag to hide or show the clear all button | boolean | false |
 darkMode | Flag to enable dark mode |  boolean | false |
+itemsPerFetch | Number of notifications fetch per api request (have a max cap of 50) | number | 20 |
 windowViewOnly | Flag to enable window view |  boolean | false |
 notificationIcon | Option to use custom notification Icon |  JSX Element | null |
 noOfNotificationsPerFetch | Number of notifications to fetch per page | number | 10 |

src/components/SirenInbox.tsx

@@ -6,7 +6,7 @@ import { useSirenContext } from "./SirenProvider";
 import type { SirenProps } from "../types";
 import { Constants } from "../utils";
 import { applyTheme, calculateModalPosition } from "../utils/commonUtils";
-import { BadgeType, ThemeMode } from "../utils/constants";
+import { BadgeType, MAXIMUM_ITEMS_PER_FETCH, ThemeMode } from "../utils/constants";
 import "../styles/sirenInbox.css";
 
 const { DEFAULT_WINDOW_TITLE } = Constants;
@@ -55,8 +55,10 @@ const SirenInbox: FC<SirenProps> = ({
   customNotificationCard,
   onNotificationCardClick,
   onError,
-  noOfNotificationsPerFetch = 10,
+  itemsPerFetch = 20,
 }) => {
+  const notificationsPerPage =
+  itemsPerFetch > MAXIMUM_ITEMS_PER_FETCH ? MAXIMUM_ITEMS_PER_FETCH : itemsPerFetch;
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { siren } = useSirenContext();
   const iconRef = useRef<HTMLDivElement>(null);
@@ -155,7 +157,7 @@ const SirenInbox: FC<SirenProps> = ({
           <SirenPanel
             title={title}
             styles={styles}
-            noOfNotificationsPerFetch={noOfNotificationsPerFetch}
+            noOfNotificationsPerFetch={notificationsPerPage}
             hideHeader={hideHeader}
             cardProps={cardProps}
             customFooter={customFooter}

src/types.ts

@@ -13,14 +13,14 @@ export type SirenInboxProps = {
   hideHeader?: boolean;
   hideClearAll?: boolean;
   darkMode?: boolean;
+  itemsPerFetch?: number;
   cardProps?: CardProps;
   listEmptyComponent?: JSX.Element;
   loadMoreComponent?:JSX.Element;
   customFooter?: JSX.Element;
   customHeader?: JSX.Element;
   customLoader?: JSX.Element;
   customErrorWindow?: JSX.Element;
-  noOfNotificationsPerFetch?: number;
   customNotificationCard?: (notification: NotificationDataType) => JSX.Element;
   onNotificationCardClick?: (notification: NotificationDataType) => void;
   onError?: (error: SirenErrorType) => void;

src/utils/constants.ts

@@ -101,6 +101,7 @@ export const DEFAULT_WINDOW_TITLE = "Notifications";
 export const RETRY_BUTTON_LABEL = "Retry";
 export const CLEAR_ALL_LABEL = "Clear All";
 export const TOKEN_VERIFICATION_FAILED = 'TOKEN_VERIFICATION_FAILED';
+export const MAXIMUM_ITEMS_PER_FETCH = 50;
 
 export const errorMap = {
   SIREN_OBJECT_NOT_FOUND: {