Trying to improve notification request behavior

Author: Dean Sofer

src/Dialogues/Friends.tsx

@@ -28,26 +28,6 @@ export default function Friends({ user, load, reset }: FriendsProps) {
     const [isExpanded, setIsExpanded] = useState(false);
     const [matches, setMatches] = useState<firebase.database.DataSnapshot>([]);
     const [searchResults, setSearchResults] = useState<firebase.database.DataSnapshot>([]);
-    const [requestedNotifications, setRequestedNotifications] = useState(false);
-
-    // Request notification permission when Friends component mounts
-    useEffect(() => {
-        const requestPermission = async () => {
-            if (user && Notification.permission === 'default' && !requestedNotifications) {
-                console.log("Friends modal opened, attempting notification permission request...");
-                try {
-                    const permission = await Notification.requestPermission();
-                    if (permission === 'granted')
-                        saveFcmToken();
-                } catch (error) {
-                    console.error("Error requesting notification permission:", error);
-                } finally {
-                    setRequestedNotifications(true);
-                }
-            }
-        };
-        requestPermission();
-    }, [user, requestedNotifications]);
 
     // Synchronize Matches
     useEffect(() => {
@@ -171,6 +151,12 @@ export default function Friends({ user, load, reset }: FriendsProps) {
                         Edit Profile
                     </a>
                 </li>
+                {Notification.permission === 'default' ? <li>
+                    <a onPointerUp={() => saveFcmToken(true)} href="#">
+                        <span className="material-icons notranslate">notifications</span>
+                        Notifications
+                    </a>
+                </li> : null}
                 <li>
                     <a onPointerUp={handleReset} href="#">
                         <span className="material-icons notranslate">restart_alt</span>

src/firebase.config.ts

@@ -19,9 +19,12 @@ const vapidKey = 'BM1H9qfv1e_XcIB31ZeLCn8IpGOdMIwMShRej6wld8QAMkV4YqJ-eMQa1rSnwh
 
 export default firebase.initializeApp(config);
 
-export async function saveFcmToken() {
+export async function saveFcmToken(requestPermission = false) {
     const userId = firebase.auth().currentUser?.uid;
-    if (Notification.permission === 'granted' && userId)
+    if (!userId) return;
+    if (Notification.permission === 'default' && requestPermission) 
+        await Notification.requestPermission();
+    if (Notification.permission === 'granted')
         await firebase.database().ref(`/users/${userId}/fcmToken`).set(
             await firebase.messaging().getToken({ vapidKey })
         )

src/index.tsx

@@ -139,9 +139,9 @@ export function App() {
           };
           console.log('Creating user', data);
           userRef.set(data);
-          saveFcmToken(); // Ensure FCM token is saved for new users
+          saveFcmToken(true);
         } else if (!snapshot.val().fcmToken) {
-          saveFcmToken(); // Ensure FCM token is saved if missing for existing users
+          saveFcmToken();
         }
 
         // Subscribe to user data changes