Card styling + Account styling

394-w25 · Jan 22, 2025 · 8c1da47 · 8c1da47
1 parent 0ac1f05
commit 8c1da47
Show file tree

Hide file tree

Showing 18 changed files with 675 additions and 547 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,4 +1,3 @@
-// App.js
 import React, { useState, useEffect } from 'react';
 import './App.css';
 import {
@@ -14,12 +13,11 @@ import SignIn from './components/SignIn/SignIn';
 import Feed from './components/Feed/Feed';
 import Submission from './components/Submission/Submission';
 import Account from './components/Account/Account';
-import MyFriends from './components/Account/Friends/MyFriends';
+import MyFriends from './components/SearchPage/MyFriends/MyFriends';
 import RatingHistory from './components/RatingHistory/RatingHistory';
 import Comment from './components/Comment/Comment';
 import SearchPage from './components/SearchPage/SearchPage';
-import { fetchUserFriends } from './services/friendService';
-import { doc, getDoc } from 'firebase/firestore';
+import { doc, getDoc, onSnapshot } from 'firebase/firestore';
 import { db } from './utilities/firebase';
 
 // Toggle this to `true` in dev if you want to skip sign-in
@@ -34,29 +32,55 @@ function App() {
 
   const isAuthenticated = DEV_MODE || user;
 
-  const loadFriends = async () => {
-    const friendIds = await fetchUserFriends(user.uid);
-    const friendProfiles = await Promise.all(friendIds.map(async (fid) => {
-      const ref = doc(db, 'users', fid);
-      const snap = await getDoc(ref);
-      if (snap.exists()) {
-        return { id: fid, ...snap.data() };
-      }
-      return { id: fid, displayName: 'Unknown', email: null };
-    }));
-    setFriends(friendProfiles);
-  };
-
   useEffect(() => {
     if (!user) return;
-    loadFriends();
+
+    const userRef = doc(db, "users", user.uid);
+
+    const unsubscribe = onSnapshot(userRef, async (snapshot) => {
+      if (snapshot.exists()) {
+        const data = snapshot.data();
+        const friendIds = data.friends || [];
+
+        if (friendIds.length === 0) {
+          setFriends([]);
+          return;
+        }
+
+        // Fetch each friend's details from the users collection
+        const friendProfiles = await Promise.all(
+          friendIds.map(async (friendId) => {
+            const friendRef = doc(db, 'users', friendId);
+            const friendSnap = await getDoc(friendRef);
+
+            if (friendSnap.exists()) {
+              const friendData = friendSnap.data();
+              return {
+                id: friendId,
+                displayName: friendData.displayName || "Unknown",
+                email: friendData.email || "No email available",
+                photoURL: friendData.photoURL || "",
+              };
+            } else {
+              return { id: friendId, displayName: "Unknown", email: "No email available", photoURL: "" };
+            }
+          })
+        );
+
+        setFriends(friendProfiles);
+      } else {
+        console.error("User document does not exist.");
+      }
+    });
+
+    return () => unsubscribe();
   }, [user]);
+
 
   return (
     <Container className="app-background" maxWidth="sm" disableGutters>
       <Router>
         <Routes>
-          {/* Root => sign in if not dev mode */}
           {!DEV_MODE ? (
             <Route
               path="/"
@@ -72,56 +96,25 @@ function App() {
             <Route path="/" element={<Feed friends={friends} />} />
           )}
 
-          {/* Protected routes => must be logged in or dev */}
-          <Route
-            path="/feed"
-            element={isAuthenticated ? <Feed friends={friends} /> : <Navigate to="/" />}
-          />
-          <Route 
-            path="/submission" 
-            element={isAuthenticated ? <Submission userName={user} /> : <Navigate to="/" />} 
-          />
+          <Route path="/feed" element={isAuthenticated ? <Feed friends={friends} /> : <Navigate to="/" />} />
+          <Route path="/submission" element={isAuthenticated ? <Submission userName={user} /> : <Navigate to="/" />} />
           <Route path="/search" element={user ? <SearchPage userUID={user.uid} /> : <Navigate to="/" />} />
-          <Route
-            path="/account"
-            element={
-              isAuthenticated
-                ? <Account 
-                    userName={user}
-                    userEmail={userEmail}
-                    profilePic={profilePic}
-                    friends={friends}
-                    filteredPost={filteredPost}
-                    setFilteredPost={setFilteredPost}
-                  />
-                : <Navigate to="/" />
-            }
-          />
-          <Route
-            path="/my-friends"
-            element={
-              isAuthenticated
-                ? <MyFriends user={user} friends={friends} loadFriends={loadFriends} />
-                : <Navigate to="/" />
-            }
-          />
-          <Route
-            path="/rating-history"
-            element={
-              isAuthenticated
-                ? <RatingHistory userName={user} profilePic={profilePic} filteredPost={filteredPost}/>
-                : <Navigate to="/" />
-            }
-          />
-          <Route
-            path="/comment/:post_id"
-            element={
-              isAuthenticated
-                ? <Comment userName={user} profilePic={profilePic} />
-                : <Navigate to="/" />
-            }
+          <Route 
+            path="/account" 
+            element={isAuthenticated ? 
+              <Account 
+                userName={user}
+                userEmail={userEmail}
+                profilePic={profilePic}
+                friends={friends}
+                filteredPost={filteredPost}
+                setFilteredPost={setFilteredPost} 
+              /> 
+              : <Navigate to="/" />} 
           />
-          {/* Fallback */}
+          <Route path="/my-friends" element={isAuthenticated ? <MyFriends user={user} friends={friends} /> : <Navigate to="/" />} />
+          <Route path="/rating-history" element={isAuthenticated ? <RatingHistory userName={user} profilePic={profilePic} filteredPost={filteredPost}/> : <Navigate to="/" />} />
+          <Route path="/comment/:post_id" element={isAuthenticated ? <Comment userName={user} profilePic={profilePic} /> : <Navigate to="/" />} />
           <Route path="*" element={<Navigate to="/" />} />
         </Routes>
       </Router>

diff --git a/src/components/Account/Account.css b/src/components/Account/Account.css
@@ -1,11 +1,85 @@
-.account-details {
-    margin-bottom: 20px;
-}
-
-.account-content {
-    text-align: center;
-    padding-top: 20px;
-    height: calc(100vh - 56px - 64px); /* This is the height of the viewport minus the height of the app bar and the bottom navigation bar */
-    margin-top: 4rem;
-    margin-bottom: 6rem;
-}
+/* Account.css */
+.account-page {
+    height: 100vh;
+    overflow-y: auto;
+  }
+
+  .account-container {
+    margin-top: 6rem;
+  }
+
+  .account-top-card {
+    background-color: #cbcbcb;
+    border-radius: 12px;
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .top-card-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .account-avatar {
+    width: 100px !important;
+    height: 100px !important;
+    margin-right: 1.5rem;
+    background-color: #ccc;
+  }
+
+  .stats-right {
+    display: flex;
+    flex-direction: row;
+    gap: 2rem;
+    cursor: pointer;
+  }
+
+  .stat-block {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .stat-number {
+    font-size: 1.2rem;
+    font-weight: bold;
+  }
+
+  .stat-label {
+    font-size: 0.95rem;
+    color: #555;
+  }
+
+  .user-info-section {
+    margin-top: 1rem;
+    text-align: left;
+  }
+
+  .user-name {
+    font-size: 1.2rem;
+    font-weight: bold;
+    margin-bottom: 0.3rem;
+  }
+
+  .user-email {
+    font-size: 0.9rem;
+    color: #444;
+  }
+
+  .liked-reviews-btn {
+    width: 100%;
+    background-color: #7C67E7 !important;
+    color: #fff !important;
+    margin-bottom: 1rem !important;
+    font-size: 1rem !important;
+    padding: 0.6rem !important;
+  }
+
+  .signout-btn {
+    width: 100%;
+    margin-bottom: 2rem !important;
+    font-size: 1rem !important;
+    padding: 0.6rem !important;
+  }
+