@notificationapi/react 0.0.26 → 0.0.28

package/README.md

@@ -1,3 +1,25 @@
+[![NotificationAPI](./ReadmeLogo.svg)](https://notificationapi.com)
+
+The React SDK is mainly used for displaying In-App Notifications and allowing users to see and change their Notification Preferences.
+
+# Docs
+
+Please refer to our [documentations](https://docs.notificationapi.com).
+
+# Development
+
+1. Install dependencies:
+
+```
+npm install
+```
+
+2. Run the example application:
+
+```
+npm run dev
+```
+
 # React + TypeScript + Vite
 
 This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
@@ -20,11 +42,85 @@ export default {
     ecmaVersion: 'latest',
     sourceType: 'module',
     project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
+    tsconfigRootDir: __dirname
+  }
+};
 ```
 
 - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
 - Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
 - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+
+## Contributing
+
+We welcome contributions! To ensure smooth collaboration, please follow these steps:
+
+1. **Clone the Repository**
+
+   - Fork the repository to your GitHub account.
+   - Clone it to your local machine:
+
+     ```bash
+     git clone https://github.com/your-username/repo-name.git
+     cd repo-name
+     ```
+
+2. **Create a Branch**
+
+   - Create a new branch for your changes:
+
+     ```bash
+     git checkout -b your-branch-name
+     ```
+
+3. **Make Your Changes**
+
+   - Make your changes in the relevant files.
+   - Thoroughly test your changes to ensure they work as expected.
+
+4. **Versioning**
+
+   - Before committing your changes, update the package version by running:
+
+     ```bash
+     npm version <type>
+     ```
+
+   - **Versioning Types:**
+
+     - **major**: For breaking changes or large-scale features.
+     - **minor**: For adding functionality in a backwards-compatible manner.
+     - **patch**: For backwards-compatible bug fixes or small improvements.
+
+   - For example, to update a patch version:
+
+     ```bash
+     npm version patch
+     ```
+
+5. **Commit and Push**
+
+   - Once you’ve made and tested your changes, commit them with a meaningful message:
+
+     ```bash
+     git add .
+     git commit -m "Describe your changes"
+     ```
+
+   - Push your branch to GitHub:
+
+     ```bash
+     git push origin your-branch-name
+     ```
+
+6. **Submit a Pull Request**
+
+   - Create a pull request (PR) on GitHub.
+   - Provide a clear description of what your changes do.
+   - Link any relevant issues.
+
+7. **Update Documentation**
+   - If your changes affect the documentation, please update it accordingly.
+   - You can find the documentation repository here: [NotificationAPI Docs](https://github.com/notificationapi-com/docs).
+
+Thank you for contributing!

package/dist/components/Notifications/Inbox.js

@@ -6185,7 +6185,7 @@ const us = (e) => {
             data: s,
             height: e.maxHeight,
             itemHeight: 47,
-            itemKey: "id",
+            itemKey: (u) => u[0].id,
             onScroll: (u) => {
               Math.abs(
                 u.currentTarget.scrollHeight - u.currentTarget.scrollTop - e.maxHeight

package/dist/components/Notifications/NotificationLauncher.js

@@ -1,24 +1,25 @@
-import { jsx as i, jsxs as h } from "react/jsx-runtime";
-import { Inbox as l } from "./Inbox.js";
+import { jsx as i, jsxs as l } from "react/jsx-runtime";
+import { Inbox as h } from "./Inbox.js";
 import { UnreadBadge as g } from "./UnreadBadge.js";
 import { useState as m, useContext as b } from "react";
 import { NotificationAPIContext as s } from "../Provider/index.js";
 import { NotificationPreferencesPopup as I } from "../Preferences/NotificationPreferencesPopup.js";
 import "../Preferences/PreferenceInput.js";
-import { R as p } from "../../assets/channelUtils.js";
-import { P as S } from "../../assets/index.js";
-import { B as P } from "../../assets/button.js";
+import { R as S } from "../../assets/channelUtils.js";
+import { P } from "../../assets/index.js";
+import { B as C } from "../../assets/button.js";
 const B = (t) => {
-  var a, r, d, u;
-  const [c, o] = m(!1), n = b(s);
+  var a, r, d, c;
+  const [u, o] = m(!1), n = b(s);
   if (!n)
     return null;
   const e = {
     buttonIcon: t.buttonIcon || /* @__PURE__ */ i(
-      p,
+      S,
       {
         style: {
-          fontSize: t.buttonIconSize || (t.buttonWidth ? t.buttonWidth / 2 : 20)
+          fontSize: t.buttonIconSize || (t.buttonWidth ? t.buttonWidth / 2 : 20),
+          color: t.iconColor || "#000000"
         }
       }
     ),
@@ -28,6 +29,7 @@ const B = (t) => {
     popupHeight: t.popupHeight || 600,
     buttonIconSize: t.buttonIconSize || (t.buttonWidth ? t.buttonWidth / 2 : 20),
     imageShape: t.imageShape || "circle",
+    iconColor: t.iconColor || "#000000",
     pagination: t.pagination || "INFINITE_SCROLL",
     pageSize: t.pageSize || 10,
     pagePosition: t.pagePosition || "top",
@@ -44,10 +46,10 @@ const B = (t) => {
       button2ClickHandler: ((d = t.header) == null ? void 0 : d.button2ClickHandler) ?? (() => o(!0))
     },
     renderers: {
-      notification: (u = t.renderers) == null ? void 0 : u.notification
+      notification: (c = t.renderers) == null ? void 0 : c.notification
     }
   };
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ l(
     "div",
     {
       style: {
@@ -58,12 +60,12 @@ const B = (t) => {
       },
       children: [
         /* @__PURE__ */ i(
-          S,
+          P,
           {
             autoAdjustOverflow: !0,
             trigger: "click",
             content: /* @__PURE__ */ i(
-              l,
+              h,
               {
                 maxHeight: 500,
                 pagination: e.pagination,
@@ -99,7 +101,7 @@ const B = (t) => {
                     },
                     count: e.count,
                     children: /* @__PURE__ */ i(
-                      P,
+                      C,
                       {
                         icon: e.buttonIcon,
                         style: {
@@ -119,7 +121,7 @@ const B = (t) => {
         /* @__PURE__ */ i(
           I,
           {
-            open: c,
+            open: u,
             onClose: () => o(!1)
           }
         )

package/dist/components/Notifications/NotificationPopup.d.ts

@@ -12,6 +12,7 @@ export type NotificationPopupProps = {
     popupWidth?: number | string;
     popupHeight?: number;
     imageShape?: keyof typeof ImageShape;
+    iconColor?: string;
     pagination?: keyof typeof Pagination;
     pageSize?: number;
     pagePosition?: 'top' | 'bottom';

package/dist/components/Notifications/NotificationPopup.js

@@ -6,20 +6,21 @@ import { useState as b, useContext as I } from "react";
 import { NotificationPreferencesPopup as P } from "../Preferences/NotificationPreferencesPopup.js";
 import "../Preferences/PreferenceInput.js";
 import { Filter as S } from "./interface.js";
-import { R as s } from "../../assets/channelUtils.js";
-import { P as x } from "../../assets/index.js";
-import { B as C } from "../../assets/button.js";
+import { R as x } from "../../assets/channelUtils.js";
+import { P as C } from "../../assets/index.js";
+import { B as s } from "../../assets/button.js";
 const F = (t) => {
-  var a, r, d, u;
-  const [c, o] = b(!1), n = I(p);
+  var a, r, c, d;
+  const [u, o] = b(!1), n = I(p);
   if (!n)
     return null;
   const e = {
     buttonIcon: t.buttonIcon || /* @__PURE__ */ i(
-      s,
+      x,
       {
         style: {
-          fontSize: t.buttonIconSize || (t.buttonWidth ? t.buttonWidth / 2 : 20)
+          fontSize: t.buttonIconSize || (t.buttonWidth ? t.buttonWidth / 2 : 20),
+          color: t.iconColor || "#000000"
         }
       }
     ),
@@ -29,6 +30,7 @@ const F = (t) => {
     popupHeight: t.popupHeight || 600,
     buttonIconSize: t.buttonIconSize || (t.buttonWidth ? t.buttonWidth / 2 : 20),
     imageShape: t.imageShape || "circle",
+    iconColor: t.iconColor || "#000000",
     pagination: t.pagination || "INFINITE_SCROLL",
     pageSize: t.pageSize || 10,
     pagePosition: t.pagePosition || "top",
@@ -39,15 +41,15 @@ const F = (t) => {
     header: {
       title: (a = t.header) == null ? void 0 : a.title,
       button1ClickHandler: ((r = t.header) == null ? void 0 : r.button1ClickHandler) ?? n.markAsArchived,
-      button2ClickHandler: ((d = t.header) == null ? void 0 : d.button2ClickHandler) ?? (() => o(!0))
+      button2ClickHandler: ((c = t.header) == null ? void 0 : c.button2ClickHandler) ?? (() => o(!0))
     },
     renderers: {
-      notification: (u = t.renderers) == null ? void 0 : u.notification
+      notification: (d = t.renderers) == null ? void 0 : d.notification
     }
   };
   return /* @__PURE__ */ h(f, { children: [
     /* @__PURE__ */ i(
-      x,
+      C,
       {
         autoAdjustOverflow: !0,
         trigger: "click",
@@ -90,7 +92,7 @@ const F = (t) => {
                 count: e.count,
                 filter: e.filter,
                 children: /* @__PURE__ */ i(
-                  C,
+                  s,
                   {
                     icon: e.buttonIcon,
                     style: {
@@ -110,7 +112,7 @@ const F = (t) => {
     /* @__PURE__ */ i(
       P,
       {
-        open: c,
+        open: u,
         onClose: () => o(!1)
       }
     )

package/dist/components/Provider/index.d.ts

@@ -26,6 +26,8 @@ type Props = {
     wsURL?: string;
     initialLoadMaxCount?: number;
     initialLoadMaxAge?: Date;
+    playSoundOnNewNotification?: boolean;
+    newNotificationSoundPath?: string;
 };
 export declare const NotificationAPIProvider: React.FunctionComponent<PropsWithChildren<Props>> & {
     useNotificationAPIContext: typeof useNotificationAPIContext;

package/dist/components/Provider/index.js

@@ -1,15 +1,15 @@
-import { jsx as H } from "react/jsx-runtime";
-import { createContext as B, useState as N, useCallback as A, useMemo as G, useRef as m, useEffect as L, useContext as J } from "react";
-const _ = async (e, c, a, r, f, I, h) => {
-  const g = z(r, f, I), l = await fetch(
-    `https://${c}/${r}/users/${encodeURIComponent(
+import { jsx as B } from "react/jsx-runtime";
+import { createContext as F, useState as N, useCallback as b, useMemo as G, useRef as m, useEffect as M, useContext as J } from "react";
+const _ = async (e, c, r, a, f, w, p) => {
+  const h = z(a, f, w), l = await fetch(
+    `https://${c}/${a}/users/${encodeURIComponent(
       f
-    )}/${a}`,
+    )}/${r}`,
     {
       method: e,
-      body: JSON.stringify(h),
+      body: JSON.stringify(p),
       headers: {
-        Authorization: `Basic ${g}`
+        Authorization: `Basic ${h}`
       }
     }
   );
@@ -18,7 +18,7 @@ const _ = async (e, c, a, r, f, I, h) => {
   } catch {
     return;
   }
-}, z = (e, c, a) => btoa(a ? e + ":" + c + ":" + a : e + ":" + c), M = {
+}, z = (e, c, r) => btoa(r ? e + ":" + c + ":" + r : e + ":" + c), U = {
   host: "api.notificationapi.com",
   websocketHost: "ws.notificationapi.com",
   userId: "",
@@ -31,43 +31,43 @@ const _ = async (e, c, a, r, f, I, h) => {
   onNewInAppNotifications: void 0,
   keepWebSocketAliveForSeconds: 86400
   // 24 hours
-}, i = {
-  config: M,
+}, o = {
+  config: U,
   init: function(e) {
-    return this.config = { ...M, ...e }, {
+    return this.config = { ...U, ...e }, {
       ...this
     };
   },
   rest: {
-    generic: function(e, c, a) {
+    generic: function(e, c, r) {
       return _(
         e,
-        i.config.host,
+        o.config.host,
         c,
-        i.config.clientId,
-        i.config.userId,
-        i.config.hashedUserId,
-        a
+        o.config.clientId,
+        o.config.userId,
+        o.config.hashedUserId,
+        r
       );
     },
     getNotifications: function(e, c) {
-      return i.rest.generic(
+      return o.rest.generic(
         "GET",
         `notifications/INAPP_WEB?count=${c}&before=${e}`
       );
     },
     patchNotifications: function(e) {
-      return i.rest.generic(
+      return o.rest.generic(
         "PATCH",
         "notifications/INAPP_WEB",
         e
       );
     },
     getPreferences: function() {
-      return i.rest.generic("GET", "preferences");
+      return o.rest.generic("GET", "preferences");
     },
     postPreferences: function(e) {
-      return i.rest.generic(
+      return o.rest.generic(
         "POST",
         "preferences",
         e
@@ -77,24 +77,24 @@ const _ = async (e, c, a, r, f, I, h) => {
   websocket: {
     object: void 0,
     connect: function() {
-      let e = `wss://${i.config.websocketHost}?userId=${encodeURIComponent(i.config.userId)}&envId=${i.config.clientId}`;
-      return i.config.hashedUserId && (e += `&userIdHash=${encodeURIComponent(i.config.hashedUserId)}`), i.websocket.object = new WebSocket(e), i.websocket.object.onmessage = (c) => {
-        const a = JSON.parse(c.data);
-        if (!(!a || !a.route) && a.route === "inapp_web/new_notifications") {
-          const r = a;
-          i.config.onNewInAppNotifications && i.config.onNewInAppNotifications(
-            r.payload.notifications
+      let e = `wss://${o.config.websocketHost}?userId=${encodeURIComponent(o.config.userId)}&envId=${o.config.clientId}`;
+      return o.config.hashedUserId && (e += `&userIdHash=${encodeURIComponent(o.config.hashedUserId)}`), o.websocket.object = new WebSocket(e), o.websocket.object.onmessage = (c) => {
+        const r = JSON.parse(c.data);
+        if (!(!r || !r.route) && r.route === "inapp_web/new_notifications") {
+          const a = r;
+          o.config.onNewInAppNotifications && o.config.onNewInAppNotifications(
+            a.payload.notifications
           );
         }
-      }, i.websocket.object;
+      }, o.websocket.object;
     },
     disconnect: function(e) {
       var c;
-      i.websocket.object && ((c = i.websocket.object) == null || c.close(), e && e(i.websocket.object));
+      o.websocket.object && ((c = o.websocket.object) == null || c.close(), e && e(o.websocket.object));
     }
   },
   openWebSocket: function() {
-    return i.websocket.connect(() => {
+    return o.websocket.connect(() => {
       setTimeout(
         () => {
           this.websocket.disconnect(() => {
@@ -106,23 +106,23 @@ const _ = async (e, c, a, r, f, I, h) => {
     });
   },
   getInAppNotifications: async (e) => {
-    const c = e.maxCountNeeded || i.config.getInAppDefaultCount, a = e.oldestNeeded || i.config.getInAppDefaultOldest;
-    let r = [], f = e.before, I = !0, h = !0;
-    for (; h; ) {
-      const g = (await i.rest.getNotifications(
+    const c = e.maxCountNeeded || o.config.getInAppDefaultCount, r = e.oldestNeeded || o.config.getInAppDefaultOldest;
+    let a = [], f = e.before, w = !0, p = !0;
+    for (; p; ) {
+      const h = (await o.rest.getNotifications(
         f,
         c
       )).notifications.filter(
-        (l) => !r.find((p) => p.id === l.id)
+        (l) => !a.find((g) => g.id === l.id)
       );
-      f = g.reduce(
-        (l, p) => l < p.date ? l : p.date,
+      f = h.reduce(
+        (l, g) => l < g.date ? l : g.date,
         e.before
-      ), r = [...r, ...g], I = g.length > 0, h = !0, (!I || r.length >= c || f < a) && (h = !1);
+      ), a = [...a, ...h], w = h.length > 0, p = !0, (!w || a.length >= c || f < r) && (p = !1);
     }
     return {
-      items: r,
-      hasMore: I,
+      items: a,
+      hasMore: w,
       oldestReceived: f
     };
   },
@@ -130,157 +130,164 @@ const _ = async (e, c, a, r, f, I, h) => {
     const c = {
       trackingIds: e.ids
     };
-    return e.archived === !0 ? c.archived = (/* @__PURE__ */ new Date()).toISOString() : e.archived === !1 && (c.archived = null), e.clicked === !0 ? c.clicked = (/* @__PURE__ */ new Date()).toISOString() : e.clicked === !1 && (c.clicked = null), e.opened === !0 ? c.opened = (/* @__PURE__ */ new Date()).toISOString() : e.opened === !1 && (c.opened = null), i.rest.patchNotifications(c);
+    return e.archived === !0 ? c.archived = (/* @__PURE__ */ new Date()).toISOString() : e.archived === !1 && (c.archived = null), e.clicked === !0 ? c.clicked = (/* @__PURE__ */ new Date()).toISOString() : e.clicked === !1 && (c.clicked = null), e.opened === !0 ? c.opened = (/* @__PURE__ */ new Date()).toISOString() : e.opened === !1 && (c.opened = null), o.rest.patchNotifications(c);
   },
-  getPreferences: async () => i.rest.getPreferences(),
-  updateDeliveryOption: async (e) => i.rest.postPreferences([e])
-}, U = B(
+  getPreferences: async () => o.rest.getPreferences(),
+  updateDeliveryOption: async (e) => o.rest.postPreferences([e])
+}, R = F(
   void 0
-), F = (e) => {
-  const a = {
+), q = (e) => {
+  const r = {
     ...{
       apiURL: "https://api.notificationapi.com",
       wsURL: "wss://ws.notificationapi.com",
       initialLoadMaxCount: 1e3,
-      initialLoadMaxAge: new Date((/* @__PURE__ */ new Date()).setMonth((/* @__PURE__ */ new Date()).getMonth() - 3))
+      initialLoadMaxAge: new Date((/* @__PURE__ */ new Date()).setMonth((/* @__PURE__ */ new Date()).getMonth() - 3)),
+      playSoundOnNewNotification: !1,
+      newNotificationSoundPath: "https://proxy.notificationsounds.com/notification-sounds/elegant-notification-sound/download/file-sounds-1233-elegant.mp3"
     },
     ...e
-  }, [r, f] = N(), [I, h] = N(), [g, l] = N(!1), [p, D] = N((/* @__PURE__ */ new Date()).toISOString()), [b, v] = N(!0), S = A((o) => {
+  }, [a, f] = N(), [w, p] = N(), [h, l] = N(!1), [g, y] = N((/* @__PURE__ */ new Date()).toISOString()), [A, D] = N(!0), P = b(() => {
+    r.playSoundOnNewNotification && new Audio(r.newNotificationSoundPath).play().catch((s) => {
+      console.log("Failed to play new notification sound:", s);
+    });
+  }, [r.newNotificationSoundPath, r.playSoundOnNewNotification]), S = b((n) => {
     const s = (/* @__PURE__ */ new Date()).toISOString();
-    f((t) => (o = o.filter((n) => !(n.expDate && new Date(n.expDate * 1e3).toISOString() > s || n.date > s)), t ? [
-      ...o.filter((n) => !t.find((d) => d.id === n.id)),
+    f((t) => (n = n.filter((i) => !(i.expDate && new Date(i.expDate * 1e3).toISOString() > s || i.date > s)), t ? [
+      ...n.filter((i) => !t.find((d) => d.id === i.id)),
       ...t
-    ] : o));
-  }, []), u = G(() => i.init({
+    ] : n));
+  }, []), u = G(() => o.init({
     clientId: e.clientId,
     userId: e.userId,
     hashedUserId: e.hashedUserId,
-    onNewInAppNotifications: (o) => {
-      S(o);
+    onNewInAppNotifications: (n) => {
+      P(), S(n);
     }
   }), [
     e.clientId,
     e.userId,
     e.hashedUserId,
-    S
-  ]), P = A(
-    async (o, s) => {
-      const t = await u.rest.getNotifications(o, s);
-      D(t.oldestReceived), v(t.couldLoadMore), S(t.notifications);
+    S,
+    P
+  ]), v = b(
+    async (n, s) => {
+      const t = await u.rest.getNotifications(n, s);
+      y(t.oldestReceived), D(t.couldLoadMore), S(t.notifications);
     },
     [S, u.rest]
-  ), y = m(b), C = m(g), O = m(p);
-  L(() => {
-    y.current = b, C.current = g, O.current = p;
-  }, [b, g, p]);
-  const k = A(
-    async (o) => {
-      if (!(!o && (!y.current || C.current))) {
+  ), O = m(A), C = m(h), x = m(g);
+  M(() => {
+    O.current = A, C.current = h, x.current = g;
+  }, [A, h, g]);
+  const k = b(
+    async (n) => {
+      if (!(!n && (!O.current || C.current))) {
         l(!0);
         try {
-          await P(
-            o ? (/* @__PURE__ */ new Date()).toISOString() : O.current,
-            o ? a.initialLoadMaxCount : 1e3
+          await v(
+            n ? (/* @__PURE__ */ new Date()).toISOString() : x.current,
+            n ? r.initialLoadMaxCount : 1e3
           );
         } finally {
           l(!1);
         }
       }
     },
-    [a.initialLoadMaxCount, P]
-  ), R = async (o) => {
-    if (!r)
+    [r.initialLoadMaxCount, v]
+  ), $ = async (n) => {
+    if (!a)
       return;
-    const s = (/* @__PURE__ */ new Date()).toISOString(), t = r.filter((n) => o.includes(n.id) && !n.clicked).map((n) => n.id);
-    u.updateInAppNotifications({ ids: t, clicked: !0 }), f((n) => {
-      if (!n)
+    const s = (/* @__PURE__ */ new Date()).toISOString(), t = a.filter((i) => n.includes(i.id) && !i.clicked).map((i) => i.id);
+    u.updateInAppNotifications({ ids: t, clicked: !0 }), f((i) => {
+      if (!i)
         return [];
-      const d = [...n];
-      return d.filter((w) => t.includes(w.id)).forEach((w) => {
-        w.clicked = s;
+      const d = [...i];
+      return d.filter((I) => t.includes(I.id)).forEach((I) => {
+        I.clicked = s;
       }), d;
     });
-  }, $ = async () => {
-    if (!r)
+  }, E = async () => {
+    if (!a)
       return;
-    const o = (/* @__PURE__ */ new Date()).toISOString(), s = r.filter((t) => !t.opened || !t.seen).map((t) => t.id);
+    const n = (/* @__PURE__ */ new Date()).toISOString(), s = a.filter((t) => !t.opened || !t.seen).map((t) => t.id);
     s.length !== 0 && (u.updateInAppNotifications({
       ids: s,
       opened: !0
     }), f((t) => {
       if (!t)
         return [];
-      const n = [...t];
-      return n.filter((d) => s.includes(d.id)).forEach((d) => {
-        d.opened = o, d.seen = !0;
-      }), n;
+      const i = [...t];
+      return i.filter((d) => s.includes(d.id)).forEach((d) => {
+        d.opened = n, d.seen = !0;
+      }), i;
     }));
-  }, E = async (o) => {
-    if (!r)
+  }, j = async (n) => {
+    if (!a)
       return;
-    const s = r.filter((t) => t.archived && (o === "ALL" || o.includes(t.id))).map((t) => t.id);
+    const s = a.filter((t) => t.archived && (n === "ALL" || n.includes(t.id))).map((t) => t.id);
     s.length !== 0 && (u.updateInAppNotifications({
       ids: s,
       archived: !1
     }), f((t) => {
       if (!t)
         return [];
-      const n = [...t];
-      return n.filter((d) => s.includes(d.id)).forEach((d) => {
+      const i = [...t];
+      return i.filter((d) => s.includes(d.id)).forEach((d) => {
         d.archived = void 0;
-      }), n;
+      }), i;
     }));
-  }, j = async (o) => {
-    if (!r)
+  }, T = async (n) => {
+    if (!a)
       return;
-    const s = (/* @__PURE__ */ new Date()).toISOString(), t = r.filter((n) => !n.archived && (o === "ALL" || o.includes(n.id))).map((n) => n.id);
-    t.length !== 0 && (u.updateInAppNotifications({ ids: t, archived: !0 }), f((n) => {
-      if (!n)
+    const s = (/* @__PURE__ */ new Date()).toISOString(), t = a.filter((i) => !i.archived && (n === "ALL" || n.includes(i.id))).map((i) => i.id);
+    t.length !== 0 && (u.updateInAppNotifications({ ids: t, archived: !0 }), f((i) => {
+      if (!i)
         return [];
-      const d = [...n];
-      return d.filter((w) => t.includes(w.id)).forEach((w) => {
-        w.archived = s;
+      const d = [...i];
+      return d.filter((I) => t.includes(I.id)).forEach((I) => {
+        I.archived = s;
       }), d;
     }));
-  }, T = (o, s, t, n) => x([
+  }, W = (n, s, t, i) => L([
     {
-      notificationId: o,
+      notificationId: n,
       channel: s,
       delivery: t,
-      subNotificationId: n
+      subNotificationId: i
     }
-  ]), x = (o) => {
-    u.rest.postPreferences(o).then(() => {
+  ]), L = (n) => {
+    u.rest.postPreferences(n).then(() => {
       u.getPreferences().then((s) => {
-        h(s);
+        p(s);
       });
     });
   };
-  L(() => {
-    f([]), l(!1), h(void 0), D((/* @__PURE__ */ new Date()).toISOString()), v(!0), k(!0), u.openWebSocket(), u.getPreferences().then((o) => {
-      h(o);
+  M(() => {
+    f([]), l(!1), p(void 0), y((/* @__PURE__ */ new Date()).toISOString()), D(!0), k(!0), u.openWebSocket(), u.getPreferences().then((n) => {
+      p(n);
     });
   }, [u, k]);
-  const W = {
-    notifications: r,
-    preferences: I,
+  const H = {
+    notifications: a,
+    preferences: w,
     loadNotifications: k,
-    markAsOpened: $,
-    markAsArchived: j,
-    markAsUnarchived: E,
-    markAsClicked: R,
-    updateDelivery: T,
-    updateDeliveries: x
+    markAsOpened: E,
+    markAsArchived: T,
+    markAsUnarchived: j,
+    markAsClicked: $,
+    updateDelivery: W,
+    updateDeliveries: L
   };
-  return /* @__PURE__ */ H(U.Provider, { value: W, children: e.children });
-}, q = () => {
-  const e = J(U);
+  return /* @__PURE__ */ B(R.Provider, { value: H, children: e.children });
+}, K = () => {
+  const e = J(R);
   if (!e)
     throw new Error("useMyContext must be used within a MyProvider");
   return e;
 };
-F.useNotificationAPIContext = q;
+q.useNotificationAPIContext = K;
 export {
-  U as NotificationAPIContext,
-  F as NotificationAPIProvider
+  R as NotificationAPIContext,
+  q as NotificationAPIProvider
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@notificationapi/react",
   "private": false,
-  "version": "0.0.26",
+  "version": "0.0.28",
   "type": "module",
   "scripts": {
     "dev": "vite",