pf-web-notification-library
Version:
A React component library for Firebase push notifications using PrimeReact Toaster
168 lines (167 loc) • 8.75 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;
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];
var fetchApp = function () {
var app;
if (!(0, app_1.getApps)().length) {
app = (0, app_1.initializeApp)(firebaseConfig);
}
else {
app = (0, app_1.getApps)()[0];
}
return app;
};
var app = fetchApp();
var messaging = (0, messaging_1.getMessaging)(app);
var _e = (0, react_1.useState)(false), confirmed = _e[0], setConfirmed = _e[1];
var _f = (0, react_1.useState)(false), isVisible = _f[0], setIsVisible = _f[1];
var handleReject = function () {
setConfirmed(true);
localStorage.setItem("notificationPermissionConfirmed", "true");
console.log("Permission denied");
};
var handleConfirmationDialog = function (payload) {
setIsVisible(false);
localStorage.setItem("notificationPermissionConfirmed", "true");
};
var checkMessaging = function () {
(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);
}
}
});
};
var getNotification = function () {
Notification === null || Notification === void 0 ? void 0 : Notification.requestPermission().then(function (permission) {
setNotificationPermission(permission);
if (permission === "granted") {
console.log("Notification permission granted.");
setConfirmed(true);
(0, messaging_1.getToken)(messaging, { vapidKey: vapidKey })
.then(function (current_token) {
setFirebaseToken(current_token);
})
.catch(function (err) {
console.log("Token error:", err);
});
checkMessaging();
}
else if (permission === "denied") {
handleConfirmationDialog(permission);
}
else {
console.log("Unable to get permission to notify.");
}
}).catch(function (err) {
console.error("An error occurred while retrieving token. ", err);
});
};
var handleFCMNotification = function () {
if (confirmed === false) {
getNotification();
}
};
(0, react_1.useEffect)(function () {
if ((Notification === null || Notification === void 0 ? void 0 : Notification.permission) === "granted") {
setConfirmed(true);
checkMessaging();
}
else if (localStorage.getItem("notificationPermissionConfirmed") === undefined ||
localStorage.getItem("notificationPermissionConfirmed") === null) {
localStorage.setItem("notificationPermissionConfirmed", "false");
setIsVisible(true);
}
}, []);
(0, react_1.useEffect)(function () {
if (confirmed === true) {
localStorage.setItem("notificationPermissionConfirmed", "true");
if (isVisible === true) {
setIsVisible(false);
}
}
}, [confirmed]);
(0, react_1.useEffect)(function () {
if (Notification.permission === "granted") {
setConfirmed(true);
getNotification();
}
}, [Notification === null || Notification === void 0 ? void 0 : Notification.permission]);
(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, { visible: isVisible, 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 () {
handleFCMNotification();
}, reject: function () {
handleReject();
} })] }));
};
exports.NotificationProvider = NotificationProvider;