pf-web-notification-library
Version:
A React component library for Firebase push notifications using PrimeReact Toaster
158 lines (157 loc) • 8.74 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.NotificationProvider = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var app_1 = require("firebase/app");
var messaging_1 = require("firebase/messaging");
var toast_1 = require("primereact/toast");
var confirmdialog_1 = require("primereact/confirmdialog");
var checkIfPrevious = function (payload) {
var _a, _b, _c, _d, _e, _f, _g, _h;
var previousNotification = JSON.parse((_a = localStorage.getItem("previousNotification")) !== null && _a !== void 0 ? _a : "{}");
if (previousNotification[(_b = payload === null || payload === void 0 ? void 0 : payload.notification) === null || _b === void 0 ? void 0 : _b.type]) {
if (Number(previousNotification[(_c = payload === null || payload === void 0 ? void 0 : payload.notification) === null || _c === void 0 ? void 0 : _c.type]) !==
Number((_d = payload === null || payload === void 0 ? void 0 : payload.notification) === null || _d === void 0 ? void 0 : _d.notification_id)) {
localStorage.removeItem("previousNotification");
previousNotification[(_e = payload === null || payload === void 0 ? void 0 : payload.notification) === null || _e === void 0 ? void 0 : _e.type] =
(_f = payload === null || payload === void 0 ? void 0 : payload.notification) === null || _f === void 0 ? void 0 : _f.notification_id;
localStorage.setItem("previousNotification", JSON.stringify(previousNotification));
return false;
}
else {
return true;
}
}
else {
previousNotification[(_g = payload === null || payload === void 0 ? void 0 : payload.notification) === null || _g === void 0 ? void 0 : _g.type] =
(_h = payload === null || payload === void 0 ? void 0 : payload.notification) === null || _h === void 0 ? void 0 : _h.notification_id;
localStorage.setItem("previousNotification", JSON.stringify(previousNotification));
return false;
}
};
var NotificationProvider = function (_a) {
var firebaseConfig = _a.firebaseConfig, vapidKey = _a.vapidKey, children = _a.children, saveToken = _a.saveToken, triggerApi = _a.triggerApi, handleClick = _a.handleClick, handleVisibility = _a.handleVisibility, showConfirmationDialog = _a.showConfirmationDialog, className = _a.className;
var toast = (0, react_1.useRef)(null);
var _b = (0, react_1.useState)(""), firebaseToken = _b[0], setFirebaseToken = _b[1];
var _c = (0, react_1.useState)({}), responsePayload = _c[0], setResponsePayload = _c[1];
var _d = (0, react_1.useState)(Notification === null || Notification === void 0 ? void 0 : Notification.permission), notificationPermission = _d[0], setNotificationPermission = _d[1];
// const reject = ()=>{
// //To do find how to handle rejection.
// }
var handleFCMNotification = function () {
var app;
if (!(0, app_1.getApps)().length) {
app = (0, app_1.initializeApp)(firebaseConfig);
}
else {
app = (0, app_1.getApps)()[0];
}
var messaging = (0, messaging_1.getMessaging)(app);
Notification === null || Notification === void 0 ? void 0 : Notification.requestPermission().then(function (permission) {
setNotificationPermission(permission);
if (permission === "granted") {
console.log("Notification permission granted.");
(0, messaging_1.getToken)(messaging, { vapidKey: vapidKey })
.then(function (current_token) {
setFirebaseToken(current_token);
})
.catch(function (err) {
console.log("Token error:", err);
});
(0, messaging_1.onMessage)(messaging, function (payload) {
var _a, _b, _c, _d, _e;
triggerApi(true);
setResponsePayload(payload);
if (checkIfPrevious(payload) === false) {
if (handleVisibility(payload) === true) {
var notificationType = "info";
var message = {
severity: "info",
summary: (_a = payload.notification) === null || _a === void 0 ? void 0 : _a.title,
detail: (_b = payload.notification) === null || _b === void 0 ? void 0 : _b.body,
life: 3000,
};
switch (notificationType) {
case "success":
message.severity = "success";
break;
case "error":
message.severity = "error";
break;
case "warn":
message.severity = "warn";
break;
default:
message.severity = "info";
}
(_c = toast.current) === null || _c === void 0 ? void 0 : _c.show(message);
}
else {
var message = {
severity: "info",
summary: (_d = payload.notification) === null || _d === void 0 ? void 0 : _d.title,
detail: "You have received a new notification!",
life: 3000,
};
(_e = toast.current) === null || _e === void 0 ? void 0 : _e.show(message);
}
}
});
}
else if (permission === "denied") {
handleConfirmationDialog();
}
else {
console.log("Unable to get permission to notify.");
}
}).catch(function (err) {
console.error("An error occurred while retrieving token. ", err);
});
};
var handleConfirmationDialog = function () {
if (typeof showConfirmationDialog === "function" &&
showConfirmationDialog) {
showConfirmationDialog({
message: "Please enable push notification to receive notifications.",
header: "Push notification confirmation",
icon: "pi pi-exclamation-triangle",
defaultFocus: "accept",
acceptLabel: "Allow",
rejectLabel: "Block",
accept: function () { return handleFCMNotification(); },
reject: function () {
console.log("Permission denied");
},
className: className,
});
}
else {
// Create a confirmation dialog with custom buttons and a callback
(0, confirmdialog_1.confirmDialog)({
message: "Please enable push notification to receive notifications.",
header: "Push Notification confirmation",
icon: "pi pi-exclamation-triangle",
defaultFocus: "accept",
acceptLabel: "Allow",
rejectLabel: "Block",
accept: function () { return handleFCMNotification(); },
reject: function () {
console.log("Permission denied");
}, // Handle rejection by logging a message to the console
});
}
// Create a confirmation dialog with custom buttons and a callback
};
(0, react_1.useEffect)(function () {
if (notificationPermission === null ||
["granted", "denied"].includes(notificationPermission) === false) {
handleFCMNotification();
}
}, [firebaseConfig, notificationPermission]);
(0, react_1.useEffect)(function () {
saveToken(firebaseToken);
}, [firebaseToken]);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(toast_1.Toast, { ref: toast, onClick: function () { return handleClick(responsePayload); } }), children, (0, jsx_runtime_1.jsx)(confirmdialog_1.ConfirmDialog, { className: className })] }));
};
exports.NotificationProvider = NotificationProvider;