temp fix for rating history

src/App.jsx

@@ -113,7 +113,7 @@ function App() {
               : <Navigate to="/" />} 
           />
           <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="/rating-history" element={isAuthenticated ? <RatingHistory userName={user} profilePic={profilePic}/> : <Navigate to="/" />} />
           <Route path="/comment/:post_id" element={isAuthenticated ? <Comment userName={user} profilePic={profilePic} /> : <Navigate to="/" />} />
           <Route path="*" element={<Navigate to="/" />} />
         </Routes>

src/components/RatingHistory/RatingHistory.css

@@ -5,6 +5,7 @@
 }
 
 .rating-history-page {
+    padding-top: 3em;
     padding-bottom: 3em;
     margin-top: 2px;
     margin-bottom: auto;

src/components/RatingHistory/RatingHistory.jsx

@@ -1,16 +1,55 @@
 import Post from '../Post/Post';
+import { collection, getDocs } from "firebase/firestore";
+import { db } from "../../utilities/firebase";
 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';
+import { useState, useEffect } from 'react';
 
 
-function RatingHistory({ userName, profilePic, filteredPost }) {
+function RatingHistory({ userName, profilePic }) {
+    const [filteredPost, setFilteredPost] = useState([]);
 
     const fake_friends = ["Alice", "Bob", "Charlie", "David"];
  // Add userName as a dependency to prevent it from running infinitely    
 
+    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
+
+    // print out the posts
+    useEffect(() => {
+        console.log(filteredPost);
+    }
+    , [filteredPost]);
+
     return (
         <div>
             <AppBar />
@@ -38,7 +77,7 @@ function RatingHistory({ userName, profilePic, filteredPost }) {
                 <NavigationBar />
             </Container>
         </div>
-    )
+    );
 
 }