@notificationapi/react 0.0.28 → 0.0.30

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

@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react';
-import { GetPreferencesResponse, InAppNotification, BaseDeliveryOptions, Channels, DeliveryOptionsForEmail, DeliveryOptionsForInappWeb } from '@notificationapi/core/dist/interfaces';
+import { NotificationAPIClientSDK } from '@notificationapi/core';
+import { GetPreferencesResponse, InAppNotification, User, BaseDeliveryOptions, Channels, DeliveryOptionsForEmail, DeliveryOptionsForInappWeb } from '@notificationapi/core/dist/interfaces';
 
 export type Context = {
     notifications?: InAppNotification[];
@@ -16,11 +17,15 @@ export type Context = {
         delivery: DeliveryOptionsForEmail | DeliveryOptionsForInappWeb | BaseDeliveryOptions;
         subNotificationId?: string;
     }[]) => void;
+    getClient: () => typeof NotificationAPIClientSDK;
 };
 export declare const NotificationAPIContext: import('react').Context<Context | undefined>;
-type Props = {
-    clientId: string;
+type Props = ({
     userId: string;
+} | {
+    user: Omit<User, 'createdAt' | 'updatedAt' | 'lastSeenTime'>;
+}) & {
+    clientId: string;
     hashedUserId?: string;
     apiURL?: string;
     wsURL?: string;

package/dist/components/Provider/index.js

@@ -1,10 +1,10 @@
 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(
+import { createContext as z, useState as N, useCallback as A, useMemo as F, useRef as y, useEffect as U, useContext as G } from "react";
+const J = async (e, s, c, a, f, w, p) => {
+  const h = _(a, f, w), l = await fetch(
+    `https://${s}/${a}/users/${encodeURIComponent(
       f
-    )}/${r}`,
+    )}/${c}`,
     {
       method: e,
       body: JSON.stringify(p),
@@ -18,7 +18,7 @@ const _ = async (e, c, r, a, f, w, p) => {
   } catch {
     return;
   }
-}, z = (e, c, r) => btoa(r ? e + ":" + c + ":" + r : e + ":" + c), U = {
+}, _ = (e, s, c) => btoa(c ? e + ":" + s + ":" + c : e + ":" + s), M = {
   host: "api.notificationapi.com",
   websocketHost: "ws.notificationapi.com",
   userId: "",
@@ -31,70 +31,76 @@ const _ = async (e, c, r, a, f, w, p) => {
   onNewInAppNotifications: void 0,
   keepWebSocketAliveForSeconds: 86400
   // 24 hours
-}, o = {
-  config: U,
+}, n = {
+  config: M,
   init: function(e) {
-    return this.config = { ...U, ...e }, {
+    return this.config = { ...M, ...e }, {
       ...this
     };
   },
   rest: {
-    generic: function(e, c, r) {
-      return _(
+    generic: function(e, s, c) {
+      return J(
         e,
-        o.config.host,
-        c,
-        o.config.clientId,
-        o.config.userId,
-        o.config.hashedUserId,
-        r
+        n.config.host,
+        s,
+        n.config.clientId,
+        n.config.userId,
+        n.config.hashedUserId,
+        c
       );
     },
-    getNotifications: function(e, c) {
-      return o.rest.generic(
+    // The functions below are nice wrappers over the generic
+    // rest  api function above. They must follow REST API naming:
+    // Method + Resource, representing the end-point.
+    getNotifications: function(e, s) {
+      return n.rest.generic(
         "GET",
-        `notifications/INAPP_WEB?count=${c}&before=${e}`
+        `notifications/INAPP_WEB?count=${s}&before=${e}`
       );
     },
     patchNotifications: function(e) {
-      return o.rest.generic(
+      return n.rest.generic(
         "PATCH",
         "notifications/INAPP_WEB",
         e
       );
     },
     getPreferences: function() {
-      return o.rest.generic("GET", "preferences");
+      return n.rest.generic("GET", "preferences");
     },
     postPreferences: function(e) {
-      return o.rest.generic(
+      return n.rest.generic(
         "POST",
         "preferences",
         e
       );
+    },
+    postUser: function(e) {
+      return n.rest.generic("POST", "", e);
     }
   },
   websocket: {
     object: void 0,
     connect: function() {
-      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(
+      let e = `wss://${n.config.websocketHost}?userId=${encodeURIComponent(n.config.userId)}&envId=${n.config.clientId}`;
+      return n.config.hashedUserId && (e += `&userIdHash=${encodeURIComponent(n.config.hashedUserId)}`), n.websocket.object = new WebSocket(e), n.websocket.object.onmessage = (s) => {
+        const c = JSON.parse(s.data);
+        if (!(!c || !c.route) && c.route === "inapp_web/new_notifications") {
+          const a = c;
+          n.config.onNewInAppNotifications && n.config.onNewInAppNotifications(
             a.payload.notifications
           );
         }
-      }, o.websocket.object;
+      }, n.websocket.object;
     },
     disconnect: function(e) {
-      var c;
-      o.websocket.object && ((c = o.websocket.object) == null || c.close(), e && e(o.websocket.object));
+      var s;
+      n.websocket.object && ((s = n.websocket.object) == null || s.close(), e && e(n.websocket.object));
     }
   },
   openWebSocket: function() {
-    return o.websocket.connect(() => {
+    return n.websocket.connect(() => {
       setTimeout(
         () => {
           this.websocket.disconnect(() => {
@@ -105,20 +111,23 @@ const _ = async (e, c, r, a, f, w, p) => {
       );
     });
   },
+  // These functions are developer friendly wrappers over the rest APIs
+  // They may or may not do additional tasks.
+  // e.g. identify simply maps to postUsers
   getInAppNotifications: async (e) => {
-    const c = e.maxCountNeeded || o.config.getInAppDefaultCount, r = e.oldestNeeded || o.config.getInAppDefaultOldest;
+    const s = e.maxCountNeeded || n.config.getInAppDefaultCount, c = e.oldestNeeded || n.config.getInAppDefaultOldest;
     let a = [], f = e.before, w = !0, p = !0;
     for (; p; ) {
-      const h = (await o.rest.getNotifications(
+      const h = (await n.rest.getNotifications(
         f,
-        c
+        s
       )).notifications.filter(
         (l) => !a.find((g) => g.id === l.id)
       );
       f = h.reduce(
         (l, g) => l < g.date ? l : g.date,
         e.before
-      ), a = [...a, ...h], w = h.length > 0, p = !0, (!w || a.length >= c || f < r) && (p = !1);
+      ), a = [...a, ...h], w = h.length > 0, p = !0, (!w || a.length >= s || f < c) && (p = !1);
     }
     return {
       items: a,
@@ -127,17 +136,24 @@ const _ = async (e, c, r, a, f, w, p) => {
     };
   },
   updateInAppNotifications: async (e) => {
-    const c = {
+    const s = {
       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), o.rest.patchNotifications(c);
+    return e.archived === !0 ? s.archived = (/* @__PURE__ */ new Date()).toISOString() : e.archived === !1 && (s.archived = null), e.clicked === !0 ? s.clicked = (/* @__PURE__ */ new Date()).toISOString() : e.clicked === !1 && (s.clicked = null), e.opened === !0 ? s.opened = (/* @__PURE__ */ new Date()).toISOString() : e.opened === !1 && (s.opened = null), n.rest.patchNotifications(s);
   },
-  getPreferences: async () => o.rest.getPreferences(),
-  updateDeliveryOption: async (e) => o.rest.postPreferences([e])
-}, R = F(
+  getPreferences: async () => n.rest.getPreferences(),
+  updateDeliveryOption: async (e) => n.rest.postPreferences([e]),
+  identify: async (e) => {
+    if (e.id && e.id !== n.config.userId)
+      throw new Error(
+        "The id in the parameters does not match the initialized userId."
+      );
+    return n.rest.postUser(e);
+  }
+}, E = z(
   void 0
 ), q = (e) => {
-  const r = {
+  const c = {
     ...{
       apiURL: "https://api.notificationapi.com",
       wsURL: "wss://ws.notificationapi.com",
@@ -146,148 +162,153 @@ const _ = async (e, c, r, a, f, w, p) => {
       playSoundOnNewNotification: !1,
       newNotificationSoundPath: "https://proxy.notificationsounds.com/notification-sounds/elegant-notification-sound/download/file-sounds-1233-elegant.mp3"
     },
-    ...e
-  }, [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);
+    ...e,
+    user: "userId" in e ? { id: e.userId } : e.user
+  }, [a, f] = N(), [w, p] = N(), [h, l] = N(!1), [g, m] = N((/* @__PURE__ */ new Date()).toISOString()), [b, P] = N(!0), D = A(() => {
+    c.playSoundOnNewNotification && new Audio(c.newNotificationSoundPath).play().catch((r) => {
+      console.log("Failed to play new notification sound:", r);
     });
-  }, [r.newNotificationSoundPath, r.playSoundOnNewNotification]), S = b((n) => {
-    const s = (/* @__PURE__ */ new Date()).toISOString();
-    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)),
+  }, [c.newNotificationSoundPath, c.playSoundOnNewNotification]), S = A((i) => {
+    const r = (/* @__PURE__ */ new Date()).toISOString();
+    f((t) => (i = i.filter((o) => !(o.expDate && new Date(o.expDate * 1e3).toISOString() > r || o.date > r)), t ? [
+      ...i.filter((o) => !t.find((d) => d.id === o.id)),
       ...t
-    ] : n));
-  }, []), u = G(() => o.init({
-    clientId: e.clientId,
-    userId: e.userId,
-    hashedUserId: e.hashedUserId,
-    onNewInAppNotifications: (n) => {
-      P(), S(n);
-    }
-  }), [
-    e.clientId,
-    e.userId,
-    e.hashedUserId,
+    ] : i));
+  }, []), u = F(() => {
+    const i = n.init({
+      clientId: c.clientId,
+      userId: c.user.id,
+      hashedUserId: c.hashedUserId,
+      onNewInAppNotifications: (r) => {
+        D(), S(r);
+      }
+    });
+    return i.identify(c.user), i;
+  }, [
+    c.clientId,
+    c.user,
+    c.hashedUserId,
     S,
-    P
-  ]), v = b(
-    async (n, s) => {
-      const t = await u.rest.getNotifications(n, s);
-      y(t.oldestReceived), D(t.couldLoadMore), S(t.notifications);
+    D
+  ]), O = A(
+    async (i, r) => {
+      const t = await u.rest.getNotifications(i, r);
+      m(t.oldestReceived), P(t.couldLoadMore), S(t.notifications);
     },
     [S, u.rest]
-  ), 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))) {
+  ), v = y(b), C = y(h), x = y(g);
+  U(() => {
+    v.current = b, C.current = h, x.current = g;
+  }, [b, h, g]);
+  const k = A(
+    async (i) => {
+      if (!(!i && (!v.current || C.current))) {
         l(!0);
         try {
-          await v(
-            n ? (/* @__PURE__ */ new Date()).toISOString() : x.current,
-            n ? r.initialLoadMaxCount : 1e3
+          await O(
+            i ? (/* @__PURE__ */ new Date()).toISOString() : x.current,
+            i ? c.initialLoadMaxCount : 1e3
           );
         } finally {
           l(!1);
         }
       }
     },
-    [r.initialLoadMaxCount, v]
-  ), $ = async (n) => {
+    [c.initialLoadMaxCount, O]
+  ), R = async (i) => {
     if (!a)
       return;
-    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)
+    const r = (/* @__PURE__ */ new Date()).toISOString(), t = a.filter((o) => i.includes(o.id) && !o.clicked).map((o) => o.id);
+    u.updateInAppNotifications({ ids: t, clicked: !0 }), f((o) => {
+      if (!o)
         return [];
-      const d = [...i];
+      const d = [...o];
       return d.filter((I) => t.includes(I.id)).forEach((I) => {
-        I.clicked = s;
+        I.clicked = r;
       }), d;
     });
-  }, E = async () => {
+  }, $ = async () => {
     if (!a)
       return;
-    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,
+    const i = (/* @__PURE__ */ new Date()).toISOString(), r = a.filter((t) => !t.opened || !t.seen).map((t) => t.id);
+    r.length !== 0 && (u.updateInAppNotifications({
+      ids: r,
       opened: !0
     }), f((t) => {
       if (!t)
         return [];
-      const i = [...t];
-      return i.filter((d) => s.includes(d.id)).forEach((d) => {
-        d.opened = n, d.seen = !0;
-      }), i;
+      const o = [...t];
+      return o.filter((d) => r.includes(d.id)).forEach((d) => {
+        d.opened = i, d.seen = !0;
+      }), o;
     }));
-  }, j = async (n) => {
+  }, j = async (i) => {
     if (!a)
       return;
-    const s = a.filter((t) => t.archived && (n === "ALL" || n.includes(t.id))).map((t) => t.id);
-    s.length !== 0 && (u.updateInAppNotifications({
-      ids: s,
+    const r = a.filter((t) => t.archived && (i === "ALL" || i.includes(t.id))).map((t) => t.id);
+    r.length !== 0 && (u.updateInAppNotifications({
+      ids: r,
       archived: !1
     }), f((t) => {
       if (!t)
         return [];
-      const i = [...t];
-      return i.filter((d) => s.includes(d.id)).forEach((d) => {
+      const o = [...t];
+      return o.filter((d) => r.includes(d.id)).forEach((d) => {
         d.archived = void 0;
-      }), i;
+      }), o;
     }));
-  }, T = async (n) => {
+  }, T = async (i) => {
     if (!a)
       return;
-    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)
+    const r = (/* @__PURE__ */ new Date()).toISOString(), t = a.filter((o) => !o.archived && (i === "ALL" || i.includes(o.id))).map((o) => o.id);
+    t.length !== 0 && (u.updateInAppNotifications({ ids: t, archived: !0 }), f((o) => {
+      if (!o)
         return [];
-      const d = [...i];
+      const d = [...o];
       return d.filter((I) => t.includes(I.id)).forEach((I) => {
-        I.archived = s;
+        I.archived = r;
       }), d;
     }));
-  }, W = (n, s, t, i) => L([
+  }, W = (i, r, t, o) => L([
     {
-      notificationId: n,
-      channel: s,
+      notificationId: i,
+      channel: r,
       delivery: t,
-      subNotificationId: i
+      subNotificationId: o
     }
-  ]), L = (n) => {
-    u.rest.postPreferences(n).then(() => {
-      u.getPreferences().then((s) => {
-        p(s);
+  ]), L = (i) => {
+    u.rest.postPreferences(i).then(() => {
+      u.getPreferences().then((r) => {
+        p(r);
       });
     });
   };
-  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(() => {
+    f([]), l(!1), p(void 0), m((/* @__PURE__ */ new Date()).toISOString()), P(!0), k(!0), u.openWebSocket(), u.getPreferences().then((i) => {
+      p(i);
     });
   }, [u, k]);
   const H = {
     notifications: a,
     preferences: w,
     loadNotifications: k,
-    markAsOpened: E,
+    markAsOpened: $,
     markAsArchived: T,
     markAsUnarchived: j,
-    markAsClicked: $,
+    markAsClicked: R,
     updateDelivery: W,
-    updateDeliveries: L
+    updateDeliveries: L,
+    getClient: () => u
   };
-  return /* @__PURE__ */ B(R.Provider, { value: H, children: e.children });
+  return /* @__PURE__ */ B(E.Provider, { value: H, children: e.children });
 }, K = () => {
-  const e = J(R);
+  const e = G(E);
   if (!e)
     throw new Error("useMyContext must be used within a MyProvider");
   return e;
 };
 q.useNotificationAPIContext = K;
 export {
-  R as NotificationAPIContext,
+  E as NotificationAPIContext,
   q as NotificationAPIProvider
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@notificationapi/react",
   "private": false,
-  "version": "0.0.28",
+  "version": "0.0.30",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -27,8 +27,8 @@
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "prettier": "^3.3.3",
     "glob": "^10.4.1",
+    "prettier": "^3.3.3",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vite-plugin-dts": "^3.9.1",
@@ -43,7 +43,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@notificationapi/core": "^0.0.8",
+    "@notificationapi/core": "^0.0.10",
     "antd": "^5.17.4",
     "javascript-time-ago": "^2.5.10",
     "liquidjs": "^10.14.0",