populate cafes with cafes near authenticated email

src/App.jsx

@@ -1,13 +1,15 @@
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import LandingPage from './pages/LandingPage';
 import ReviewPostPage from "./pages/ReviewPostPage";
+import ReviewsPage from "./pages/ReviewsPage";
 
 const App = () => {
   return (
     <Router>
       <Routes>
         <Route path="/" element={ <LandingPage/> }/>
         <Route path="/post" element={ <ReviewPostPage/> }/>
+        <Route path="/cafes" element={ <ReviewsPage/> }/>
       </Routes>
     </Router>
   )

src/components/Banner.jsx

@@ -2,12 +2,13 @@ import './Banner.css';
 import Icon from '../Icon.svg';
 import Search from '../Search.svg';
 import { handleSignIn } from '../utilities/firebase';
+import { useNavigate } from 'react-router-dom';
 
 export const Banner = () => {
-    // const navigate = useNavigate();
-    // const navigateToReviews = () => {
-    //     navigate('/reviews')
-    // }
+    const navigate = useNavigate();
+    const navigateToReviews = () => {
+        navigate('/cafes')
+    }
     return (
         <div className='banner-div'>
             <div className="logo-search-div">
@@ -19,7 +20,7 @@ export const Banner = () => {
                 </div>
                 <form>
                     <input className="text-input" type="text" placeholder="Search for cafes near you" />
-                    <button className="search-btn"> 
+                    <button className="search-btn" onClick={navigateToReviews}> 
                         <img src={Search}/>
                     </button>
                 </form>

src/components/CafeList.css

@@ -1,6 +1,8 @@
 .cafe-list-container {
     display: flex;
     gap: 2rem;
+    width: 100vw;
+    height: 100vh;
 }
 
 .filter {
@@ -9,6 +11,7 @@
     background-color: #f5f5f5;
     border-radius: 5px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    height: 100%;
 }
 
 .cafe-list {
@@ -17,7 +20,7 @@
 }
 
 .cafe-card {
-    width: 100%;
+    width: 95%;
     margin-bottom: 1rem;
     padding: 1rem;
     border: 1px solid #ccc;

src/components/CafeList.jsx

@@ -1,43 +1,10 @@
 import './CafeList.css';
 
-const reviews = [
-    {
-        id: 1,
-        author: 'John Doe',
-        rating: 4,
-        content: 'Currently busy.',
-        location: 'Starbucks',
-    },
-    {
-        id: 2,
-        author: 'Jane Smith',
-        rating: 5,
-        content: 'Somewhat busy, some seats remain.',
-        location: 'Colectivo',
-    },
-    {
-        id: 3,
-        author: 'Alice Johnson',
-        rating: 3,
-        content: 'Very empty, plenty of seats.',
-        location: "Phil's",
-    },
-    {
-        id: 4,
-        author: 'Bob Brown',
-        rating: 5,
-        content: 'Very quiet and great coffee!',
-        location: 'Coffee Lab',
-    },
-];
-
-const CafeList = () => {
+const CafeList = ({ cafes }) => {
     return (
         <div className="cafe-list-container">
-            {/* Filter section */}
             <div className="filter">
                 <h4>Filter Options</h4>
-                {/* Example filter options */}
                 <label>
                     Rating:
                     <select>
@@ -53,21 +20,12 @@ const CafeList = () => {
                     Location:
                     <input type="text" placeholder="Search by location" />
                 </label>
-                {/* Add more filters here as needed */}
             </div>
-
-            {/* Review cards */}
             <div className="cafe-list">
-                {reviews.map((review) => (
-                    <div key={review.id} className="cafe-card">
-                        <h3>{review.author}</h3>
-                        <p>{review.location}</p>
-                        <div>
-                            {Array.from({ length: review.rating }).map((_, index) => (
-                                <span key={index}>&#9733;</span>
-                            ))}
-                        </div>
-                        <p>{review.content}</p>
+                {cafes.map((cafe, index) => (
+                    <div key={index} className="cafe-card">
+                        <h3>{cafe.name}</h3>
+                        <p>{cafe.vicinity}</p>
                     </div>
                 ))}
             </div>

src/pages/LandingPage.jsx

@@ -2,9 +2,11 @@ import React from 'react';
 import '../App.css';
 import MapComponent from "../MapComponent";
 import Banner from '../components/Banner';
+import { useAuthState } from '../utilities/firebase';
 
 const LandingPage = () => {
-
+    const [user] = useAuthState();
+    console.log(user)
     const cafesMap = [
         { name: "Cafe Blue", lat: 42.046, lng: -87.688 },
         { name: "Green Bean Cafe", lat: 42.048, lng: -87.684 },

src/pages/ReviewsPage.jsx

@@ -1,13 +1,45 @@
+import { useAuthState } from "../utilities/firebase";
+import { useState, useEffect } from "react";
+import { findZipcode } from "../utilities/findZipcode";
+import { findCafes } from "../utilities/findCafes";
 import Banner from "../components/Banner";
 import CafeList from "../components/CafeList";
 
 const ReviewsPage = () => {
+    const [user] = useAuthState();
+    const [zipcode, setZipcode] = useState(null);
+    const [cafes, setCafes] = useState([]);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            if (user && user.email) {
+                try {
+                    const userZipcode = await findZipcode(user.email);
+                    setZipcode(userZipcode);
+
+                    if (userZipcode) {
+                        await findCafes(2, userZipcode, setCafes);
+                    }
+                } catch (error) {
+                    console.error("Error fetching zipcode or cafes:", error);
+                    setZipcode(null);
+                    setCafes([]);
+                }
+            }
+        };
+        fetchData();
+    }, [user]);
+
+    useEffect(() => {
+        console.log(cafes);
+    }, [cafes]);
+
     return (
         <div>
-            <Banner/>
-            <CafeList/>
+            <Banner />
+            <CafeList cafes={cafes} />
         </div>
-    )
-}
+    );
+};
 
-export default ReviewsPage;
+export default ReviewsPage;

src/utilities/findCafes.jsx

@@ -15,7 +15,11 @@ export const findCafes = (dist, address, setCafes) => {
           },
           (results, status) => {
             if (status === window.google.maps.places.PlacesServiceStatus.OK) {
-              setCafes(results.map((place) => place.name));
+              setCafes(results.map((place) => ({
+                name: place.name,
+                placeId: place.place_id,
+                vicinity: place.vicinity
+              })));
             } else {
               alert("No cafes found within the specified radius.");
               setCafes([]);