Merge pull request #27 from dgomie/dashboard-styling

Dashboard styling

Author: dgomie

src/app/dashboard/dashboard.module.css

@@ -37,10 +37,18 @@
   padding: .5rem;
 }
 
+.desktopWelcome {
+  display: flex;
+}
+
 @media (max-width: 768px) {
   .buttonContainer {
     max-width: 100%;
   }
+
+  .desktopWelcome {
+    display: none;
+  }
 }
 
 @media (min-width: 768px) {
@@ -55,4 +63,8 @@
     right: 4rem; /* Adjust the distance from the right */
     z-index: 1000; /* Ensure it stays above other elements */
   }
+
+  .mobileHeader {
+    display: none;
+  }
 }

src/app/dashboard/page.js

@@ -1,27 +1,40 @@
 'use client';
 
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import withAuth from '../../hoc/withAuth';
 import { AuthContext } from '@/context/AuthContext';
 import { useRouter } from 'next/navigation';
 import styles from './dashboard.module.css';
 import DashboardFeed from '@/components/dashboardFeed/DashboardFeed';
 import BubbleMenu from '@/components/bubbleMenu/BubbleMenu';
+import { DashboardHeader } from '@/components/dashboardHeader/DashboardHeader';
+import Image from 'next/image';
 
 const Dashboard = () => {
   const { currentUser } = useContext(AuthContext);
-  const router = useRouter();
 
   const handleButtonClick = (location) => {
     router.push(location);
   };
 
   return (
     <div className={styles.mainContainer}>
+      <div className={styles.mobileHeader}>
+        <DashboardHeader currentUserImage={currentUser.profileImg} />
+      </div>
       <div className={styles.dashboardContainer}>
         {currentUser && (
-          <div className={styles.welcomeMessage}>
-            Welcome, {currentUser.username}!
+          <div className={styles.desktopWelcome}>
+            <Image
+              src={currentUser.profileImg}
+              width={50}
+              height={50}
+              alt="User profile image"
+              style={{ borderRadius: '50%' }}
+            />
+            <div className={styles.welcomeMessage}>
+              Welcome, {currentUser.username}!
+            </div>
           </div>
         )}
         <DashboardFeed currentUserId={currentUser.uid} />

src/app/legions/Legions.module.css

@@ -16,6 +16,13 @@
   margin: 0 0 5rem;
 }
 
+.title {
+  font-size: 1.5rem;
+  font-weight: bold;
+  text-align: center;
+  margin: 1rem 0 0 0;
+}
+
 @media (min-width: 768px) {
   .mainContainer {
     display: flex;
@@ -25,4 +32,8 @@
   .legionsContainer {
     width: 60%;
   }
+
+  .mobileHeader {
+    display: none;
+  }
 }

src/app/legions/page.js

@@ -8,8 +8,9 @@ import Loader from '@/components/loader/Loader';
 import styles from './Legions.module.css';
 import withAuth from '@/hoc/withAuth';
 import Button from '@/components/button/Button';
+import { DashboardHeader } from '@/components/dashboardHeader/DashboardHeader';
 
-const Legions = () => {
+const Legions = ({ currentUser }) => {
   const [legions, setLegions] = useState([]);
   const [lastVisible, setLastVisible] = useState(null);
   const [loading, setLoading] = useState(false);
@@ -56,32 +57,39 @@ const Legions = () => {
   };
 
   return (
-    <div className={styles.mainContainer}>
-      <div className={styles.legionsContainer}>
-        {legions.map((legion, index) => (
-          <DashboardCard
-            key={legion.id}
-            legionName={legion.legionName}
-            legionDescription={legion.legionDescription}
-            players={legion.players}
-            maxNumPlayers={legion.maxNumPlayers}
-            numRounds={legion.numRounds}
-            onClick={() => {
-              handleCardClick(legion.id);
-            }}
-          />
-        ))}
-        {loading && <Loader />}
-        {!loading && hasMore && (
-          <Button onClick={loadMoreLegions} variant="transparentWhite">
-            Load More Legions
-          </Button>
-        )}
-        {!loading && !hasMore && (
-          <div className={styles.noneLeft}>No more legions left to load</div>
-        )}
+    <>
+      <div className={styles.mobileHeader}>
+        <DashboardHeader currentUserImage={currentUser.profileImg} />
       </div>
-    </div>
+      <div className={styles.title}>Explore Active Legions</div>
+
+      <div className={styles.mainContainer}>
+        <div className={styles.legionsContainer}>
+          {legions.map((legion, index) => (
+            <DashboardCard
+              key={legion.id}
+              legionName={legion.legionName}
+              legionDescription={legion.legionDescription}
+              players={legion.players}
+              maxNumPlayers={legion.maxNumPlayers}
+              numRounds={legion.numRounds}
+              onClick={() => {
+                handleCardClick(legion.id);
+              }}
+            />
+          ))}
+          {loading && <Loader />}
+          {!loading && hasMore && (
+            <Button onClick={loadMoreLegions} variant="transparentWhite">
+              Load More Legions
+            </Button>
+          )}
+          {!loading && !hasMore && (
+            <div className={styles.noneLeft}>No more legions left to load</div>
+          )}
+        </div>
+      </div>
+    </>
   );
 };
 

src/components/dashboardHeader/DashboardHeader.js

@@ -0,0 +1,44 @@
+'use client'; // Ensure this is a client-side component
+
+import React from 'react';
+import { useRouter } from 'next/navigation'; // Use next/navigation for client-side routing
+import styles from './DashboardHeader.module.css';
+import Image from 'next/image';
+
+export const DashboardHeader = ({ currentUserImage }) => {
+  const router = useRouter(); // Initialize the router
+
+  const handleLogoClick = () => {
+    if (router) {
+      router.push('/dashboard'); // Navigate to /dashboard
+    }
+  };
+
+  const handleIconClick = () => {
+    if (router) {
+      router.push('/profile');
+    }
+  };
+
+  return (
+    <div className={styles.mainContainer}>
+      <Image
+        src={'/img/navlogo.svg'}
+        width={100}
+        height={100}
+        alt="Legion of Tones Logo"
+        onClick={handleLogoClick} // Add the click handler
+      />
+      <div className={styles.imageContainer}>
+        <Image
+          src={currentUserImage}
+          width={50}
+          height={50}
+          alt="user profile"
+          onClick={handleIconClick}
+          style={{borderRadius: '50%'}}
+        />
+      </div>
+    </div>
+  );
+};

src/components/dashboardHeader/DashboardHeader.module.css

@@ -0,0 +1,13 @@
+.mainContainer {
+    background: linear-gradient(to right, #57bacb, #e372ed);
+    width: 100vw;
+    height: 4rem;
+    display: flex;
+    padding: 1rem;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.imageContainer {
+    border-radius: 50%;
+}

src/components/login/Login.js

@@ -36,10 +36,40 @@ const Login = () => {
       // Request notification permission and get FCM token
       const permissionGranted = await requestNotificationPermission();
       if (permissionGranted) {
-        const fcmToken = await getFcmToken();
-        if (fcmToken) {
-          const userDocRef = doc(db, 'users', user.uid); // Create a reference to the user's Firestore document
-          await updateDoc(userDocRef, { fcmToken }); // Update the document with the FCM token
+        const newFcmToken = await getFcmToken();
+        if (newFcmToken) {
+          const userDocRef = doc(db, 'users', user.uid); // Reference to the user's Firestore document
+
+          // Retrieve the old FCM token from the user's document
+          const userDocSnap = await userDocRef.get();
+          const oldFcmToken = userDocSnap.exists()
+            ? userDocSnap.data().fcmToken
+            : null;
+
+          // Update the user's FCM token
+          await updateDoc(userDocRef, { fcmToken: newFcmToken });
+
+          if (oldFcmToken) {
+            // Query all legions where the old FCM token exists in the playerTokens array
+            const legionsQuery = db
+              .collection('legions')
+              .where('playerTokens', 'array-contains', oldFcmToken)
+              .where('isActive', '==', true);
+            const legionsSnapshot = await legionsQuery.get();
+
+            // Update each legion document
+            const batch = db.batch();
+            legionsSnapshot.forEach((doc) => {
+              const legionRef = doc.ref;
+              const updatedPlayerTokens = doc
+                .data()
+                .playerTokens.map((token) =>
+                  token === oldFcmToken ? newFcmToken : token
+                );
+              batch.update(legionRef, { playerTokens: updatedPlayerTokens });
+            });
+            await batch.commit();
+          }
         } else {
           console.warn('Failed to retrieve FCM token.');
         }