Merge pull request #30 from ProLoser/fix/cleanup-styles-logs

Fix/cleanup styles logs

Author: ProLoser

src/Dialogues/Profile.tsx

@@ -1,11 +1,12 @@
 // Import FirebaseAuth and firebase.
-import { useState, useCallback, ChangeEvent } from 'react';
+import { useState, useCallback, ChangeEvent, useEffect } from 'react';
 import firebase from 'firebase/compat/app';
 import 'firebase/compat/auth';
 import 'firebase/compat/database';
 import Avatar from '../Avatar';
 import type { UserData } from '../Types';
 import './Profile.css'
+import { saveMessagingDeviceToken } from '../firebase-messaging-setup';
 
 export const LANGUAGES = ["af", "af-NA", "af-ZA", "agq", "agq-CM", "ak", "ak-GH", "am",
     "am-ET", "ar", "ar-001", "ar-AE", "ar-BH", "ar-DJ", "ar-DZ",
@@ -111,6 +112,7 @@ export const LANGUAGES = ["af", "af-NA", "af-ZA", "agq", "agq-CM", "ak", "ak-GH"
 
 export default function Profile({ authUser, toggle }) {
     const [editing, setEditing] = useState<UserData>(authUser?.val() || { uid: '', name: '', language: '', photoURL: '' });
+    const [currentNotificationPermission, setCurrentNotificationPermission] = useState(Notification.permission);
 
     const save = useCallback(async (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
@@ -125,6 +127,15 @@ export default function Profile({ authUser, toggle }) {
         setEditing(editing => ({ ...editing, [key]: event.target.value }));
     };
 
+    const handleEnableNotificationsClick = useCallback(async () => {
+        try {
+            await saveMessagingDeviceToken();
+        } catch (error)
+            console.error("Error requesting notification permission from profile:", error);
+        }
+        setCurrentNotificationPermission(Notification.permission);
+    }, []);
+
     return <section id="profile">
         <form onSubmit={save}>
             <header>
@@ -153,6 +164,18 @@ export default function Profile({ authUser, toggle }) {
                 <input type="text" name="photoURL" value={editing.photoURL || ''} onChange={generateOnChange('photoURL')} placeholder="Photo URL" />
             </label>
             <Avatar user={editing} />
+
+            {(currentNotificationPermission === 'default' || currentNotificationPermission === 'denied') && (
+                <>
+                    <p>Enable notifications to stay updated on game events.</p>
+                    <button type="button" onClick={handleEnableNotificationsClick}>
+                        Enable Notifications
+                    </button>
+                </>
+            )}
+            {currentNotificationPermission === 'granted' && (
+                <p>Notifications are enabled.</p>
+            )}
         </form>
     </section>
 }

src/firebase-messaging-setup.ts

@@ -27,7 +27,7 @@ const auth = firebaseApp.auth();         // Or firebase.auth()
 
 
 // Get the FCM registration token and save it to the database
-async function saveMessagingDeviceToken() {
+export async function saveMessagingDeviceToken() {
   const userId = auth.currentUser?.uid;
   if (!userId) {
     console.log('User not logged in, cannot save token.');
@@ -72,14 +72,3 @@ messaging.onMessage((payload) => {
 });
 
 // see public/firebase-messaging-sw.js
-
-// Call this function when the user logs in or perhaps when the app loads if they are already logged in
-auth.onAuthStateChanged((user) => { // Using compat auth instance
-  if (user) {
-    saveMessagingDeviceToken();
-  } else {
-    // User is signed out
-    console.log('User signed out, token not needed or remove token from DB');
-    // Optional: remove the token from the database if the user signs out
-  }
-});

src/index.tsx

@@ -18,6 +18,7 @@ import './Board/Board.css';
 import './Toolbar.css'
 import { calculate, newGame, rollDie, vibrate } from './Utils';
 import { registerSW } from 'virtual:pwa-register';
+import { saveMessagingDeviceToken } from './firebase-messaging-setup';
 
 
 
@@ -43,6 +44,7 @@ export function App() {
   const database = firebase.database();
   const [game, setGame] = useState<GameType>(newGame);
   const [user, setUser] = useState<SnapshotOrNullType>(null);
+  const [hasAttemptedNotificationPermission, setHasAttemptedNotificationPermission] = useState(false);
   const [state, setState] = useState<ModalState>(false);
   const [lastState, setLastState] = useState<ModalState>('friends');
   const [match, setMatch] = useState<Match | null>(null);
@@ -157,11 +159,29 @@ export function App() {
       } else {
         setUser(null);
         setMatch(null);
+        setHasAttemptedNotificationPermission(false);
       }
     });
     return () => unregisterAuthObserver();
   }, []);
 
+  useEffect(() => {
+    const requestPermission = async () => {
+      if (state === 'friends' && user && Notification.permission === 'default' && !hasAttemptedNotificationPermission) {
+        console.log("Friends modal opened, attempting notification permission request via useEffect..."); // Dev log
+        try {
+          await saveMessagingDeviceToken();
+        } catch (error) {
+          console.error("Error requesting notification permission from useEffect:", error); // Dev log
+        } finally {
+          setHasAttemptedNotificationPermission(true);
+        }
+      }
+    };
+
+    requestPermission();
+  }, [state, user, hasAttemptedNotificationPermission]);
+
   // Subscribe to match
   useEffect(() => {
     if (match?.game) {