fix: stop the notification-permission toast from stacking

AppContent was declared inline inside App(), making it a new component
reference on every App render -- React would unmount/remount it each
time, re-running its useEffect (generateToken + FCM listener setup) and
re-showing the "Enable notifications" toast, which never auto-dismisses
and has no dedup, so they piled up. Moved AppContent to a stable
top-level component and added a one-per-tab guard on the toast itself
as a second line of defense.
This commit is contained in:
2026-07-08 17:45:32 +05:30
parent 6143644039
commit 283c24942d
2 changed files with 30 additions and 17 deletions

View File

@@ -13,15 +13,11 @@ import useInactivityLogout from 'hooks/useInactivityLogout';
// ==============================|| APP - THEME, ROUTER, LOCAL ||============================== // // ==============================|| APP - THEME, ROUTER, LOCAL ||============================== //
const App = () => { // Was previously declared inline inside App(), which made it a fresh
const navigate = useNavigate(); // component reference on every App render — React would unmount/remount it
useEffect(() => { // each time, re-firing its useEffect (and the FCM permission toast) on
if (!localStorage.getItem('authname')) { // every App re-render instead of once per app load.
navigate('/login'); const AppContent = () => {
}
}, [navigate]);
const AppContent = () => {
useInactivityLogout(); useInactivityLogout();
useEffect(() => { useEffect(() => {
@@ -35,7 +31,15 @@ const App = () => {
<Snackbar /> <Snackbar />
</> </>
); );
}; };
const App = () => {
const navigate = useNavigate();
useEffect(() => {
if (!localStorage.getItem('authname')) {
navigate('/login');
}
}, [navigate]);
return ( return (
<> <>

View File

@@ -22,6 +22,12 @@ const opentoast = (message, color, vertical = 'bottom') => {
}); });
}; };
// Notification.requestPermission() re-resolves with the browser's current
// (often already-decided) permission every time this runs. Without a guard,
// any repeat call — e.g. from a remount — re-shows the same permanent,
// non-auto-dismissing toast and they stack up. Only warn once per tab.
let notificationWarningShown = false;
// ===================== Generate FCM Token ===================== // ===================== Generate FCM Token =====================
export const generateToken = async () => { export const generateToken = async () => {
try { try {
@@ -29,7 +35,10 @@ export const generateToken = async () => {
dispatch(setFcmPermission(permission)); dispatch(setFcmPermission(permission));
if (permission !== 'granted') { if (permission !== 'granted') {
if (!notificationWarningShown) {
notificationWarningShown = true;
opentoast('Enable notifications to receive OTP, alerts, and updates', 'error'); opentoast('Enable notifications to receive OTP, alerts, and updates', 'error');
}
return; return;
} }