Merge pull request #41 from KeyValueSoftwareSystems/dev

Refactor:  Update props, modal positioning logic change and readme update

Author: bilta-keyvalue

README.md

@@ -6,23 +6,26 @@ 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 @sirenapp/react-inbox
+npm install @sirenapp/react-inbox
 ```
+
 or from yarn
 
 ```bash
-yarn @sirenapp/react-inbox
+yarn add @sirenapp/react-inbox
 ```
 
 #### Prerequisites
 
 - 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: 'Notifications', <br>hideHeader: false,<br> hideClearAll: false, <br>customHeader: null } |
+cardProps | Props for customizing the notification cards. <br>hideDelete - Toggle to hide or show delete icon<br> hideAvatar - Toggle to hide or show the avatar.<br> disableAutoMarkAsRead - Toggle to disable or enable the markAsRead functionality on card click | CardProps | { hideDelete: false,<br> hideAvatar: false,<br> 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,27 @@ Please note that the badgeStyle, window shadow and border props are only applica
 }
 ```
 
+#### CardProps
+
+```js
+    type CardProps = {
+      hideDelete?: boolean;
+      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 +252,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 +299,21 @@ function App(): React.JSX.Element {
 export default App;
 
 export function MyContainer(): React.JSX.Element {
-
   return (
     <div>
       <SirenInbox
-        title="Notifications"
-        hideHeader={false}
+        inboxHeaderProps={
+          title: "Notifications",
+          hideHeader: false
+        }
         darkMode={false}
-        cardProps={{hideAvatar: false}}
+        cardProps={{
+          hideDelete: false,
+          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, hideDelete, 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,
@@ -118,16 +125,18 @@ const Card: FC<NotificationCardProps> = ({
           </div>
         </div>
       </div>
-      <div
-        data-testid={`delete-${notification.id}`}
-        className="siren-sdk-delete-button"
-        onClick={onDelete}
-      >
-        <CloseIcon
-          color={styles?.deleteIcon.color}
-          size={styles.deleteIcon.size}
-        />
-      </div>
+      {!hideDelete && (
+        <div
+          data-testid={`delete-${notification.id}`}
+          className="siren-sdk-delete-button"
+          onClick={onDelete}
+        >
+          <CloseIcon
+            color={styles?.deleteIcon.color}
+            size={styles.deleteIcon.size}
+          />
+        </div>
+      )}
     </div>
   );
 };

src/components/Loader.tsx

@@ -1,13 +1,17 @@
-import React from "react";
+import React, { type FC } from "react";
 
 import "../styles/loader.css";
-import type { SirenStyleProps } from "../types";
+import type { LoaderProps } from "../types";
 
-const Loader = ({styles}: {styles: SirenStyleProps}) => {
+const Loader : FC<LoaderProps> = ({
+  hideAvatar,
+  styles,
+
+}) =>  {
   return (
     <div className="siren-sdk-skeleton-container">
-      <div className="siren-sdk-skeleton-grid">
-        <div className="siren-sdk-skeleton-avatar siren-sdk-skeleton" style={styles.loader} />
+      <div className={`${!hideAvatar ? 'siren-sdk-skeleton-grid-with-avatar' : 'siren-sdk-skeleton-grid-without-avatar' }`}>
+        {!hideAvatar && (<div className="siren-sdk-skeleton-avatar siren-sdk-skeleton" style={styles.loader} />)}
         <div className="siren-sdk-skeleton-head siren-sdk-skeleton" style={styles.loader} />
         <div className="siren-sdk-skeleton-subtitle siren-sdk-skeleton" style={styles.loader} />
         <div className="siren-sdk-skeleton-body siren-sdk-skeleton" style={styles.loader}/>