feat: Add category filter

example/src/App.tsx

@@ -83,8 +83,11 @@ const App: React.FC = () => {
         <div>
           <div style={{ color: "#fff", fontWeight: "600" }}>Siren</div>
         </div>
-        <div>
-          <div style={{ color: "#fff", fontWeight: "600" }} onClick={() => markAsReadByDate(String(new Date().getTime()))}>Mark allAsRead</div>
+        <div
+          style={{ color: "#fff", fontWeight: "600" }}
+          onClick={() => markAsReadByDate({ startDate: String(new Date().getTime()) })}
+        >
+          Mark allAsRead
         </div>
       </div>
     );

package.json

@@ -84,7 +84,7 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "@sirenapp/js-sdk": "^1.1.0",
+    "test_notification": "^1.1.6",
     "pubsub-js": "^1.9.4"
   }
 }

src/components/SirenInbox.tsx

@@ -60,6 +60,7 @@ const SirenInbox: FC<SirenProps> = ({
   onCardClick,
   onError,
   itemsPerFetch = 20,
+  category,
 }) => {
 
   const { siren } = useSirenContext();
@@ -205,6 +206,7 @@ const SirenInbox: FC<SirenProps> = ({
             darkMode={darkMode}
             customErrorWindow={customErrorWindow}
             modalWidth={updatedModalWidth}
+            category={category}
           />
         </div>
       )}

src/components/SirenPanel.tsx

@@ -6,7 +6,7 @@ import type {
   NotificationDataType,
   NotificationsApiResponse,
   SirenErrorType,
-} from "@sirenapp/js-sdk/dist/esm/types";
+} from "test_notification/dist/esm/types";
 
 import "../styles/sirenPanel.css";
 import NotificationCard from "./Card";
@@ -87,6 +87,7 @@ const SirenPanel: FC<SirenPanelProps> = ({
   onCardClick,
   onError,
   modalWidth,
+  category,
 }) => {
   const {
     markAllAsViewed,
@@ -186,8 +187,9 @@ const SirenPanel: FC<SirenPanelProps> = ({
   const handleClearAllNotification = async (): Promise<void> => {
     try {
       if (!isEmptyArray(notifications)) {
-        const response = await deleteByDate(
-          notifications[0].createdAt
+        const response = await deleteByDate({
+          startDate: notifications[0].createdAt,
+          category}
         );
 
         response && triggerOnError(response);
@@ -227,7 +229,8 @@ const SirenPanel: FC<SirenPanelProps> = ({
         generateFilterParams(
           isRefresh ? [] : notifications,
           false,
-          noOfNotificationsPerFetch
+          noOfNotificationsPerFetch,
+          category,
         )
       );
 
@@ -270,7 +273,7 @@ const SirenPanel: FC<SirenPanelProps> = ({
 
     try {
       siren?.startRealTimeFetch(
-        {eventType: EventType.NOTIFICATION, params:   generateFilterParams(newList ?? [], true, noOfNotificationsPerFetch)}   
+        {eventType: EventType.NOTIFICATION, params: generateFilterParams(newList ?? [], true, noOfNotificationsPerFetch, category)}   
       );
     } catch (er) {
       //  handle error if needed

src/components/SirenProvider.tsx

@@ -1,13 +1,13 @@
 import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
 
-import { Siren } from "@sirenapp/js-sdk";
+import PubSub from "pubsub-js";
+import { Siren } from "test_notification";
 import type {
   InitConfigType,
   NotificationsApiResponse,
   SirenErrorType,
   UnviewedCountApiResponse,
-} from "@sirenapp/js-sdk/dist/esm/types";
-import PubSub from "pubsub-js";
+} from "test_notification/dist/esm/types";
 
 import type { SirenProviderConfigProps } from "../types";
 import { generateUniqueId, logger } from "../utils/commonUtils";

src/types.ts

@@ -3,7 +3,7 @@ import type { CSSProperties } from "react";
 import type {
   NotificationDataType,
   SirenErrorType,
-} from "@sirenapp/js-sdk/dist/esm/types";
+} from "test_notification/dist/esm/types";
 
 export type SirenInboxProps = {
   theme?: Theme;
@@ -27,6 +27,7 @@ export type SirenInboxProps = {
   customCard?: (notification: NotificationDataType) => JSX.Element;
   onCardClick?: (notification: NotificationDataType) => void;
   onError?: (error: SirenErrorType) => void;
+  category?: string;
 };
 
 export type SirenNotificationIconProps = {
@@ -89,6 +90,7 @@ export type SirenPanelProps = Pick<
   | "loadMoreComponent"
   | "loadMoreLabel"
   | "customErrorWindow"
+  | "category"
 > & {
   styles: SirenStyleProps;
   onError?: (error: SirenErrorType) => void;

src/utils/commonUtils.ts

@@ -4,7 +4,7 @@ import type {
   ActionResponse,
   NotificationDataType,
   NotificationsApiResponse,
-} from "@sirenapp/js-sdk/dist/esm/types";
+} from "test_notification/dist/esm/types";
 
 import {
   defaultBadgeStyle,
@@ -26,6 +26,7 @@ type FetchParams = {
   start?: string;
   end?: string;
   sort?: "createdAt" | "updatedAt";
+  category?: string;
 };
 
 export const generateElapsedTimeText = (timeString: string) => {
@@ -362,14 +363,20 @@ export const filterDataProperty = (
 export const generateFilterParams = (
   data: NotificationDataType[],
   fromStart: boolean,
-  itemsPerPage: number
+  itemsPerPage: number,
+  category?: string,
 ): FetchParams => {
-  let params: FetchParams = { size: itemsPerPage, sort: "createdAt" };
+  let params: FetchParams = { size: itemsPerPage, sort: "createdAt"};
+
+  if (category) 
+    params.category = category;
+
+
 
   if (data.length > 0)
     if (fromStart) params = { ...params, start: data[0].createdAt };
     else params = { ...params, end: data[data.length - 1].createdAt };
-
+  
   return params;
 };
 

src/utils/sirenHook.ts

@@ -11,7 +11,7 @@ const useSiren = () => {
       if (id?.length > 0) {
         const response = await siren?.markAsReadById(id);
 
-        if (response && response.data) {
+        if (response?.data) {
           const payload = { id, action: eventTypes.MARK_ITEM_AS_READ };
 
           PubSub.publish(
@@ -28,11 +28,12 @@ const useSiren = () => {
     return { error: errorMap.SIREN_OBJECT_NOT_FOUND };
   };
 
-  const markAsReadByDate = async (untilDate: string) => {
-    if (siren && untilDate) {
-      const response = await siren?.markAsReadByDate(untilDate);
+  const markAsReadByDate = async (params: { startDate: string, category?: string }) => {
+
+    if (siren && params?.startDate) {
+      const response = await siren?.markAsReadByDate(params);
 
-      if (response && response.data) {
+      if (response?.data) {
         const payload = { action: eventTypes.MARK_ALL_AS_READ };
 
         PubSub.publish(`${events.NOTIFICATION_LIST_EVENT}${providerInstanceId}`, JSON.stringify(payload));
@@ -65,27 +66,29 @@ const useSiren = () => {
     return { error: errorMap.SIREN_OBJECT_NOT_FOUND };
   };
 
-  const deleteByDate = async (untilDate: string) => {
-    if (siren && untilDate) {
-      const response = await siren.deleteByDate(untilDate);
-
-      if (response && response.data) {
+  const deleteByDate = async (params: { startDate: string, category?: string }) => {
+
+    if (siren && params?.startDate) {
+      const response = await siren?.deleteByDate(params);
+
+      if (response?.data) {
         const payload = { action: eventTypes.DELETE_ALL_ITEM };
 
         PubSub.publish(`${events.NOTIFICATION_LIST_EVENT}${providerInstanceId}`, JSON.stringify(payload));
       }
-
+  
       return response;
     }
-
+  
     return { error: errorMap.SIREN_OBJECT_NOT_FOUND };
   };
+
 
   const markAllAsViewed = async (untilDate: string) => {
     if (siren && untilDate) {
       const response = await siren?.markAllAsViewed(untilDate);
 
-      if (response && response.data) {
+      if (response?.data) {
         const payload = {
           notificationsCount: 0,
           action: eventTypes.UPDATE_NOTIFICATIONS_COUNT,

tests/components/sirenProvider.spec.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 
-import { Siren } from "@sirenapp/js-sdk";
+import { Siren } from "test_notification";
 import { render } from "@testing-library/react";
 
 import SirenProvider from "../../src/components/SirenProvider"; // Replace with your path
 
-jest.mock("@sirenapp/js-sdk");
+jest.mock("test_notification");
 
 describe("SirenProvider", () => {
   it("should render children", () => {

tests/utils/sirenHook.spec.tsx

@@ -1,4 +1,4 @@
-import type { Siren } from "@sirenapp/js-sdk";
+import type { Siren } from "test_notification";
 
 import { useSiren } from "../../src";
 import * as sirenProvider from "../../src/components/SirenProvider";
@@ -168,10 +168,11 @@ describe("useSiren hook", () => {
 
     const { markAsReadByDate } = useSiren();
     const untilDate = "2024-02-28T00:00:00Z";
-    const response = await markAsReadByDate(untilDate);
+    const response = await markAsReadByDate({startDate: untilDate});
 
-    expect(mockSirenCore.markAsReadByDate).toHaveBeenCalledWith(
-      untilDate
+    expect(mockSirenCore.markAsReadByDate).toHaveBeenCalledWith({
+      startDate: untilDate,
+    }
     );
 
     expect(response).toEqual(ActionResponse);
@@ -187,9 +188,9 @@ describe("useSiren hook", () => {
     });
 
     const { markAsReadByDate } = useSiren();
-    const response = await markAsReadByDate(
-      undefined as unknown as string
-    );
+    const response = await markAsReadByDate({
+      startDate: undefined as unknown as string,
+    });
 
     expect(response).toEqual({
       error: errorMap.SIREN_OBJECT_NOT_FOUND,
@@ -238,10 +239,11 @@ describe("useSiren hook", () => {
 
     const { deleteByDate } = useSiren();
     const untilDate = "2024-02-28T00:00:00Z";
-    const response = await deleteByDate(untilDate);
+    const response = await deleteByDate({startDate: untilDate});
 
-    expect(mockSirenCore.deleteByDate).toHaveBeenCalledWith(
-      untilDate
+    expect(mockSirenCore.deleteByDate).toHaveBeenCalledWith({
+      startDate: untilDate,
+    }
     );
 
     expect(response).toEqual(ActionResponse);