From 3dc6c1c040dcd4115ec5bae576fa40a7eef41c73 Mon Sep 17 00:00:00 2001
From: Frank-Gu-81 <gushaopengfrank@gmail.com>
Date: Tue, 14 Jan 2025 20:25:56 -0600
Subject: [PATCH] added RatingHistory.css for styling

---
 src/components/RatingHistory/RatingHistory.css |  8 ++++++++
 src/components/RatingHistory/RatingHistory.jsx | 17 ++++-------------
 2 files changed, 12 insertions(+), 13 deletions(-)
 create mode 100644 src/components/RatingHistory/RatingHistory.css

diff --git a/src/components/RatingHistory/RatingHistory.css b/src/components/RatingHistory/RatingHistory.css
new file mode 100644
index 0000000..6ba86e6
--- /dev/null
+++ b/src/components/RatingHistory/RatingHistory.css
@@ -0,0 +1,8 @@
+.profile-icon {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background-color: #e0e0e0;
+    display: inline-block;
+    margin-bottom: 20px;
+}
\ No newline at end of file
diff --git a/src/components/RatingHistory/RatingHistory.jsx b/src/components/RatingHistory/RatingHistory.jsx
index 3f068b1..02b17be 100644
--- a/src/components/RatingHistory/RatingHistory.jsx
+++ b/src/components/RatingHistory/RatingHistory.jsx
@@ -5,6 +5,7 @@ import { useState, useEffect } from 'react';
 import { Container, Box, Stack } from '@mui/material';
 import AppBar from '../AppBar/AppBar';
 import NavigationBar from '../NavigationBar/NavigationBar';
+import './RatingHistory.css';
 
 
 function RatingHistory({ userName }) {
@@ -24,7 +25,6 @@ function RatingHistory({ userName }) {
                     posts.push({ id: doc.id, ...doc.data() });
                 }
             });
-            //const filteredPosts = posts.filter(post => post.username === userName?.displayName);
             return posts;
         } catch (error) {
             console.log("Error: ", error);
@@ -37,29 +37,20 @@ function RatingHistory({ userName }) {
             try {
                 const fetchedPosts = await getPostsFromDB();
                 setFilteredPost(fetchedPosts);
-                console.log("Filtered posts: ", fetchedPosts);
+                // console.log("Filtered posts: ", fetchedPosts);
             } catch (error) {
                 console.error("Error fetching posts: ", error);
             }
         }
         fetchPosts();
-    }, [userName]); // Add userName as a dependency    
+    }, [userName]); // Add userName as a dependency to prevent it from running infinitely    
 
     return (
         <div>
             <AppBar />
             <Container maxWidth="xs" style={{ textAlign: 'center', paddingTop: '20px' }}>
                 {/* Profile Icon */}
-                <Box
-                    style={{
-                        width: '80px',
-                        height: '80px',
-                        borderRadius: '50%',
-                        backgroundColor: '#e0e0e0',
-                        display: 'inline-block',
-                        marginBottom: '20px',
-                    }}
-                >
+                <Box className="profile-icon">
                     {/* Profile Name */}
                     <h1>{userName.displayName}</h1>
                     {/* Profile Email */}