feat: Add minimum bound for page size, group header props, and expose 'mark as read' functionality on click

Author: reshmarevi17

README.md

@@ -6,11 +6,12 @@ The `@sirenapp/react-inbox` sdk is a comprehensive and customizable React UI kit
 
 ## 1. Installation
 
-You can install the react sdk from npm 
+You can install the react sdk from npm
 
 ```bash
 npm install @sirenapp/react-inbox
 ```
+
 or from yarn
 
 ```bash
@@ -22,7 +23,9 @@ yarn add @sirenapp/react-inbox
 - React v16.8+
 
 ## 2. Configuration
+
 ### 2.1 Initialization
+
 Initialize the sdk with user token and recipient id. Wrap the provider around your App's root.
 
 ```js
@@ -37,15 +40,15 @@ const config = {
 ```
 
 ### 2.2 Configure notification inbox
+
 Once the provider is configured, next step is to configure the notification inbox
 
 Inbox is a paginated list view for displaying notifications.
 
 ```js
-import { SirenInbox } from '@sirenapp/react-inbox';
+import { SirenInbox } from "@sirenapp/react-inbox";
 
 <SirenInbox />
-
 ```
 
 #### Props for the notification inbox
@@ -55,27 +58,25 @@ Below are optional props available for the inbox component:
 Prop | Description | Type | Default value |
 --- | --- | --- | --- |
 theme | Object for custom themes |  Theme | {} |
-title |  Title of the notification inbox |  string | "Notifications" |
-loadMoreLabel | Text shown on the load more component | string | "Load More"
-hideHeader | Toggle to hide or show the header section |  boolean | false |
-hideClearAll | Toggle to hide or show the clear all button | boolean | false |
+loadMoreLabel | Text shown on the load more component | string | "Load More" |
 hideBadge | Toggle to hide or show the badge       |   boolean  |   false  |
 darkMode | Toggle to enable dark mode |  boolean | false |
 itemsPerFetch | Number of notifications fetch per api request (have a max cap of 50) | number | 20 |
 windowViewOnly | Toggle to enable fit-to-screen window or modal view |  boolean | false |
 notificationIcon | Option to use custom notification Icon |  JSX Element | null |
-cardProps | Props for customizing the notification cards | { hideAvatar: boolean } | { hideAvatar: false } |
+inboxHeaderProps | Props for customizing the header.<br> title - Title of the notification inbox<br> hideHeader - Toggle to hide or show the header section.<br> hideClearAll - Toggle to hide or show the clear all button.<br> customHeader - Custom header component. | InboxHeaderProps| { title: '', hideHeader: false, hideClearAll: false, customHeader: null } |
+cardProps | Props for customizing the notification cards..<br> hideAvatar - Toggle to hide or show the avatar.<br> disableAutoMarkAsRead - Toggle to disable or enable the markAsRead functionality on card click | CardProps | { hideAvatar: false, disableAutoMarkAsRead: false } |
 customNotificationCard | Function for rendering custom notification cards | (notification)=> JSX Element | null |
 onNotificationCardClick | Custom click handler for notification cards | (notification)=> void | ()=>null |
 listEmptyComponent | Custom component for empty notification list | JSX Element | null |
-customHeader | Custom header component | JSX Element | null |
 customFooter | Custom footer component | JSX Element | null |
 customLoader | Custom loader component | JSX Element | null |
 loadMoreComponent | Custom load more component | JSX Element | null |
 customErrorWindow | Custom error window | JSX Element | null |
 onError | Callback for handling errors | (error:  SirenErrorType)=> void | null |
 
 ## 3. Customization
+
 ### 3.1 Themes
 
 Here are the available theme options:
@@ -101,7 +102,7 @@ type ThemeProps = {
     timerIcon?: string,
     clearAllIcon?: string,
     infiniteLoader?: string,
-    windowShadowColor?: string
+    windowShadowColor?: string,
   },
   badgeStyle?: {
     color?: string,
@@ -128,9 +129,10 @@ type ThemeProps = {
   loadMoreButton: {
     color?: string,
     background?: string,
-  }
+  },
 };
 ```
+
 ### 3.2 Style options
 
 Here are the custom style options for the notification inbox
@@ -187,6 +189,26 @@ Please note that the badgeStyle, window shadow and border props are only applica
 }
 ```
 
+#### CardProps
+
+```js
+    type CardProps = {
+      hideAvatar?: boolean,
+      disableAutoMarkAsRead?: boolean,
+    };
+```
+
+#### InboxHeaderProps
+
+```js
+    type InboxHeaderProps = {
+      title?: string;
+      hideHeader?: boolean,
+      hideClearAll?: boolean,
+      customHeader?: JSX.Element | null,
+    };
+```
+
 ## 4. Hooks
 
 `useSiren` is a hook that provides utility functions for modifying notifications.
@@ -229,43 +251,41 @@ function MyComponent() {
 }
 ```
 
-#### useSiren functions
+### useSiren functions
 
-| Functions                 | Parameters    | Type  | Description                                                 |
-| ----------------------------- | ----------------- |---------| ----------------------------------------------------------- |
-| markNotificationsAsReadByDate | startDate | ISO date string | Sets the read status of notifications to true until the given date.   |
-| markAsRead                    | id  | string        | Set read status of a notification to true          |
-| deleteNotification            | id  | string        | Delete a notification by id                        |
-| deleteNotificationsByDate     | startDate | ISO date string| Delete all notifications until given date                   |
-| markNotificationsAsViewed     | startDate | ISO date string | Sets the viewed status  of notifications to true until the given date |
+Functions | Parameters | Type | Description |
+----------|------------|-------|------------|
+markNotificationsAsReadByDate | startDate | ISO date string | Sets the read status of notifications to true until the given date |
+markAsRead | id | string | Set read status of a notification to true          |
+deleteNotification |  id | string  | Delete a notification by id |
+deleteNotificationsByDate | startDate | ISO date string | Delete all notifications until given date |
+markNotificationsAsViewed | startDate | ISO date string |Sets the viewed status of notifications to true until the given date |
 
 ## 5. Error codes
 
 Given below are all possible error codes thrown by sdk.
 
-| Error code                | Description                                                       |
-| ------------------------- | ------------------------------------------------------------------|
-| INVALID_TOKEN             | The token passed in the provider is invalid                       |
-| INVALID_RECIPIENT_ID      | The recipient id passed in the provider is invalid                |
-| TOKEN_VERIFICATION_FAILED | Verification of the given tokens has failed                       |
-| GENERIC_API_ERROR         | Occurrence of an unexpected api error                             |
-| OUTSIDE_SIREN_CONTEXT     | Attempting to invoke the functions outside the siren inbox context|
-| MISSING_PARAMETER         | The required parameter is missing                |
+Error code                | Description                                                       |
+------------------------- | ------------------------------------------------------------------|
+INVALID_TOKEN             | The token passed in the provider is invalid                       |
+INVALID_RECIPIENT_ID      | The recipient id passed in the provider is invalid                |
+TOKEN_VERIFICATION_FAILED | Verification of the given tokens has failed                       |
+GENERIC_API_ERROR         | Occurrence of an unexpected api error                             |
+OUTSIDE_SIREN_CONTEXT     | Attempting to invoke the functions outside the siren inbox context|
+MISSING_PARAMETER         | The required parameter is missing                |
 
 ## Example
 
 Here's a basic example to help you get started
 
 ```js
-
-import React from 'react';
-import {SirenInbox,SirenProvider} from '@sirenapp/react-inbox';
+import React from "react";
+import { SirenInbox, SirenProvider } from "@sirenapp/react-inbox";
 
 function App(): React.JSX.Element {
-
   const config = {
-    userToken: 'your_user_token',
-    recipientId: 'your_recipient_id',
+    userToken: "your_user_token",
+    recipientId: "your_recipient_id",
   };
 
   return (
@@ -278,15 +298,18 @@ function App(): React.JSX.Element {
 export default App;
 
 export function MyContainer(): React.JSX.Element {
-
   return (
     <div>
       <SirenInbox
         title="Notifications"
         hideHeader={false}
         darkMode={false}
-        cardProps={{hideAvatar: false}}
+        cardProps={{
+          hideAvatar: false,
+          disableAutoMarkAsRead: false,
+        }}
       />
     </div>
   );
-}
+}
+```

example/src/App.tsx

@@ -37,7 +37,7 @@ const App: React.FC = () => {
   const [showCustomNotificationCard, setShowCustomNotificationCard] =
     useState(false);
 
-    const { markNotificationsAsReadByDate, markAsRead } = useSiren();
+    const { markNotificationsAsReadByDate } = useSiren();
 
   const renderListEmpty = () => {
     return (
@@ -248,25 +248,26 @@ const App: React.FC = () => {
 
   return (
     <div>
-      <SirenInbox
-        title="Siren Notifications"
-        hideHeader={hideHeader}
+      <SirenInbox       
+        inboxHeaderProps={{
+          title:"Siren Notifications",
+          hideHeader: hideHeader,
+          customHeader: showCustomHeader ? renderCustomHeader() : undefined
+        }}
         darkMode={sdkDarkModeEnabled}
         cardProps={{ hideAvatar: hideAvatar, showMedia: true }}
         theme={windowThemes[windowThemeIndex]}
         customFooter={showCustomFooter ? renderCustomFooter() : undefined}
         listEmptyComponent={
           showCustomEmptyComponent ? renderListEmpty() : undefined
         }
-        customHeader={showCustomHeader ? renderCustomHeader() : undefined}
         customNotificationCard={
           showCustomNotificationCard
             ? (notification: any) => renderCustomNotificationCard(notification)
             : undefined
         }
-        onNotificationCardClick={(notification: { id: any; }) => {
+        onNotificationCardClick={() => {
           console.log("click on notification");
-          markAsRead(notification.id);
         }}
         onError={(error: any) => {
           console.log(`error: ${error}`);

src/components/Card.tsx

@@ -8,6 +8,7 @@ import defaultAvatarLight from "../assets/light/defaultAvatarLight.png";
 import type { NotificationCardProps } from "../types";
 import { generateElapsedTimeText } from "../utils/commonUtils";
 import "../styles/card.css";
+import useSiren from "../utils/sirenHook";
 
 /**
  * Card component represents an individual notification card in the notification list.
@@ -51,7 +52,10 @@ const Card: FC<NotificationCardProps> = ({
 }) => {
   const { id, createdAt, message, isRead } = notification;
   const { avatar, header, subHeader, body } = message;
-
+  const { hideAvatar, disableAutoMarkAsRead } =  cardProps ?? {};
+  const {
+    markAsRead
+  } = useSiren();
   const onDelete = (event: React.MouseEvent) => {
     deleteNotificationById(id);
     event.stopPropagation();
@@ -69,20 +73,23 @@ const Card: FC<NotificationCardProps> = ({
       backgroundColor: styles.activeCardMarker.backgroundColor,
     };
 
+  const handleNotificationCardClick = () => {
+    onNotificationCardClick && onNotificationCardClick(notification);
+    !disableAutoMarkAsRead && markAsRead(notification.id);
+  }
+
   return (
     <div
       style={cardContainerStyle}
       className={`${
-        cardProps?.hideAvatar
+        hideAvatar
           ? "siren-sdk-hide-avatar-card-container"
           : "siren-sdk-card-container"
       }`}
-      onClick={() =>
-        onNotificationCardClick && onNotificationCardClick(notification)
-      }
+      onClick={handleNotificationCardClick}
       data-testid={`card-${notification.id}`}
     >
-      {!cardProps?.hideAvatar && (
+      {!hideAvatar && (
         <div
           style={{
             ...styles.cardIconRound,

src/components/SirenInbox.tsx

@@ -4,28 +4,27 @@ import NotificationButton from "./SirenNotificationIcon";
 import SirenPanel from "./SirenPanel";
 import { useSirenContext } from "./SirenProvider";
 import type { SirenProps } from "../types";
-import { Constants } from "../utils";
 import { applyTheme, calculateModalPosition } from "../utils/commonUtils";
-import { BadgeType, MAXIMUM_ITEMS_PER_FETCH, ThemeMode } from "../utils/constants";
+import {
+  BadgeType,
+  MAXIMUM_ITEMS_PER_FETCH,
+  ThemeMode,
+} from "../utils/constants";
 import "../styles/sirenInbox.css";
 
-const { DEFAULT_WINDOW_TITLE } = Constants;
 /**
  * SirenInbox Component
  * @param {Object} props - Props for the SirenInbox component
  * @param {Theme} props.theme - The theme for the SirenInbox component
- * @param {string} props.title - The title of the notification panel.
  * @param {string} [props.title] - The title for the SirenInbox component
  * @param {boolean} [props.windowViewOnly=false] - Flag indicating if the window is view-only
- * @param {boolean} [props.hideHeader] - Flag indicating if the header should be hidden
- * @param {boolean} [props.hideClearAll] - Flag indicating if the clear all button should be hidden
  * @param {boolean} [props.hideBadge] - Flag indicating if the badge should be hidden
+ * @param {CardProps} [props.inboxHeaderProps] - Object containing props related to the inbox header
  * @param {boolean} [props.darkMode] - Flag indicating if the component is in dark mode
  * @param {CardProps} [props.cardProps] - Additional props for the card component
  * @param {ReactNode} [props.notificationIcon] - The notification icon for the window
  * @param {JSX.Element} [props.listEmptyComponent] - JSX element for rendering when the list is empty
  * @param {JSX.Element} [props.customFooter] - Custom footer JSX element for the window
- * @param {JSX.Element} [props.customHeader] - Custom header JSX element for the window
  * @param {Function} [props.customNotificationCard] - Function to render custom notification card
  * @param {Function} [props.onNotificationCardClick] - Handler for notification card click event
  * @param {Function} [props.onError] - Handler for error events
@@ -40,17 +39,14 @@ const { DEFAULT_WINDOW_TITLE } = Constants;
 const SirenInbox: FC<SirenProps> = ({
   theme,
   customStyles,
-  title = DEFAULT_WINDOW_TITLE,
   windowViewOnly = false,
-  hideHeader,
   hideBadge = false,
-  hideClearAll = false,
   darkMode = false,
+  inboxHeaderProps,
   cardProps,
   notificationIcon,
   listEmptyComponent,
   customFooter,
-  customHeader,
   customLoader,
   customErrorWindow,
   loadMoreComponent,
@@ -59,8 +55,13 @@ const SirenInbox: FC<SirenProps> = ({
   onError,
   itemsPerFetch = 20,
 }) => {
-  const notificationsPerPage =
-  itemsPerFetch > MAXIMUM_ITEMS_PER_FETCH ? MAXIMUM_ITEMS_PER_FETCH : itemsPerFetch;
+  const notificationsPerPage = Math.max(
+    0,
+    itemsPerFetch > MAXIMUM_ITEMS_PER_FETCH
+      ? MAXIMUM_ITEMS_PER_FETCH
+      : itemsPerFetch
+  );
+
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { siren } = useSirenContext();
   const iconRef = useRef<HTMLDivElement>(null);
@@ -158,20 +159,17 @@ const SirenInbox: FC<SirenProps> = ({
           data-testid="siren-panel"
         >
           <SirenPanel
-            title={title}
             styles={styles}
             noOfNotificationsPerFetch={notificationsPerPage}
-            hideHeader={hideHeader}
             hideBadge={hideBadge}
+            inboxHeaderProps={inboxHeaderProps}
             cardProps={cardProps}
             customFooter={customFooter}
-            customHeader={customHeader}
             customNotificationCard={customNotificationCard}
             onNotificationCardClick={onNotificationCardClick}
             onError={onError}
             listEmptyComponent={listEmptyComponent}
             fullScreen={windowViewOnly}
-            hideClearAll={hideClearAll}
             customLoader={customLoader}
             loadMoreComponent={loadMoreComponent}
             darkMode={darkMode}