fix public feed and update classes rated count on Account page

src/App.jsx

@@ -29,6 +29,7 @@ function App() {
   const [userEmail, setUserEmail] = useState(null);
   const [profilePic, setProfilePic] = useState(null);
   const [friends, setFriends] = useState([]);
+  const [filteredPost, setFilteredPost] = useState([]);
 
   const isAuthenticated = DEV_MODE || user;
 
@@ -75,6 +76,8 @@ function App() {
                     userEmail={userEmail}
                     profilePic={profilePic}
                     friends={friends}
+                    filteredPost={filteredPost}
+                    setFilteredPost={setFilteredPost}
                   />
                 : <Navigate to="/" />
             }
@@ -99,7 +102,7 @@ function App() {
             path="/rating-history"
             element={
               isAuthenticated
-                ? <RatingHistory userName={user} profilePic={profilePic} />
+                ? <RatingHistory userName={user} profilePic={profilePic} filteredPost={filteredPost}/>
                 : <Navigate to="/" />
             }
           />

src/components/Account/Account.jsx

@@ -2,12 +2,14 @@ import { Box, Container, Typography, Button, Switch, Divider, Card, CardContent
 import EditIcon from '@mui/icons-material/Edit';
 import NavigationBar from '../NavigationBar/NavigationBar';
 import AppBar from '../AppBar/AppBar';
-import React from 'react';
+import React, {useEffect} from 'react';
 import { useNavigate } from 'react-router-dom';
 import Avatar from '@mui/material/Avatar';
 import "./Account.css";
+import { collection, getDocs } from "firebase/firestore";
+import { db } from "../../utilities/firebase";
 
-function Account({ userName, userEmail, profilePic, friends }) {
+function Account({ userName, userEmail, profilePic, friends, filteredPost, setFilteredPost }) {
   const navigate = useNavigate();
 
   const signOut = () => {
@@ -18,6 +20,34 @@ function Account({ userName, userEmail, profilePic, friends }) {
     navigate('/my-friends');
   };
 
+  async function getPostsFromDB() {
+    try {
+        const querySnapshot = await getDocs(collection(db, "posts"));
+        const posts = [];
+        querySnapshot.forEach((doc) => {
+            if (doc.data().username === userName?.displayName){
+                posts.push({ id: doc.id, ...doc.data() });
+            }
+        });
+        return posts;
+    } catch (error) {
+        console.log("Error: ", error);
+    }
+
+}
+
+useEffect(() => {
+    async function fetchPosts() {
+        try {
+            const fetchedPosts = await getPostsFromDB();
+            setFilteredPost(fetchedPosts);
+        } catch (error) {
+            console.error("Error fetching posts: ", error);
+        }
+    }
+    fetchPosts();
+}, [userName]);
+
   return (
     <div>
       <AppBar />
@@ -70,7 +100,7 @@ function Account({ userName, userEmail, profilePic, friends }) {
           <Card style={{ width: '45%', backgroundColor:'#BCBCBC' }}>
             <CardContent>
               <Typography variant="subtitle1">Classes Rated:</Typography>
-              <Typography variant="h5" style={{ fontWeight: 'bold' }}>20</Typography>
+              <Typography variant="h5" style={{ fontWeight: 'bold' }}>{filteredPost.length}</Typography>
             </CardContent>
           </Card>
 

src/components/PublicFeed/PublicFeed.jsx

@@ -14,18 +14,6 @@ import {db} from "../../utilities/firebase";
 import "./PublicFeed.css";
 import AppBar from '../AppBar/AppBar';
 
-const fake_post = {
-    id: 1, // automatically assigned
-    title: "I LOVE CS394",
-    course_name: "CS 394",
-    username: "john12nu", // no need to fill this out in the submission form
-    quarter: "Fall 2024",
-    body: "I had such an amazing time taking CS394. Highly recommend!",
-    rating: "5",
-    professor: "Prof. Riesbeck",
-    date: "January 10th, 2024", // use JS object to retrieve the date posted
-};
-
 async function getPostsFromDB() {
   // get all the posts from the database
 
@@ -81,12 +69,12 @@ function PublicFeed() {
   return (
     <div>
       <AppBar />
-      <Tabs value={value} onChange={handleChange} centered>
+      <Tabs className="friends-public-switch" value={value} onChange={handleChange} centered>
         <Tab label="Friends" icon={<PeopleIcon />} component={Link} to="/feed" />
         <Tab label="Public" icon={<PublicIcon />} component={Link} to="/public" />
       </Tabs>
+      <Container className="feed-content" maxWidth="sm">
       <CourseSelect searchFunc={setSearch} />
-      <Container maxWidth="sm">
         <Box paddingBottom="30px">
           <Stack spacing={3}>
               { filteredposts.length === 0 ?

src/components/RatingHistory/RatingHistory.jsx

@@ -1,47 +1,15 @@
 import Post from '../Post/Post';
-import { collection, getDocs } from "firebase/firestore";
-import { db } from "../../utilities/firebase";
-import { useState, useEffect } from 'react';
 import { Container, Box, Stack, Typography } from '@mui/material';
 import AppBar from '../AppBar/AppBar';
 import NavigationBar from '../NavigationBar/NavigationBar';
 import './RatingHistory.css';
 import Avatar from '@mui/material/Avatar';
 
 
-function RatingHistory({ userName, profilePic }) {
-    const [filteredPost, setFilteredPost] = useState([]);
+function RatingHistory({ userName, profilePic, filteredPost }) {
 
     const fake_friends = ["Alice", "Bob", "Charlie", "David"];
-
-    async function getPostsFromDB() {
-        try {
-            const querySnapshot = await getDocs(collection(db, "posts"));
-            const posts = [];
-            querySnapshot.forEach((doc) => {
-                if (doc.data().username === userName?.displayName){
-                    posts.push({ id: doc.id, ...doc.data() });
-                }
-            });
-            return posts;
-        } catch (error) {
-            console.log("Error: ", error);
-        }
-
-    }
-
-    useEffect(() => {
-        async function fetchPosts() {
-            try {
-                const fetchedPosts = await getPostsFromDB();
-                setFilteredPost(fetchedPosts);
-                // console.log("Filtered posts: ", fetchedPosts);
-            } catch (error) {
-                console.error("Error fetching posts: ", error);
-            }
-        }
-        fetchPosts();
-    }, [userName]); // Add userName as a dependency to prevent it from running infinitely    
+ // Add userName as a dependency to prevent it from running infinitely    
 
     return (
         <div>