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:
24
src/App.js
24
src/App.js
@@ -13,15 +13,11 @@ import useInactivityLogout from 'hooks/useInactivityLogout';
|
||||
|
||||
// ==============================|| APP - THEME, ROUTER, LOCAL ||============================== //
|
||||
|
||||
const App = () => {
|
||||
const navigate = useNavigate();
|
||||
useEffect(() => {
|
||||
if (!localStorage.getItem('authname')) {
|
||||
navigate('/login');
|
||||
}
|
||||
}, [navigate]);
|
||||
|
||||
const AppContent = () => {
|
||||
// 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();
|
||||
|
||||
useEffect(() => {
|
||||
@@ -35,7 +31,15 @@ const App = () => {
|
||||
<Snackbar />
|
||||
</>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const App = () => {
|
||||
const navigate = useNavigate();
|
||||
useEffect(() => {
|
||||
if (!localStorage.getItem('authname')) {
|
||||
navigate('/login');
|
||||
}
|
||||
}, [navigate]);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user