@novu/react 3.11.0 → 3.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/hooks/NovuProvider.cjs +1 -1
- package/dist/cjs/hooks/useCounts.cjs +2 -2
- package/dist/cjs/hooks/useCounts.cjs.map +1 -1
- package/dist/cjs/hooks/useNotifications.cjs +57 -60
- package/dist/cjs/hooks/useNotifications.cjs.map +1 -1
- package/dist/cjs/internal/index.d.cts +0 -1
- package/dist/cjs/themes/index.d.cts +1 -0
- package/dist/esm/hooks/NovuProvider.js +1 -1
- package/dist/esm/hooks/useCounts.js +3 -3
- package/dist/esm/hooks/useCounts.js.map +1 -1
- package/dist/esm/hooks/useNotifications.js +58 -61
- package/dist/esm/hooks/useNotifications.js.map +1 -1
- package/package.json +11 -11
|
@@ -30,7 +30,7 @@ var import_js = require("@novu/js");
|
|
|
30
30
|
var import_internal = require("@novu/js/internal");
|
|
31
31
|
var import_react = require("react");
|
|
32
32
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
|
-
var version = "3.11.
|
|
33
|
+
var version = "3.11.1";
|
|
34
34
|
var name = "@novu/react";
|
|
35
35
|
var baseUserAgent = `${name}@${version}`;
|
|
36
36
|
var NovuContext = (0, import_react.createContext)(void 0);
|
|
@@ -25,17 +25,17 @@ __export(useCounts_exports, {
|
|
|
25
25
|
module.exports = __toCommonJS(useCounts_exports);
|
|
26
26
|
var import_js = require("@novu/js");
|
|
27
27
|
var import_react = require("react");
|
|
28
|
+
var import_useDataRef = require("./internal/useDataRef.cjs");
|
|
28
29
|
var import_useWebsocketEvent = require("./internal/useWebsocketEvent.cjs");
|
|
29
30
|
var import_NovuProvider = require("./NovuProvider.cjs");
|
|
30
31
|
var useCounts = (props) => {
|
|
31
32
|
const { filters, onSuccess, onError } = props;
|
|
32
33
|
const { notifications } = (0, import_NovuProvider.useNovu)();
|
|
33
|
-
const filtersRef = (0,
|
|
34
|
+
const filtersRef = (0, import_useDataRef.useDataRef)(filters);
|
|
34
35
|
const [error, setError] = (0, import_react.useState)();
|
|
35
36
|
const [counts, setCounts] = (0, import_react.useState)();
|
|
36
37
|
const [isLoading, setIsLoading] = (0, import_react.useState)(true);
|
|
37
38
|
const [isFetching, setIsFetching] = (0, import_react.useState)(false);
|
|
38
|
-
filtersRef.current = filters;
|
|
39
39
|
const sync = async (notification, overrideFilters) => {
|
|
40
40
|
const currentFilters = overrideFilters || filtersRef.current;
|
|
41
41
|
const existingCounts = currentFilters.map((filter) => ({ count: 0, filter }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/hooks/useCounts.ts"],"sourcesContent":["import { areTagsEqual, isSameFilter, Notification, NotificationFilter, NovuError } from '@novu/js';\nimport { useEffect,
|
|
1
|
+
{"version":3,"sources":["../../../src/hooks/useCounts.ts"],"sourcesContent":["import { areTagsEqual, isSameFilter, Notification, NotificationFilter, NovuError } from '@novu/js';\nimport { useEffect, useState } from 'react';\nimport { useDataRef } from './internal/useDataRef';\nimport { useWebSocketEvent } from './internal/useWebsocketEvent';\nimport { useNovu } from './NovuProvider';\n\ntype Count = {\n count: number;\n filter: NotificationFilter;\n};\n\n/**\n * Props for the useCounts hook.\n *\n * @example\n * ```tsx\n * // Count unread notifications\n * const { counts } = useCounts({\n * filters: [{ read: false }]\n * });\n *\n * // Count unseen notifications with specific tags\n * const { counts } = useCounts({\n * filters: [{ seen: false, tags: ['important'] }]\n * });\n *\n * // Count seen but unread notifications\n * const { counts } = useCounts({\n * filters: [{ seen: true, read: false }]\n * });\n * ```\n */\nexport type UseCountsProps = {\n filters: NotificationFilter[];\n onSuccess?: (data: Count[]) => void;\n onError?: (error: NovuError) => void;\n};\n\nexport type UseCountsResult = {\n counts?: Count[];\n error?: NovuError;\n isLoading: boolean; // initial loading\n isFetching: boolean; // the request is in flight\n refetch: () => Promise<void>;\n};\n\nexport const useCounts = (props: UseCountsProps): UseCountsResult => {\n const { filters, onSuccess, onError } = props;\n const { notifications } = useNovu();\n const filtersRef = useDataRef<NotificationFilter[]>(filters);\n const [error, setError] = useState<NovuError>();\n const [counts, setCounts] = useState<Count[]>();\n const [isLoading, setIsLoading] = useState(true);\n const [isFetching, setIsFetching] = useState(false);\n\n const sync = async (notification?: Notification, overrideFilters?: NotificationFilter[]) => {\n const currentFilters = overrideFilters || filtersRef.current;\n const existingCounts = currentFilters.map((filter) => ({ count: 0, filter }));\n let countFiltersToFetch: NotificationFilter[] = [];\n if (notification) {\n for (let i = 0; i < existingCounts.length; i++) {\n const filter = currentFilters[i];\n const isSeverityMatches =\n !filter.severity ||\n (Array.isArray(filter.severity) && filter.severity.length === 0) ||\n (Array.isArray(filter.severity) && filter.severity.includes(notification.severity)) ||\n (!Array.isArray(filter.severity) && filter.severity === notification.severity);\n\n if (areTagsEqual(filter.tags, notification.tags) && isSeverityMatches) {\n countFiltersToFetch.push(filter);\n }\n }\n } else {\n countFiltersToFetch = currentFilters;\n }\n\n if (countFiltersToFetch.length === 0) {\n return;\n }\n\n setIsFetching(true);\n const countsRes = await notifications.count({ filters: countFiltersToFetch });\n setIsFetching(false);\n setIsLoading(false);\n if (countsRes.error) {\n setError(countsRes.error);\n onError?.(countsRes.error);\n\n return;\n }\n const data = countsRes.data!;\n onSuccess?.(data.counts);\n\n setCounts((oldCounts) => {\n const newCounts: Count[] = [];\n const countsReceived = data.counts;\n\n for (let i = 0; i < existingCounts.length; i++) {\n const existingFilter = existingCounts[i].filter;\n const countReceived = countsReceived.find((c) => isSameFilter(c.filter, existingFilter));\n const count = countReceived || oldCounts?.[i];\n if (count) {\n newCounts.push(count);\n }\n }\n\n return newCounts;\n });\n };\n\n useWebSocketEvent({\n event: 'notifications.notification_received',\n eventHandler: (data) => {\n sync(data.result);\n },\n });\n\n useWebSocketEvent({\n event: 'notifications.unread_count_changed',\n eventHandler: () => {\n sync();\n },\n });\n\n useEffect(() => {\n setError(undefined);\n setIsLoading(true);\n setIsFetching(false);\n sync(undefined, filters);\n }, [JSON.stringify(filters)]);\n\n const refetch = async () => {\n await sync();\n };\n\n return { counts, error, refetch, isLoading, isFetching };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAwF;AACxF,mBAAoC;AACpC,wBAA2B;AAC3B,+BAAkC;AAClC,0BAAwB;AA0CjB,IAAM,YAAY,CAAC,UAA2C;AACnE,QAAM,EAAE,SAAS,WAAW,QAAQ,IAAI;AACxC,QAAM,EAAE,cAAc,QAAI,6BAAQ;AAClC,QAAM,iBAAa,8BAAiC,OAAO;AAC3D,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAoB;AAC9C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB;AAC9C,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,IAAI;AAC/C,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAElD,QAAM,OAAO,OAAO,cAA6B,oBAA2C;AAC1F,UAAM,iBAAiB,mBAAmB,WAAW;AACrD,UAAM,iBAAiB,eAAe,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,OAAO,EAAE;AAC5E,QAAI,sBAA4C,CAAC;AACjD,QAAI,cAAc;AAChB,eAAS,IAAI,GAAG,IAAI,eAAe,QAAQ,KAAK;AAC9C,cAAM,SAAS,eAAe,CAAC;AAC/B,cAAM,oBACJ,CAAC,OAAO,YACP,MAAM,QAAQ,OAAO,QAAQ,KAAK,OAAO,SAAS,WAAW,KAC7D,MAAM,QAAQ,OAAO,QAAQ,KAAK,OAAO,SAAS,SAAS,aAAa,QAAQ,KAChF,CAAC,MAAM,QAAQ,OAAO,QAAQ,KAAK,OAAO,aAAa,aAAa;AAEvE,gBAAI,wBAAa,OAAO,MAAM,aAAa,IAAI,KAAK,mBAAmB;AACrE,8BAAoB,KAAK,MAAM;AAAA,QACjC;AAAA,MACF;AAAA,IACF,OAAO;AACL,4BAAsB;AAAA,IACxB;AAEA,QAAI,oBAAoB,WAAW,GAAG;AACpC;AAAA,IACF;AAEA,kBAAc,IAAI;AAClB,UAAM,YAAY,MAAM,cAAc,MAAM,EAAE,SAAS,oBAAoB,CAAC;AAC5E,kBAAc,KAAK;AACnB,iBAAa,KAAK;AAClB,QAAI,UAAU,OAAO;AACnB,eAAS,UAAU,KAAK;AACxB,yCAAU,UAAU;AAEpB;AAAA,IACF;AACA,UAAM,OAAO,UAAU;AACvB,2CAAY,KAAK;AAEjB,cAAU,CAAC,cAAc;AACvB,YAAM,YAAqB,CAAC;AAC5B,YAAM,iBAAiB,KAAK;AAE5B,eAAS,IAAI,GAAG,IAAI,eAAe,QAAQ,KAAK;AAC9C,cAAM,iBAAiB,eAAe,CAAC,EAAE;AACzC,cAAM,gBAAgB,eAAe,KAAK,CAAC,UAAM,wBAAa,EAAE,QAAQ,cAAc,CAAC;AACvF,cAAM,QAAQ,kBAAiB,uCAAY;AAC3C,YAAI,OAAO;AACT,oBAAU,KAAK,KAAK;AAAA,QACtB;AAAA,MACF;AAEA,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AAEA,kDAAkB;AAAA,IAChB,OAAO;AAAA,IACP,cAAc,CAAC,SAAS;AACtB,WAAK,KAAK,MAAM;AAAA,IAClB;AAAA,EACF,CAAC;AAED,kDAAkB;AAAA,IAChB,OAAO;AAAA,IACP,cAAc,MAAM;AAClB,WAAK;AAAA,IACP;AAAA,EACF,CAAC;AAED,8BAAU,MAAM;AACd,aAAS,MAAS;AAClB,iBAAa,IAAI;AACjB,kBAAc,KAAK;AACnB,SAAK,QAAW,OAAO;AAAA,EACzB,GAAG,CAAC,KAAK,UAAU,OAAO,CAAC,CAAC;AAE5B,QAAM,UAAU,YAAY;AAC1B,UAAM,KAAK;AAAA,EACb;AAEA,SAAO,EAAE,QAAQ,OAAO,SAAS,WAAW,WAAW;AACzD;","names":[]}
|
|
@@ -25,6 +25,7 @@ __export(useNotifications_exports, {
|
|
|
25
25
|
module.exports = __toCommonJS(useNotifications_exports);
|
|
26
26
|
var import_js = require("@novu/js");
|
|
27
27
|
var import_react = require("react");
|
|
28
|
+
var import_useDataRef = require("./internal/useDataRef.cjs");
|
|
28
29
|
var import_useWebsocketEvent = require("./internal/useWebsocketEvent.cjs");
|
|
29
30
|
var import_NovuProvider = require("./NovuProvider.cjs");
|
|
30
31
|
var useNotifications = (props) => {
|
|
@@ -36,16 +37,13 @@ var useNotifications = (props) => {
|
|
|
36
37
|
snoozed = false,
|
|
37
38
|
seen,
|
|
38
39
|
severity,
|
|
39
|
-
limit,
|
|
40
|
+
limit = 10,
|
|
40
41
|
onSuccess,
|
|
41
42
|
onError
|
|
42
43
|
} = props || {};
|
|
43
|
-
const
|
|
44
|
-
const
|
|
45
|
-
const
|
|
46
|
-
() => filterRef.current || { tags, data: dataFilter, severity },
|
|
47
|
-
[tags, dataFilter, severity]
|
|
48
|
-
);
|
|
44
|
+
const limitRef = (0, import_useDataRef.useDataRef)(limit);
|
|
45
|
+
const filterRef = (0, import_useDataRef.useDataRef)({ tags, data: dataFilter, read, archived, snoozed, seen, severity });
|
|
46
|
+
const novu = (0, import_NovuProvider.useNovu)();
|
|
49
47
|
const [data, setData] = (0, import_react.useState)();
|
|
50
48
|
const [error, setError] = (0, import_react.useState)();
|
|
51
49
|
const [isLoading, setIsLoading] = (0, import_react.useState)(true);
|
|
@@ -53,24 +51,31 @@ var useNotifications = (props) => {
|
|
|
53
51
|
const [hasMore, setHasMore] = (0, import_react.useState)(false);
|
|
54
52
|
const length = data == null ? void 0 : data.length;
|
|
55
53
|
const after = length ? data[length - 1].id : void 0;
|
|
56
|
-
(0,
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
}
|
|
67
|
-
|
|
54
|
+
const afterRef = (0, import_useDataRef.useDataRef)(after);
|
|
55
|
+
(0, import_react.useEffect)(() => {
|
|
56
|
+
const listener = ({
|
|
57
|
+
data: data2
|
|
58
|
+
}) => {
|
|
59
|
+
if (!data2 || !(0, import_js.isSameFilter)(filterRef.current, data2.filter)) {
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
setData(data2.notifications);
|
|
63
|
+
setHasMore(data2.hasMore);
|
|
64
|
+
};
|
|
65
|
+
const cleanup = novu.on("notifications.list.updated", listener);
|
|
66
|
+
return () => {
|
|
67
|
+
cleanup();
|
|
68
|
+
};
|
|
69
|
+
}, [filterRef, novu]);
|
|
68
70
|
(0, import_useWebsocketEvent.useWebSocketEvent)({
|
|
69
71
|
event: "notifications.notification_received",
|
|
70
72
|
eventHandler: ({ result: notification }) => {
|
|
71
|
-
const currentFilter =
|
|
73
|
+
const currentFilter = filterRef.current;
|
|
72
74
|
const matches = (0, import_js.checkNotificationMatchesFilter)(notification, currentFilter);
|
|
73
|
-
if (matches)
|
|
75
|
+
if (matches) {
|
|
76
|
+
const cacheKey = { ...currentFilter, limit: limitRef.current };
|
|
77
|
+
novu.notifications.cache.unshift(cacheKey, notification);
|
|
78
|
+
}
|
|
74
79
|
}
|
|
75
80
|
});
|
|
76
81
|
const fetchNotifications = (0, import_react.useCallback)(
|
|
@@ -81,59 +86,51 @@ var useNotifications = (props) => {
|
|
|
81
86
|
setIsFetching(false);
|
|
82
87
|
}
|
|
83
88
|
setIsFetching(true);
|
|
84
|
-
const
|
|
85
|
-
|
|
86
|
-
...currentFilter,
|
|
89
|
+
const response = await novu.notifications.list({
|
|
90
|
+
...filterRef.current,
|
|
87
91
|
limit,
|
|
88
|
-
after: (options == null ? void 0 : options.refetch) ? void 0 :
|
|
92
|
+
after: (options == null ? void 0 : options.refetch) ? void 0 : afterRef.current
|
|
89
93
|
});
|
|
90
94
|
if (response.error) {
|
|
91
95
|
setError(response.error);
|
|
92
96
|
onError == null ? void 0 : onError(response.error);
|
|
97
|
+
setIsLoading(false);
|
|
98
|
+
setIsFetching(false);
|
|
93
99
|
} else if (response.data) {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
100
|
+
const responseData = response.data;
|
|
101
|
+
onSuccess == null ? void 0 : onSuccess(responseData.notifications);
|
|
102
|
+
setData(responseData.notifications);
|
|
103
|
+
setHasMore(responseData.hasMore);
|
|
104
|
+
setIsLoading(false);
|
|
105
|
+
setIsFetching(false);
|
|
97
106
|
}
|
|
98
|
-
setIsLoading(false);
|
|
99
|
-
setIsFetching(false);
|
|
100
107
|
},
|
|
101
|
-
[
|
|
108
|
+
[novu, filterRef, afterRef, limit, onError, onSuccess]
|
|
102
109
|
);
|
|
103
110
|
(0, import_react.useEffect)(() => {
|
|
104
|
-
|
|
105
|
-
if (filterRef.current && (0, import_js.isSameFilter)(filterRef.current, newFilter)) {
|
|
106
|
-
return;
|
|
107
|
-
}
|
|
108
|
-
notifications.clearCache({ filter: filterRef.current });
|
|
109
|
-
filterRef.current = newFilter;
|
|
111
|
+
novu.notifications.clearCache({ filter: filterRef.current });
|
|
110
112
|
fetchNotifications({ refetch: true });
|
|
111
|
-
}, [
|
|
112
|
-
const refetch = () => {
|
|
113
|
-
|
|
114
|
-
notifications.clearCache({ filter });
|
|
113
|
+
}, [filterRef, novu, JSON.stringify(filterRef.current), fetchNotifications]);
|
|
114
|
+
const refetch = (0, import_react.useCallback)(() => {
|
|
115
|
+
novu.notifications.clearCache({ filter: filterRef.current });
|
|
115
116
|
return fetchNotifications({ refetch: true });
|
|
116
|
-
};
|
|
117
|
-
const fetchMore = async () => {
|
|
117
|
+
}, [filterRef, novu, fetchNotifications]);
|
|
118
|
+
const fetchMore = (0, import_react.useCallback)(async () => {
|
|
118
119
|
if (!hasMore || isFetching) return;
|
|
119
120
|
return fetchNotifications();
|
|
120
|
-
};
|
|
121
|
-
const readAll = async () => {
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
return await notifications.
|
|
132
|
-
};
|
|
133
|
-
const archiveAllRead = async () => {
|
|
134
|
-
const { tags: tags2, data: data2 } = getCurrentFilter();
|
|
135
|
-
return await notifications.archiveAllRead({ tags: tags2, data: data2 });
|
|
136
|
-
};
|
|
121
|
+
}, [hasMore, isFetching, fetchNotifications]);
|
|
122
|
+
const readAll = (0, import_react.useCallback)(async () => {
|
|
123
|
+
return await novu.notifications.readAll({ tags: filterRef.current.tags, data: filterRef.current.data });
|
|
124
|
+
}, [filterRef, novu]);
|
|
125
|
+
const seenAll = (0, import_react.useCallback)(async () => {
|
|
126
|
+
return await novu.notifications.seenAll({ tags: filterRef.current.tags, data: filterRef.current.data });
|
|
127
|
+
}, [filterRef, novu]);
|
|
128
|
+
const archiveAll = (0, import_react.useCallback)(async () => {
|
|
129
|
+
return await novu.notifications.archiveAll({ tags: filterRef.current.tags, data: filterRef.current.data });
|
|
130
|
+
}, [filterRef, novu]);
|
|
131
|
+
const archiveAllRead = (0, import_react.useCallback)(async () => {
|
|
132
|
+
return await novu.notifications.archiveAllRead({ tags: filterRef.current.tags, data: filterRef.current.data });
|
|
133
|
+
}, [filterRef, novu]);
|
|
137
134
|
return {
|
|
138
135
|
readAll,
|
|
139
136
|
seenAll,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/hooks/useNotifications.ts"],"sourcesContent":["import { checkNotificationMatchesFilter, isSameFilter, Notification, NotificationFilter, NovuError } from '@novu/js';\nimport { useCallback, useEffect,
|
|
1
|
+
{"version":3,"sources":["../../../src/hooks/useNotifications.ts"],"sourcesContent":["import { checkNotificationMatchesFilter, isSameFilter, Notification, NotificationFilter, NovuError } from '@novu/js';\nimport { useCallback, useEffect, useState } from 'react';\nimport { useDataRef } from './internal/useDataRef';\nimport { useWebSocketEvent } from './internal/useWebsocketEvent';\nimport { useNovu } from './NovuProvider';\n\n/**\n * Props for the useNotifications hook.\n *\n * @example\n * ```tsx\n * // Get unread notifications\n * const { notifications } = useNotifications({\n * read: false\n * });\n *\n * // Get unseen notifications with specific tags\n * const { notifications } = useNotifications({\n * seen: false,\n * tags: ['important']\n * });\n *\n * // Get notifications (auto-updates in real time when new notifications arrive)\n * const { notifications } = useNotifications({\n * read: false\n * });\n * ```\n */\nexport type UseNotificationsProps = {\n tags?: NotificationFilter['tags'];\n data?: NotificationFilter['data'];\n read?: NotificationFilter['read'];\n archived?: NotificationFilter['archived'];\n snoozed?: NotificationFilter['snoozed'];\n seen?: NotificationFilter['seen'];\n severity?: NotificationFilter['severity'];\n limit?: number;\n onSuccess?: (data: Notification[]) => void;\n onError?: (error: NovuError) => void;\n};\n\nexport type UseNotificationsResult = {\n notifications?: Notification[];\n error?: NovuError;\n isLoading: boolean;\n isFetching: boolean;\n hasMore: boolean;\n readAll: () => Promise<{\n data?: void | undefined;\n error?: NovuError | undefined;\n }>;\n seenAll: () => Promise<{\n data?: void | undefined;\n error?: NovuError | undefined;\n }>;\n archiveAll: () => Promise<{\n data?: void | undefined;\n error?: NovuError | undefined;\n }>;\n archiveAllRead: () => Promise<{\n data?: void | undefined;\n error?: NovuError | undefined;\n }>;\n refetch: () => Promise<void>;\n fetchMore: () => Promise<void>;\n};\n\nexport const useNotifications = (props?: UseNotificationsProps): UseNotificationsResult => {\n const {\n tags,\n data: dataFilter,\n read,\n archived = false,\n snoozed = false,\n seen,\n severity,\n limit = 10,\n onSuccess,\n onError,\n } = props || {};\n const limitRef = useDataRef<number | undefined>(limit);\n const filterRef = useDataRef<NotificationFilter>({ tags, data: dataFilter, read, archived, snoozed, seen, severity });\n const novu = useNovu();\n const [data, setData] = useState<Array<Notification>>();\n const [error, setError] = useState<NovuError>();\n const [isLoading, setIsLoading] = useState(true);\n const [isFetching, setIsFetching] = useState(false);\n const [hasMore, setHasMore] = useState(false);\n const length = data?.length;\n const after = length ? data[length - 1].id : undefined;\n const afterRef = useDataRef<string | undefined>(after);\n\n useEffect(() => {\n const listener = ({\n data,\n }: {\n data: { notifications: Notification[]; hasMore: boolean; filter: NotificationFilter };\n }) => {\n if (!data || !isSameFilter(filterRef.current, data.filter)) {\n return;\n }\n\n // the event is called with the list of all notifications cached matching the current filter\n setData(data.notifications);\n setHasMore(data.hasMore);\n };\n\n const cleanup = novu.on('notifications.list.updated', listener);\n\n return () => {\n cleanup();\n };\n }, [filterRef, novu]);\n\n useWebSocketEvent({\n event: 'notifications.notification_received',\n eventHandler: ({ result: notification }) => {\n const currentFilter = filterRef.current;\n const matches = checkNotificationMatchesFilter(notification, currentFilter);\n if (matches) {\n // the limit and after props are used to create a cache key\n // the first batch of notifications in the cache doesn't include the after prop and we want to push to the first batch\n const cacheKey = { ...currentFilter, limit: limitRef.current };\n novu.notifications.cache.unshift(cacheKey, notification);\n }\n },\n });\n\n const fetchNotifications = useCallback(\n async (options?: { refetch: boolean }) => {\n if (options?.refetch) {\n setError(undefined);\n setIsLoading(true);\n setIsFetching(false);\n }\n setIsFetching(true);\n\n const response = await novu.notifications.list({\n ...filterRef.current,\n limit,\n after: options?.refetch ? undefined : afterRef.current,\n });\n\n if (response.error) {\n setError(response.error);\n onError?.(response.error);\n setIsLoading(false);\n setIsFetching(false);\n } else if (response.data) {\n const responseData = response.data;\n onSuccess?.(responseData.notifications);\n setData(responseData.notifications);\n setHasMore(responseData.hasMore);\n setIsLoading(false);\n setIsFetching(false);\n }\n },\n [novu, filterRef, afterRef, limit, onError, onSuccess]\n );\n\n useEffect(() => {\n novu.notifications.clearCache({ filter: filterRef.current });\n fetchNotifications({ refetch: true });\n }, [filterRef, novu, JSON.stringify(filterRef.current), fetchNotifications]);\n\n const refetch = useCallback(() => {\n novu.notifications.clearCache({ filter: filterRef.current });\n return fetchNotifications({ refetch: true });\n }, [filterRef, novu, fetchNotifications]);\n\n const fetchMore = useCallback(async () => {\n if (!hasMore || isFetching) return;\n\n return fetchNotifications();\n }, [hasMore, isFetching, fetchNotifications]);\n\n const readAll = useCallback(async () => {\n return await novu.notifications.readAll({ tags: filterRef.current.tags, data: filterRef.current.data });\n }, [filterRef, novu]);\n\n const seenAll = useCallback(async () => {\n return await novu.notifications.seenAll({ tags: filterRef.current.tags, data: filterRef.current.data });\n }, [filterRef, novu]);\n\n const archiveAll = useCallback(async () => {\n return await novu.notifications.archiveAll({ tags: filterRef.current.tags, data: filterRef.current.data });\n }, [filterRef, novu]);\n\n const archiveAllRead = useCallback(async () => {\n return await novu.notifications.archiveAllRead({ tags: filterRef.current.tags, data: filterRef.current.data });\n }, [filterRef, novu]);\n\n return {\n readAll,\n seenAll,\n archiveAll,\n archiveAllRead,\n notifications: data,\n error,\n isLoading,\n isFetching,\n refetch,\n fetchMore,\n hasMore,\n };\n};\n"],"mappings":"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","names":["data"]}
|
|
@@ -3,7 +3,7 @@ import { Novu } from "@novu/js";
|
|
|
3
3
|
import { buildSubscriber } from "@novu/js/internal";
|
|
4
4
|
import { createContext, useContext, useEffect, useMemo } from "react";
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
6
|
-
var version = "3.11.
|
|
6
|
+
var version = "3.11.1";
|
|
7
7
|
var name = "@novu/react";
|
|
8
8
|
var baseUserAgent = `${name}@${version}`;
|
|
9
9
|
var NovuContext = createContext(void 0);
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
// src/hooks/useCounts.ts
|
|
2
2
|
import { areTagsEqual, isSameFilter } from "@novu/js";
|
|
3
|
-
import { useEffect,
|
|
3
|
+
import { useEffect, useState } from "react";
|
|
4
|
+
import { useDataRef } from "./internal/useDataRef.js";
|
|
4
5
|
import { useWebSocketEvent } from "./internal/useWebsocketEvent.js";
|
|
5
6
|
import { useNovu } from "./NovuProvider.js";
|
|
6
7
|
var useCounts = (props) => {
|
|
7
8
|
const { filters, onSuccess, onError } = props;
|
|
8
9
|
const { notifications } = useNovu();
|
|
9
|
-
const filtersRef =
|
|
10
|
+
const filtersRef = useDataRef(filters);
|
|
10
11
|
const [error, setError] = useState();
|
|
11
12
|
const [counts, setCounts] = useState();
|
|
12
13
|
const [isLoading, setIsLoading] = useState(true);
|
|
13
14
|
const [isFetching, setIsFetching] = useState(false);
|
|
14
|
-
filtersRef.current = filters;
|
|
15
15
|
const sync = async (notification, overrideFilters) => {
|
|
16
16
|
const currentFilters = overrideFilters || filtersRef.current;
|
|
17
17
|
const existingCounts = currentFilters.map((filter) => ({ count: 0, filter }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/hooks/useCounts.ts"],"sourcesContent":["import { areTagsEqual, isSameFilter, Notification, NotificationFilter, NovuError } from '@novu/js';\nimport { useEffect,
|
|
1
|
+
{"version":3,"sources":["../../../src/hooks/useCounts.ts"],"sourcesContent":["import { areTagsEqual, isSameFilter, Notification, NotificationFilter, NovuError } from '@novu/js';\nimport { useEffect, useState } from 'react';\nimport { useDataRef } from './internal/useDataRef';\nimport { useWebSocketEvent } from './internal/useWebsocketEvent';\nimport { useNovu } from './NovuProvider';\n\ntype Count = {\n count: number;\n filter: NotificationFilter;\n};\n\n/**\n * Props for the useCounts hook.\n *\n * @example\n * ```tsx\n * // Count unread notifications\n * const { counts } = useCounts({\n * filters: [{ read: false }]\n * });\n *\n * // Count unseen notifications with specific tags\n * const { counts } = useCounts({\n * filters: [{ seen: false, tags: ['important'] }]\n * });\n *\n * // Count seen but unread notifications\n * const { counts } = useCounts({\n * filters: [{ seen: true, read: false }]\n * });\n * ```\n */\nexport type UseCountsProps = {\n filters: NotificationFilter[];\n onSuccess?: (data: Count[]) => void;\n onError?: (error: NovuError) => void;\n};\n\nexport type UseCountsResult = {\n counts?: Count[];\n error?: NovuError;\n isLoading: boolean; // initial loading\n isFetching: boolean; // the request is in flight\n refetch: () => Promise<void>;\n};\n\nexport const useCounts = (props: UseCountsProps): UseCountsResult => {\n const { filters, onSuccess, onError } = props;\n const { notifications } = useNovu();\n const filtersRef = useDataRef<NotificationFilter[]>(filters);\n const [error, setError] = useState<NovuError>();\n const [counts, setCounts] = useState<Count[]>();\n const [isLoading, setIsLoading] = useState(true);\n const [isFetching, setIsFetching] = useState(false);\n\n const sync = async (notification?: Notification, overrideFilters?: NotificationFilter[]) => {\n const currentFilters = overrideFilters || filtersRef.current;\n const existingCounts = currentFilters.map((filter) => ({ count: 0, filter }));\n let countFiltersToFetch: NotificationFilter[] = [];\n if (notification) {\n for (let i = 0; i < existingCounts.length; i++) {\n const filter = currentFilters[i];\n const isSeverityMatches =\n !filter.severity ||\n (Array.isArray(filter.severity) && filter.severity.length === 0) ||\n (Array.isArray(filter.severity) && filter.severity.includes(notification.severity)) ||\n (!Array.isArray(filter.severity) && filter.severity === notification.severity);\n\n if (areTagsEqual(filter.tags, notification.tags) && isSeverityMatches) {\n countFiltersToFetch.push(filter);\n }\n }\n } else {\n countFiltersToFetch = currentFilters;\n }\n\n if (countFiltersToFetch.length === 0) {\n return;\n }\n\n setIsFetching(true);\n const countsRes = await notifications.count({ filters: countFiltersToFetch });\n setIsFetching(false);\n setIsLoading(false);\n if (countsRes.error) {\n setError(countsRes.error);\n onError?.(countsRes.error);\n\n return;\n }\n const data = countsRes.data!;\n onSuccess?.(data.counts);\n\n setCounts((oldCounts) => {\n const newCounts: Count[] = [];\n const countsReceived = data.counts;\n\n for (let i = 0; i < existingCounts.length; i++) {\n const existingFilter = existingCounts[i].filter;\n const countReceived = countsReceived.find((c) => isSameFilter(c.filter, existingFilter));\n const count = countReceived || oldCounts?.[i];\n if (count) {\n newCounts.push(count);\n }\n }\n\n return newCounts;\n });\n };\n\n useWebSocketEvent({\n event: 'notifications.notification_received',\n eventHandler: (data) => {\n sync(data.result);\n },\n });\n\n useWebSocketEvent({\n event: 'notifications.unread_count_changed',\n eventHandler: () => {\n sync();\n },\n });\n\n useEffect(() => {\n setError(undefined);\n setIsLoading(true);\n setIsFetching(false);\n sync(undefined, filters);\n }, [JSON.stringify(filters)]);\n\n const refetch = async () => {\n await sync();\n };\n\n return { counts, error, refetch, isLoading, isFetching };\n};\n"],"mappings":";AAAA,SAAS,cAAc,oBAAiE;AACxF,SAAS,WAAW,gBAAgB;AACpC,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAClC,SAAS,eAAe;AA0CjB,IAAM,YAAY,CAAC,UAA2C;AACnE,QAAM,EAAE,SAAS,WAAW,QAAQ,IAAI;AACxC,QAAM,EAAE,cAAc,IAAI,QAAQ;AAClC,QAAM,aAAa,WAAiC,OAAO;AAC3D,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAoB;AAC9C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAkB;AAC9C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,IAAI;AAC/C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAElD,QAAM,OAAO,OAAO,cAA6B,oBAA2C;AAC1F,UAAM,iBAAiB,mBAAmB,WAAW;AACrD,UAAM,iBAAiB,eAAe,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,OAAO,EAAE;AAC5E,QAAI,sBAA4C,CAAC;AACjD,QAAI,cAAc;AAChB,eAAS,IAAI,GAAG,IAAI,eAAe,QAAQ,KAAK;AAC9C,cAAM,SAAS,eAAe,CAAC;AAC/B,cAAM,oBACJ,CAAC,OAAO,YACP,MAAM,QAAQ,OAAO,QAAQ,KAAK,OAAO,SAAS,WAAW,KAC7D,MAAM,QAAQ,OAAO,QAAQ,KAAK,OAAO,SAAS,SAAS,aAAa,QAAQ,KAChF,CAAC,MAAM,QAAQ,OAAO,QAAQ,KAAK,OAAO,aAAa,aAAa;AAEvE,YAAI,aAAa,OAAO,MAAM,aAAa,IAAI,KAAK,mBAAmB;AACrE,8BAAoB,KAAK,MAAM;AAAA,QACjC;AAAA,MACF;AAAA,IACF,OAAO;AACL,4BAAsB;AAAA,IACxB;AAEA,QAAI,oBAAoB,WAAW,GAAG;AACpC;AAAA,IACF;AAEA,kBAAc,IAAI;AAClB,UAAM,YAAY,MAAM,cAAc,MAAM,EAAE,SAAS,oBAAoB,CAAC;AAC5E,kBAAc,KAAK;AACnB,iBAAa,KAAK;AAClB,QAAI,UAAU,OAAO;AACnB,eAAS,UAAU,KAAK;AACxB,gBAAU,UAAU,KAAK;AAEzB;AAAA,IACF;AACA,UAAM,OAAO,UAAU;AACvB,gBAAY,KAAK,MAAM;AAEvB,cAAU,CAAC,cAAc;AACvB,YAAM,YAAqB,CAAC;AAC5B,YAAM,iBAAiB,KAAK;AAE5B,eAAS,IAAI,GAAG,IAAI,eAAe,QAAQ,KAAK;AAC9C,cAAM,iBAAiB,eAAe,CAAC,EAAE;AACzC,cAAM,gBAAgB,eAAe,KAAK,CAAC,MAAM,aAAa,EAAE,QAAQ,cAAc,CAAC;AACvF,cAAM,QAAQ,iBAAiB,YAAY,CAAC;AAC5C,YAAI,OAAO;AACT,oBAAU,KAAK,KAAK;AAAA,QACtB;AAAA,MACF;AAEA,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AAEA,oBAAkB;AAAA,IAChB,OAAO;AAAA,IACP,cAAc,CAAC,SAAS;AACtB,WAAK,KAAK,MAAM;AAAA,IAClB;AAAA,EACF,CAAC;AAED,oBAAkB;AAAA,IAChB,OAAO;AAAA,IACP,cAAc,MAAM;AAClB,WAAK;AAAA,IACP;AAAA,EACF,CAAC;AAED,YAAU,MAAM;AACd,aAAS,MAAS;AAClB,iBAAa,IAAI;AACjB,kBAAc,KAAK;AACnB,SAAK,QAAW,OAAO;AAAA,EACzB,GAAG,CAAC,KAAK,UAAU,OAAO,CAAC,CAAC;AAE5B,QAAM,UAAU,YAAY;AAC1B,UAAM,KAAK;AAAA,EACb;AAEA,SAAO,EAAE,QAAQ,OAAO,SAAS,WAAW,WAAW;AACzD;","names":[]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
// src/hooks/useNotifications.ts
|
|
2
2
|
import { checkNotificationMatchesFilter, isSameFilter } from "@novu/js";
|
|
3
|
-
import { useCallback, useEffect,
|
|
3
|
+
import { useCallback, useEffect, useState } from "react";
|
|
4
|
+
import { useDataRef } from "./internal/useDataRef.js";
|
|
4
5
|
import { useWebSocketEvent } from "./internal/useWebsocketEvent.js";
|
|
5
6
|
import { useNovu } from "./NovuProvider.js";
|
|
6
7
|
var useNotifications = (props) => {
|
|
@@ -12,16 +13,13 @@ var useNotifications = (props) => {
|
|
|
12
13
|
snoozed = false,
|
|
13
14
|
seen,
|
|
14
15
|
severity,
|
|
15
|
-
limit,
|
|
16
|
+
limit = 10,
|
|
16
17
|
onSuccess,
|
|
17
18
|
onError
|
|
18
19
|
} = props || {};
|
|
19
|
-
const
|
|
20
|
-
const {
|
|
21
|
-
const
|
|
22
|
-
() => filterRef.current || { tags, data: dataFilter, severity },
|
|
23
|
-
[tags, dataFilter, severity]
|
|
24
|
-
);
|
|
20
|
+
const limitRef = useDataRef(limit);
|
|
21
|
+
const filterRef = useDataRef({ tags, data: dataFilter, read, archived, snoozed, seen, severity });
|
|
22
|
+
const novu = useNovu();
|
|
25
23
|
const [data, setData] = useState();
|
|
26
24
|
const [error, setError] = useState();
|
|
27
25
|
const [isLoading, setIsLoading] = useState(true);
|
|
@@ -29,24 +27,31 @@ var useNotifications = (props) => {
|
|
|
29
27
|
const [hasMore, setHasMore] = useState(false);
|
|
30
28
|
const length = data?.length;
|
|
31
29
|
const after = length ? data[length - 1].id : void 0;
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
43
|
-
|
|
30
|
+
const afterRef = useDataRef(after);
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
const listener = ({
|
|
33
|
+
data: data2
|
|
34
|
+
}) => {
|
|
35
|
+
if (!data2 || !isSameFilter(filterRef.current, data2.filter)) {
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
setData(data2.notifications);
|
|
39
|
+
setHasMore(data2.hasMore);
|
|
40
|
+
};
|
|
41
|
+
const cleanup = novu.on("notifications.list.updated", listener);
|
|
42
|
+
return () => {
|
|
43
|
+
cleanup();
|
|
44
|
+
};
|
|
45
|
+
}, [filterRef, novu]);
|
|
44
46
|
useWebSocketEvent({
|
|
45
47
|
event: "notifications.notification_received",
|
|
46
48
|
eventHandler: ({ result: notification }) => {
|
|
47
|
-
const currentFilter =
|
|
49
|
+
const currentFilter = filterRef.current;
|
|
48
50
|
const matches = checkNotificationMatchesFilter(notification, currentFilter);
|
|
49
|
-
if (matches)
|
|
51
|
+
if (matches) {
|
|
52
|
+
const cacheKey = { ...currentFilter, limit: limitRef.current };
|
|
53
|
+
novu.notifications.cache.unshift(cacheKey, notification);
|
|
54
|
+
}
|
|
50
55
|
}
|
|
51
56
|
});
|
|
52
57
|
const fetchNotifications = useCallback(
|
|
@@ -57,59 +62,51 @@ var useNotifications = (props) => {
|
|
|
57
62
|
setIsFetching(false);
|
|
58
63
|
}
|
|
59
64
|
setIsFetching(true);
|
|
60
|
-
const
|
|
61
|
-
|
|
62
|
-
...currentFilter,
|
|
65
|
+
const response = await novu.notifications.list({
|
|
66
|
+
...filterRef.current,
|
|
63
67
|
limit,
|
|
64
|
-
after: options?.refetch ? void 0 :
|
|
68
|
+
after: options?.refetch ? void 0 : afterRef.current
|
|
65
69
|
});
|
|
66
70
|
if (response.error) {
|
|
67
71
|
setError(response.error);
|
|
68
72
|
onError?.(response.error);
|
|
73
|
+
setIsLoading(false);
|
|
74
|
+
setIsFetching(false);
|
|
69
75
|
} else if (response.data) {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
76
|
+
const responseData = response.data;
|
|
77
|
+
onSuccess?.(responseData.notifications);
|
|
78
|
+
setData(responseData.notifications);
|
|
79
|
+
setHasMore(responseData.hasMore);
|
|
80
|
+
setIsLoading(false);
|
|
81
|
+
setIsFetching(false);
|
|
73
82
|
}
|
|
74
|
-
setIsLoading(false);
|
|
75
|
-
setIsFetching(false);
|
|
76
83
|
},
|
|
77
|
-
[
|
|
84
|
+
[novu, filterRef, afterRef, limit, onError, onSuccess]
|
|
78
85
|
);
|
|
79
86
|
useEffect(() => {
|
|
80
|
-
|
|
81
|
-
if (filterRef.current && isSameFilter(filterRef.current, newFilter)) {
|
|
82
|
-
return;
|
|
83
|
-
}
|
|
84
|
-
notifications.clearCache({ filter: filterRef.current });
|
|
85
|
-
filterRef.current = newFilter;
|
|
87
|
+
novu.notifications.clearCache({ filter: filterRef.current });
|
|
86
88
|
fetchNotifications({ refetch: true });
|
|
87
|
-
}, [
|
|
88
|
-
const refetch = () => {
|
|
89
|
-
|
|
90
|
-
notifications.clearCache({ filter });
|
|
89
|
+
}, [filterRef, novu, JSON.stringify(filterRef.current), fetchNotifications]);
|
|
90
|
+
const refetch = useCallback(() => {
|
|
91
|
+
novu.notifications.clearCache({ filter: filterRef.current });
|
|
91
92
|
return fetchNotifications({ refetch: true });
|
|
92
|
-
};
|
|
93
|
-
const fetchMore = async () => {
|
|
93
|
+
}, [filterRef, novu, fetchNotifications]);
|
|
94
|
+
const fetchMore = useCallback(async () => {
|
|
94
95
|
if (!hasMore || isFetching) return;
|
|
95
96
|
return fetchNotifications();
|
|
96
|
-
};
|
|
97
|
-
const readAll = async () => {
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
return await notifications.
|
|
108
|
-
};
|
|
109
|
-
const archiveAllRead = async () => {
|
|
110
|
-
const { tags: tags2, data: data2 } = getCurrentFilter();
|
|
111
|
-
return await notifications.archiveAllRead({ tags: tags2, data: data2 });
|
|
112
|
-
};
|
|
97
|
+
}, [hasMore, isFetching, fetchNotifications]);
|
|
98
|
+
const readAll = useCallback(async () => {
|
|
99
|
+
return await novu.notifications.readAll({ tags: filterRef.current.tags, data: filterRef.current.data });
|
|
100
|
+
}, [filterRef, novu]);
|
|
101
|
+
const seenAll = useCallback(async () => {
|
|
102
|
+
return await novu.notifications.seenAll({ tags: filterRef.current.tags, data: filterRef.current.data });
|
|
103
|
+
}, [filterRef, novu]);
|
|
104
|
+
const archiveAll = useCallback(async () => {
|
|
105
|
+
return await novu.notifications.archiveAll({ tags: filterRef.current.tags, data: filterRef.current.data });
|
|
106
|
+
}, [filterRef, novu]);
|
|
107
|
+
const archiveAllRead = useCallback(async () => {
|
|
108
|
+
return await novu.notifications.archiveAllRead({ tags: filterRef.current.tags, data: filterRef.current.data });
|
|
109
|
+
}, [filterRef, novu]);
|
|
113
110
|
return {
|
|
114
111
|
readAll,
|
|
115
112
|
seenAll,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/hooks/useNotifications.ts"],"sourcesContent":["import { checkNotificationMatchesFilter, isSameFilter, Notification, NotificationFilter, NovuError } from '@novu/js';\nimport { useCallback, useEffect,
|
|
1
|
+
{"version":3,"sources":["../../../src/hooks/useNotifications.ts"],"sourcesContent":["import { checkNotificationMatchesFilter, isSameFilter, Notification, NotificationFilter, NovuError } from '@novu/js';\nimport { useCallback, useEffect, useState } from 'react';\nimport { useDataRef } from './internal/useDataRef';\nimport { useWebSocketEvent } from './internal/useWebsocketEvent';\nimport { useNovu } from './NovuProvider';\n\n/**\n * Props for the useNotifications hook.\n *\n * @example\n * ```tsx\n * // Get unread notifications\n * const { notifications } = useNotifications({\n * read: false\n * });\n *\n * // Get unseen notifications with specific tags\n * const { notifications } = useNotifications({\n * seen: false,\n * tags: ['important']\n * });\n *\n * // Get notifications (auto-updates in real time when new notifications arrive)\n * const { notifications } = useNotifications({\n * read: false\n * });\n * ```\n */\nexport type UseNotificationsProps = {\n tags?: NotificationFilter['tags'];\n data?: NotificationFilter['data'];\n read?: NotificationFilter['read'];\n archived?: NotificationFilter['archived'];\n snoozed?: NotificationFilter['snoozed'];\n seen?: NotificationFilter['seen'];\n severity?: NotificationFilter['severity'];\n limit?: number;\n onSuccess?: (data: Notification[]) => void;\n onError?: (error: NovuError) => void;\n};\n\nexport type UseNotificationsResult = {\n notifications?: Notification[];\n error?: NovuError;\n isLoading: boolean;\n isFetching: boolean;\n hasMore: boolean;\n readAll: () => Promise<{\n data?: void | undefined;\n error?: NovuError | undefined;\n }>;\n seenAll: () => Promise<{\n data?: void | undefined;\n error?: NovuError | undefined;\n }>;\n archiveAll: () => Promise<{\n data?: void | undefined;\n error?: NovuError | undefined;\n }>;\n archiveAllRead: () => Promise<{\n data?: void | undefined;\n error?: NovuError | undefined;\n }>;\n refetch: () => Promise<void>;\n fetchMore: () => Promise<void>;\n};\n\nexport const useNotifications = (props?: UseNotificationsProps): UseNotificationsResult => {\n const {\n tags,\n data: dataFilter,\n read,\n archived = false,\n snoozed = false,\n seen,\n severity,\n limit = 10,\n onSuccess,\n onError,\n } = props || {};\n const limitRef = useDataRef<number | undefined>(limit);\n const filterRef = useDataRef<NotificationFilter>({ tags, data: dataFilter, read, archived, snoozed, seen, severity });\n const novu = useNovu();\n const [data, setData] = useState<Array<Notification>>();\n const [error, setError] = useState<NovuError>();\n const [isLoading, setIsLoading] = useState(true);\n const [isFetching, setIsFetching] = useState(false);\n const [hasMore, setHasMore] = useState(false);\n const length = data?.length;\n const after = length ? data[length - 1].id : undefined;\n const afterRef = useDataRef<string | undefined>(after);\n\n useEffect(() => {\n const listener = ({\n data,\n }: {\n data: { notifications: Notification[]; hasMore: boolean; filter: NotificationFilter };\n }) => {\n if (!data || !isSameFilter(filterRef.current, data.filter)) {\n return;\n }\n\n // the event is called with the list of all notifications cached matching the current filter\n setData(data.notifications);\n setHasMore(data.hasMore);\n };\n\n const cleanup = novu.on('notifications.list.updated', listener);\n\n return () => {\n cleanup();\n };\n }, [filterRef, novu]);\n\n useWebSocketEvent({\n event: 'notifications.notification_received',\n eventHandler: ({ result: notification }) => {\n const currentFilter = filterRef.current;\n const matches = checkNotificationMatchesFilter(notification, currentFilter);\n if (matches) {\n // the limit and after props are used to create a cache key\n // the first batch of notifications in the cache doesn't include the after prop and we want to push to the first batch\n const cacheKey = { ...currentFilter, limit: limitRef.current };\n novu.notifications.cache.unshift(cacheKey, notification);\n }\n },\n });\n\n const fetchNotifications = useCallback(\n async (options?: { refetch: boolean }) => {\n if (options?.refetch) {\n setError(undefined);\n setIsLoading(true);\n setIsFetching(false);\n }\n setIsFetching(true);\n\n const response = await novu.notifications.list({\n ...filterRef.current,\n limit,\n after: options?.refetch ? undefined : afterRef.current,\n });\n\n if (response.error) {\n setError(response.error);\n onError?.(response.error);\n setIsLoading(false);\n setIsFetching(false);\n } else if (response.data) {\n const responseData = response.data;\n onSuccess?.(responseData.notifications);\n setData(responseData.notifications);\n setHasMore(responseData.hasMore);\n setIsLoading(false);\n setIsFetching(false);\n }\n },\n [novu, filterRef, afterRef, limit, onError, onSuccess]\n );\n\n useEffect(() => {\n novu.notifications.clearCache({ filter: filterRef.current });\n fetchNotifications({ refetch: true });\n }, [filterRef, novu, JSON.stringify(filterRef.current), fetchNotifications]);\n\n const refetch = useCallback(() => {\n novu.notifications.clearCache({ filter: filterRef.current });\n return fetchNotifications({ refetch: true });\n }, [filterRef, novu, fetchNotifications]);\n\n const fetchMore = useCallback(async () => {\n if (!hasMore || isFetching) return;\n\n return fetchNotifications();\n }, [hasMore, isFetching, fetchNotifications]);\n\n const readAll = useCallback(async () => {\n return await novu.notifications.readAll({ tags: filterRef.current.tags, data: filterRef.current.data });\n }, [filterRef, novu]);\n\n const seenAll = useCallback(async () => {\n return await novu.notifications.seenAll({ tags: filterRef.current.tags, data: filterRef.current.data });\n }, [filterRef, novu]);\n\n const archiveAll = useCallback(async () => {\n return await novu.notifications.archiveAll({ tags: filterRef.current.tags, data: filterRef.current.data });\n }, [filterRef, novu]);\n\n const archiveAllRead = useCallback(async () => {\n return await novu.notifications.archiveAllRead({ tags: filterRef.current.tags, data: filterRef.current.data });\n }, [filterRef, novu]);\n\n return {\n readAll,\n seenAll,\n archiveAll,\n archiveAllRead,\n notifications: data,\n error,\n isLoading,\n isFetching,\n refetch,\n fetchMore,\n hasMore,\n };\n};\n"],"mappings":"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","names":["data"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@novu/react",
|
|
3
|
-
"version": "3.11.
|
|
3
|
+
"version": "3.11.1",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/novuhq/novu",
|
|
@@ -90,6 +90,14 @@
|
|
|
90
90
|
"publishConfig": {
|
|
91
91
|
"access": "public"
|
|
92
92
|
},
|
|
93
|
+
"scripts": {
|
|
94
|
+
"build:watch": "tsup --watch",
|
|
95
|
+
"build": "tsup && pnpm run check-exports",
|
|
96
|
+
"check-exports": "attw --pack .",
|
|
97
|
+
"check": "biome check .",
|
|
98
|
+
"check:fix": "biome check --write .",
|
|
99
|
+
"publish:rc": "pnpm publish --tag rc"
|
|
100
|
+
},
|
|
93
101
|
"browserslist": {
|
|
94
102
|
"production": [
|
|
95
103
|
">0.2%",
|
|
@@ -121,19 +129,11 @@
|
|
|
121
129
|
}
|
|
122
130
|
},
|
|
123
131
|
"dependencies": {
|
|
124
|
-
"@novu/js": "3.11.
|
|
132
|
+
"@novu/js": "3.11.1"
|
|
125
133
|
},
|
|
126
134
|
"nx": {
|
|
127
135
|
"tags": [
|
|
128
136
|
"type:package"
|
|
129
137
|
]
|
|
130
|
-
},
|
|
131
|
-
"scripts": {
|
|
132
|
-
"build:watch": "tsup --watch",
|
|
133
|
-
"build": "tsup && pnpm run check-exports",
|
|
134
|
-
"check-exports": "attw --pack .",
|
|
135
|
-
"check": "biome check .",
|
|
136
|
-
"check:fix": "biome check --write .",
|
|
137
|
-
"publish:rc": "pnpm publish --tag rc"
|
|
138
138
|
}
|
|
139
|
-
}
|
|
139
|
+
}
|