feat: Added new prop to hide badge and updated component logic accordingly (#22)

Author: reshmarevi17

README.md

@@ -59,6 +59,7 @@ 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 |
+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 |

src/components/SirenInbox.tsx

@@ -19,6 +19,7 @@ const { DEFAULT_WINDOW_TITLE } = Constants;
  * @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 {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
@@ -42,6 +43,7 @@ const SirenInbox: FC<SirenProps> = ({
   title = DEFAULT_WINDOW_TITLE,
   windowViewOnly = false,
   hideHeader,
+  hideBadge = false,
   hideClearAll = false,
   darkMode = false,
   cardProps,
@@ -133,6 +135,7 @@ const SirenInbox: FC<SirenProps> = ({
             onIconClick={onIconClick}
             badgeType={isModalOpen ? BadgeType.NONE : BadgeType.DEFAULT}
             darkMode={darkMode}
+            hideBadge={hideBadge}
           />
         </div>
       )}
@@ -159,6 +162,7 @@ const SirenInbox: FC<SirenProps> = ({
             styles={styles}
             noOfNotificationsPerFetch={notificationsPerPage}
             hideHeader={hideHeader}
+            hideBadge={hideBadge}
             cardProps={cardProps}
             customFooter={customFooter}
             customHeader={customHeader}

src/components/SirenNotificationIcon.tsx

@@ -17,6 +17,7 @@ const { eventTypes, events } = Constants;
  * @param {BadgeType} [props.badgeType=DEFAULT] - The type of badge to display
  * @param {Object} [props.styles] - Custom styles for the component
  * @param {Function} props.onIconClick - Click event handler for the icon
+ * @param {boolean} [props.hideBadge] - Flag indicating if the badge should be hidden
  * @returns {JSX.Element} - SirenNotificationIcon component JSX
  */
 
@@ -26,6 +27,7 @@ const SirenNotificationIcon: FC<SirenNotificationButtonProps> = ({
   styles,
   onIconClick,
   darkMode,
+  hideBadge,
 }) => {
   const { siren } = useSirenContext();
 
@@ -42,23 +44,28 @@ const SirenNotificationIcon: FC<SirenNotificationButtonProps> = ({
   };
 
   useEffect(() => {
-    PubSub.subscribe(
-      events.NOTIFICATION_COUNT_EVENT,
-      notificationCountSubscriber
-    );
-
-    return () => {
-      cleanUp();
-    };
+    if(!hideBadge) {
+      PubSub.subscribe(
+        events.NOTIFICATION_COUNT_EVENT,
+        notificationCountSubscriber
+      );
+
+      return () => {
+        cleanUp();
+      };
+    }
   }, []);
 
   useEffect(() => {
-    getUnViewedCount();
-  }, [siren]);
+    if(!hideBadge) 
+      getUnViewedCount();
+    
+  }, [siren, hideBadge]);
 
   useEffect(() => {
-    startRealTimeDataFetch();
-  }, []);
+    if(!hideBadge)
+      startRealTimeDataFetch();
+  }, [hideBadge]);
 
   const cleanUp = () => {
     siren?.stopRealTimeUnviewedCountFetch();
@@ -135,7 +142,7 @@ const SirenNotificationIcon: FC<SirenNotificationButtonProps> = ({
           }
         />
       )}
-      {renderBadge()}
+      {!hideBadge && renderBadge()}
     </button>
   );
 };

src/components/SirenPanel.tsx

@@ -49,6 +49,7 @@ import useSiren from "../utils/sirenHook";
  * @param {string} props.title - The title of the notification panel.
  * @param {boolean} props.hideHeader=false] - Whether to hide the header of the notification panel.
  * @param {boolean} props.hideClearAll=false] - Flag indicating if the clear all button should be hidden
+ * @param {boolean} [props.hideBadge] - Flag indicating if the badge should be hidden
  * @param {string} props.loadMoreLabel - Label for load more button  
  * @param {Object} props.cardProps - Optional properties to customize the appearance of notification cards.
  * @param {Function} props.renderListEmpty - Function to render content when the notification list is empty.
@@ -74,6 +75,7 @@ const SirenPanel: FC<SirenPanelProps> = ({
   title,
   loadMoreLabel,
   hideHeader,
+  hideBadge,
   darkMode,
   cardProps,
   customFooter,
@@ -117,10 +119,10 @@ const SirenPanel: FC<SirenPanelProps> = ({
     return () => {
       cleanUp();
       setNotifications([]);
-      restartNotificationCountFetch();
+      !hideBadge && restartNotificationCountFetch();
       handleMarkNotificationsAsViewed(new Date().toISOString());
     };
-  }, []);
+  }, [hideBadge]);
 
   useEffect(() => {
     if (eventListenerData) {
@@ -137,10 +139,10 @@ const SirenPanel: FC<SirenPanelProps> = ({
 
   useEffect(() => {
     if (siren && verificationStatus !== VerificationStatus.PENDING) {
-      siren.stopRealTimeUnviewedCountFetch();
+      !hideBadge && siren.stopRealTimeUnviewedCountFetch();
       fetchNotifications(true);
     }
-  }, [siren, verificationStatus]);
+  }, [siren, verificationStatus, hideBadge]);
 
 
   const restartNotificationCountFetch = () => {

src/types.ts

@@ -12,6 +12,7 @@ export type SirenInboxProps = {
   loadMoreLabel?: string,
   hideHeader?: boolean;
   hideClearAll?: boolean;
+  hideBadge?: boolean;
   darkMode?: boolean;
   itemsPerFetch?: number;
   cardProps?: CardProps;
@@ -62,12 +63,14 @@ export type SirenNotificationButtonProps = {
   styles: SirenStyleProps;
   badgeType: BadgeType;
   darkMode: boolean;
+  hideBadge: boolean;
   notificationIcon?: JSX.Element;
   onIconClick: () => void;
 };
 export type SirenPanelProps = Pick<
   SirenInboxProps,
   | "hideHeader"
+  | "hideBadge"
   | "cardProps"
   | "customFooter"
   | "customHeader"

tests/components/sirenNotificationIcon.spec.tsx

@@ -27,6 +27,7 @@ test("matches snapshot", () => {
       badgeType="default"
       onIconClick={mockClickFn}
       darkMode={false}
+      hideBadge={false}
     />
   );
 
@@ -41,6 +42,7 @@ test("should render notification icon only", () => {
       notificationIcon={<div />}
       badgeType="none"
       darkMode={true}
+      hideBadge={false}
     />
   );
   const badge = component.queryByTestId("notification-default-badge");
@@ -56,6 +58,7 @@ test("should notification icon with a dot badge", () => {
       notificationIcon={<div />}
       badgeType="dot"
       darkMode={true}
+      hideBadge={false}
     />
   );
   const badge = component.queryByTestId("notification-dot-badge");
@@ -70,6 +73,7 @@ test("should render the passed notification icon", () => {
       badgeType="default"
       notificationIcon={<div data-testid="custom-notification-icon" />}
       darkMode={true}
+      hideBadge={false}
     />
   );
   const button = component.getByTestId("custom-notification-icon"); // Assuming count is displayed as button text
@@ -85,6 +89,7 @@ test("should call onClick handler on button click", () => {
       notificationIcon={<div />}
       badgeType="dot"
       darkMode={true}
+      hideBadge={false}
     />
   );
   const button = component.getByTestId("notification-icon");
@@ -102,6 +107,7 @@ it("does not render badge with count if unviewed count is 0", () => {
       onIconClick={mockClickFn}
       notificationIcon={<div />}
       darkMode={true}
+      hideBadge={false}
     />
   );
   const badge = queryByTestId("notification-default-badge");
@@ -117,6 +123,7 @@ it("renders badge without count for DOT badge type", () => {
       notificationIcon={<div />}
       badgeType="dot"
       darkMode={true}
+      hideBadge={false}
     />
   );
   const badge = getByTestId("notification-dot-badge");
@@ -133,6 +140,7 @@ it("calls onClick handler when icon is clicked", () => {
       notificationIcon={<div />}
       badgeType="dot"
       darkMode={true}
+      hideBadge={false}
     />
   );
   const icon = getByTestId("notification-icon");
@@ -149,6 +157,7 @@ test("should not render badge with count if unviewed count is 0", () => {
       onIconClick={mockClickFn}
       notificationIcon={<div />}
       darkMode={true}
+      hideBadge={false}
     />
   );
   const badge = queryByTestId("notification-default-badge");
@@ -164,6 +173,7 @@ test("should hide badge if unviewed count is 0 and badge type is default", () =>
       badgeType="default"
       notificationIcon={<div />}
       darkMode={true}
+      hideBadge={false}
     />
   );
   const badge = queryByTestId("notification-default-badge");
@@ -179,6 +189,7 @@ test("should hide badge if badge type is set to none", () => {
       badgeType="none"
       notificationIcon={<div />}
       darkMode={true}
+      hideBadge={false}
     />
   );
   const badge = queryByTestId("notification-default-badge");
@@ -194,6 +205,7 @@ test("calls PubSub.subscribe with correct arguments", () => {
       badgeType="default"
       onIconClick={mockClickFn}
       darkMode={true}
+      hideBadge={false}
     />,
     {
       wrapper: ({ children }) => (