Rating feature implementation

src/App.tsx

@@ -6,100 +6,108 @@ import Navbar from './components/Navbar';
 import ListPage from './pages/ListPage';
 import MapPage from './pages/MapPage';
 import NotFoundPage from './pages/NotFoundPage';
+import ReviewFormPage from './pages/ReviewFormPage'; // Import the ReviewFormPage
+import RatingPage from './pages/RatingFormPage'; // Import the new RatingPage
 import { queryLocations, getLocationStatus } from './util/queryLocations';
 import './App.css';
 import {
-	IReadOnlyExtendedLocation,
-	IReadOnlyLocation,
+  IReadOnlyExtendedLocation,
+  IReadOnlyLocation,
 } from './types/locationTypes';
 
 const CMU_EATS_API_URL = 'https://dining.apis.scottylabs.org/locations';
-// const CMU_EATS_API_URL = 'http://localhost:5173/example-response.json'; // for debugging purposes (note that you need an example-response.json file in the /public folder)
-// const CMU_EATS_API_URL = 'http://localhost:5010/locations'; // for debugging purposes (note that you need an example-response.json file in the /public folder)
+
 function App() {
-	// Load locations
-	const [locations, setLocations] = useState<IReadOnlyLocation[]>();
-	const [extendedLocationData, setExtendedLocationData] =
-		useState<IReadOnlyExtendedLocation[]>();
-	useEffect(() => {
-		queryLocations(CMU_EATS_API_URL).then((parsedLocations) => {
-			setLocations(parsedLocations);
-		});
-	}, []);
+  // Load locations
+  const [locations, setLocations] = useState<IReadOnlyLocation[]>();
+  const [extendedLocationData, setExtendedLocationData] =
+    useState<IReadOnlyExtendedLocation[]>();
+
+  useEffect(() => {
+    queryLocations(CMU_EATS_API_URL).then((parsedLocations) => {
+      setLocations(parsedLocations);
+    });
+  }, []);
 
-	useEffect(() => {
-		const intervalId = setInterval(
-			(function updateExtendedLocationData() {
-				if (locations !== undefined) {
-					// Remove .setZone('America/New_York') and change time in computer settings when testing
-					// Alternatively, simply set now = DateTime.local(2023, 12, 22, 18, 33); where the parameters are Y,M,D,H,M
-					const now = DateTime.now().setZone('America/New_York');
-					setExtendedLocationData(
-						locations.map((location) => ({
-							...location,
-							...getLocationStatus(location.times, now), // populate location with more detailed info relevant to current time
-						})),
-					);
-				}
-				return updateExtendedLocationData; // returns itself here
-			})(), // self-invoking function
-			1 * 1000, // updates every second
-		);
-		return () => clearInterval(intervalId);
-	}, [locations]);
+  useEffect(() => {
+    const intervalId = setInterval(
+      (function updateExtendedLocationData() {
+        if (locations !== undefined) {
+          const now = DateTime.now().setZone('America/New_York');
+          setExtendedLocationData(
+            locations.map((location) => ({
+              ...location,
+              ...getLocationStatus(location.times, now), // populate location with more detailed info relevant to current time
+            }))
+          );
+        }
+        return updateExtendedLocationData;
+      })(),
+      1 * 1000, // updates every second
+    );
+    return () => clearInterval(intervalId);
+  }, [locations]);
 
-	// Auto-refresh the page when the user goes online after previously being offline
-	useEffect(() => {
-		function handleOnline() {
-			if (navigator.onLine) {
-				// Refresh the page
-				window.location.reload();
-			}
-		}
+  // Auto-refresh the page when the user goes online after previously being offline
+  useEffect(() => {
+    function handleOnline() {
+      if (navigator.onLine) {
+        // Refresh the page
+        window.location.reload();
+      }
+    }
 
-		window.addEventListener('online', handleOnline);
+    window.addEventListener('online', handleOnline);
 
-		return () => window.removeEventListener('online', handleOnline);
-	}, []);
+    return () => window.removeEventListener('online', handleOnline);
+  }, []);
 
-	return (
-		<React.StrictMode>
-			<BrowserRouter>
-				<div className="App">
-					<div className="AdBanner">
-						Pre-register for{' '}
-						<a
-							href="https://go.scottylabs.org/tartanhacks-cmueats"
-							style={{ color: 'white' }}
-						>
-							<strong>TartanHacks</strong>
-						</a>
-						, Pittsburgh&apos;s LARGEST hackathon! 🖥️
-					</div>
-					<div className="MainContent">
-						<Routes>
-							<Route
-								path="/"
-								element={
-									<ListPage
-										locations={extendedLocationData}
-									/>
-								}
-							/>
-							<Route
-								path="/map"
-								element={
-									<MapPage locations={extendedLocationData} />
-								}
-							/>
-							<Route path="*" element={<NotFoundPage />} />
-						</Routes>
-					</div>
-					<Navbar />
-				</div>
-			</BrowserRouter>
-		</React.StrictMode>
-	);
+  return (
+    <React.StrictMode>
+      <BrowserRouter>
+        <div className="App">
+          <div className="AdBanner">
+            Pre-register for{' '}
+            <a
+              href="https://go.scottylabs.org/tartanhacks-cmueats"
+              style={{ color: 'white' }}
+            >
+              <strong>TartanHacks</strong>
+            </a>
+            , Pittsburgh&apos;s LARGEST hackathon! 🖥️
+          </div>
+          <div className="MainContent">
+            <Routes>
+              <Route
+                path="/"
+                element={
+                  <ListPage
+                    locations={extendedLocationData}
+                  />
+                }
+              />
+              <Route
+                path="/map"
+                element={
+                  <MapPage locations={extendedLocationData} />
+                }
+              />
+              <Route
+                path="/review-restaurant"
+                element={<ReviewFormPage />} // Add the new ReviewFormPage route
+              />
+              <Route
+                path="/rate-restaurant"
+                element={<RatingPage />} // New route for RatingPage
+              />
+              <Route path="*" element={<NotFoundPage />} />
+            </Routes>
+          </div>
+          <Navbar />
+        </div>
+      </BrowserRouter>
+    </React.StrictMode>
+  );
 }
 
 export default App;

src/components/EateryCard.tsx

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+
 import {
 	Card,
 	CardHeader,
@@ -164,6 +165,7 @@ const SpecialsContent = styled(Accordion)({
 	backgroundColor: '#23272A',
 });
 
+
 function EateryCard({ location }: { location: IReadOnlyExtendedLocation }) {
 	const {
 		name,
@@ -177,9 +179,33 @@ function EateryCard({ location }: { location: IReadOnlyExtendedLocation }) {
 	} = location;
 	const changesSoon = !location.closedLongTerm && location.changesSoon;
 	const isOpen = !location.closedLongTerm && location.isOpen;
-
 	const [modalOpen, setModalOpen] = useState(false);
 
+
+	const [averageRatings, setAverageRatings] = useState<{
+		overall: number;
+	}>({ overall: 0 }); // Default values
+
+	useEffect(() => {
+		const fetchAverageRating = async () => {
+			try {
+				const response = await fetch(`/api/ratings/average/${name}`);
+				if (response.ok) {
+					const data = await response.json();
+					setAverageRatings(data.averageRating || { overall: 0 });
+				} else {
+					console.warn(`No ratings available for ${name}`);
+				}
+			} catch (error) {
+				console.error('Error fetching average ratings:', error);
+			}
+		};
+
+		fetchAverageRating();
+	}, [name]);
+
+
+
 	return (
 		<>
 			<Grid item xs={12} md={4} lg={3} xl={3}>
@@ -227,6 +253,9 @@ function EateryCard({ location }: { location: IReadOnlyExtendedLocation }) {
 							{locationText}
 						</LocationText>
 						<DescriptionText>{shortDescription}</DescriptionText>
+						<Typography variant="body1" style={{ color: '#FFD700' }}>
+							Average Rating: {averageRatings.overall ? averageRatings.overall.toFixed(1) : 'Not Rated'}
+							</Typography>
 					</CardContent>
 					<CardActions sx={{ marginTop: 'auto' }}>
 						{menu && (

src/components/Navbar.css

@@ -1,52 +1,48 @@
 .Navbar {
 	height: var(--navbar-height);
-	background-color: #1e1e1e;
-	padding: 14px;
-	box-sizing: border-box;
-	border-top: 2px solid #31373e;
+    background-color: #1e1e1e;
+    padding: 14px;
+    box-sizing: border-box;
+    border-top: 2px solid #31373e;
 }
 
 .Navbar-links {
 	position: relative;
-	display: grid;
-	grid-auto-columns: 1fr;
-	grid-auto-flow: column;
-	height: 40px;
-	margin: 0 auto;
-	max-width: 500px;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr); /* Adjusted for 4 links now */
+    grid-auto-flow: column;
+    height: 40px;
+    margin: 0 auto;
+    max-width: 600px; /* Adjusted width to accommodate new link */
 }
 
 .Navbar-links a {
 	position: relative;
-	z-index: 5;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-family: 'Zilla Slab', sans-serif;
-	font-weight: 500;
-	color: white;
-	font-size: 16px;
-	text-decoration: none;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: 'Zilla Slab', sans-serif;
+    font-weight: 500;
+    color: white;
+    font-size: 16px;
+    text-decoration: none;
 }
 
 .Navbar-links svg {
 	width: 24px;
-	height: 24px;
-	margin-right: 0.4em;
+    height: 24px;
+    margin-right: 0.4em;
 }
 
 .Navbar-active {
-	position: absolute;
-	z-index: 2;
-	left: 0;
-	top: 0;
-	width: 50%;
-	height: 100%;
-	background-color: #2b2f33;
-	border-radius: 999px;
-	transition:
-		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-		box-shadow 0.3s ease-in-out;
+    position: absolute;
+    background-color: #2b2f33;
+    border-radius: 999px;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 0 5px #ee6f52, 0 0 10px #ee6f52, 0 0 15px #ee6f52; /* Glowing effect */
+    width: calc(350% / 4); /* Adapt width to the number of links */
+    height: 100%;
 }
 
 .Navbar-active_map {