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

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 =====================
export const generateToken = async () => {
try {
@@ -29,7 +35,10 @@ export const generateToken = async () => {
dispatch(setFcmPermission(permission));
if (permission !== 'granted') {
if (!notificationWarningShown) {
notificationWarningShown = true;
opentoast('Enable notifications to receive OTP, alerts, and updates', 'error');
}
return;
}