navigation to cafe pages based on place id

src/App.jsx

@@ -2,6 +2,7 @@ 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";
+import CafePage from "./pages/CafePage";
 
 const App = () => {
   return (
@@ -10,6 +11,7 @@ const App = () => {
         <Route path="/" element={ <LandingPage/> }/>
         <Route path="/post" element={ <ReviewPostPage/> }/>
         <Route path="/cafes" element={ <ReviewsPage/> }/>
+        <Route path="/cafe/:place_id" element={<CafePage/>}/>
       </Routes>
     </Router>
   )

src/components/Banner.css

@@ -16,7 +16,7 @@
 }
 
 .logo-div {
-    height:100%;
+    height: 100%;
     display: flex;
     align-items: center;
     margin-right: 3rem;
@@ -31,6 +31,7 @@
 .logo-search-div form {
     display: flex;
     align-items: center;
+    position: relative;  /* Allow positioning of the autocomplete dropdown */
 }
 
 .text-input {
@@ -57,12 +58,12 @@
     justify-content: center;
     align-items: center;
     border-top: none;
-    border-left:none;
-    border-right:none;
+    border-left: none;
+    border-right: none;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     border-bottom: 1px solid black;
-    border-top-right-radius: 0.25;
+    border-top-right-radius: 0.25rem;
 }
 
 .banner-buttons {
@@ -73,7 +74,7 @@
 
 .banner-btn {
     text-align: center;
-    height:2.45rem;
+    height: 2.45rem;
     width: 8rem;
     background-color: #8A3323;
     color: white;
@@ -88,4 +89,30 @@
 
 .banner-btn:hover {
     background-color: #a85c43;
-}
+}
+
+/* Autocomplete Dropdown */
+.autocomplete-dropdown {
+    position: absolute;
+    top: 100%;  /* Align directly below the input field */
+    left: 0;
+    right: 0;
+    background-color: white;
+    border: 1px solid #ddd;
+    border-radius: 0.25rem;
+    max-height: 200px;
+    overflow-y: auto;
+    z-index: 10;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    width: 22rem;  /* Match the width of the input field */
+}
+
+.autocomplete-item {
+    padding: 10px;
+    cursor: pointer;
+    font-family: 'Hind Vadodara', sans-serif;
+}
+
+.autocomplete-item:hover {
+    background-color: #f0f0f0;
+}

src/components/Banner.jsx

@@ -3,26 +3,84 @@ import Icon from '../Icon.svg';
 import Search from '../Search.svg';
 import { handleSignIn } from '../utilities/firebase';
 import { useNavigate } from 'react-router-dom';
+import { useState } from 'react';
 
-export const Banner = () => {
+export const Banner = ({ cafes }) => {
     const navigate = useNavigate();
-    const navigateToReviews = () => {
-        navigate('/cafes')
-    }
+    const [searchText, setSearchText] = useState('');
+    const [filteredCafes, setFilteredCafes] = useState([]);
+    const handleInputChange = (e) => {
+        const text = e.target.value;
+        setSearchText(text);
+
+        if (text) {
+            const matches = cafes.filter(cafe => 
+                cafe.name.toLowerCase().includes(text.toLowerCase())
+            );
+            setFilteredCafes(matches);
+        } else {
+            setFilteredCafes([]);
+        }
+    };
+
+    const handleSelectCafe = (cafe) => {
+        setSearchText(cafe.name);
+        setFilteredCafes([]);
+        navigate(`/cafe/${cafe.placeId}`);
+    };
+
+
+    const handleSearch = (e) => {
+        e.preventDefault();
+
+        if (searchText.trim() === '') {
+            navigate('/cafes');
+        } else {
+            const selectedCafe = cafes.find(cafe =>
+                cafe.name.toLowerCase() === searchText.toLowerCase()
+            );
+
+            if (selectedCafe) {
+                navigate(`/cafe/${selectedCafe.placeId}`);
+            } else {
+                alert('Cafe not found.');
+            }
+        }
+    };
+
     return (
         <div className='banner-div'>
             <div className="logo-search-div">
                 <div className='logo-div'>
-                    <img src={Icon}/>
+                    <img src={Icon} alt="CafeWay Logo" />
                     <h1>
                         CafeWay
                     </h1>
                 </div>
-                <form>
-                    <input className="text-input" type="text" placeholder="Search for cafes near you" />
-                    <button className="search-btn" onClick={navigateToReviews}> 
-                        <img src={Search}/>
+                <form onSubmit={handleSearch}>
+                    <input
+                        className="text-input"
+                        type="text"
+                        placeholder="Search for cafes near you"
+                        value={searchText}
+                        onChange={handleInputChange}
+                    />
+                    <button className="search-btn" type="submit"> 
+                        <img src={Search} alt="Search Icon" />
                     </button>
+                    {filteredCafes.length > 0 && (
+                        <ul className="autocomplete-dropdown">
+                            {filteredCafes.map((cafe) => (
+                                <li
+                                    key={cafe.placeId}
+                                    onClick={() => handleSelectCafe(cafe)}
+                                    className="autocomplete-item"
+                                >
+                                    {cafe.name} - {cafe.vicinity}
+                                </li>
+                            ))}
+                        </ul>
+                    )}
                 </form>
             </div>
             <div className="banner-buttons">
@@ -34,7 +92,7 @@ export const Banner = () => {
                 </button>
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default Banner;
+export default Banner;

src/components/CafeList.jsx

@@ -1,6 +1,12 @@
 import './CafeList.css';
+import { useNavigate } from 'react-router-dom';
 
 const CafeList = ({ cafes }) => {
+    const navigate = useNavigate();
+    const handleClick = (placeId) => {
+        navigate(`/cafe/${placeId}`);
+    };
+
     return (
         <div className="cafe-list-container">
             <div className="filter">
@@ -22,8 +28,12 @@ const CafeList = ({ cafes }) => {
                 </label>
             </div>
             <div className="cafe-list">
-                {cafes.map((cafe, index) => (
-                    <div key={index} className="cafe-card">
+                {cafes.map((cafe) => (
+                    <div 
+                        key={cafe.placeId} 
+                        className="cafe-card" 
+                        onClick={() => handleClick(cafe.placeId)}
+                    >
                         <h3>{cafe.name}</h3>
                         <p>{cafe.vicinity}</p>
                     </div>

src/pages/CafePage.jsx

@@ -0,0 +1,62 @@
+import { useParams } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import { findZipcode } from '../utilities/findZipcode';
+import { findCafes } from '../utilities/findCafes';
+import { useAuthState } from '../utilities/firebase';
+
+const CafePage = () => {
+    const { place_id } = useParams();
+    const [user] = useAuthState();
+    const [zipcode, setZipcode] = useState(null);
+    const [cafes, setCafes] = useState([]);
+    const [cafe, setCafe] = useState(null);
+
+    useEffect(() => {
+        if (user && user.email) {
+            const fetchZipCode = async () => {
+                const userZipcode = await findZipcode(user.email);
+                setZipcode(userZipcode);
+            };
+            fetchZipCode();
+        }
+    }, [user]);
+
+    useEffect(() => {
+        if (zipcode) {
+            const fetchCafes = async () => {
+                try {
+                    await findCafes(5, zipcode, setCafes);
+                } catch (error) {
+                    console.error('Error fetching cafes:', error);
+                    setCafes([]);
+                }
+            };
+            fetchCafes();
+        }
+    }, [zipcode]);
+
+    useEffect(() => {
+        if (cafes.length > 0) {
+            const foundCafe = cafes.find((cafe) => cafe.placeId === place_id);
+            setCafe(foundCafe);
+        }
+    }, [cafes, place_id]);
+
+    if (!cafe) {
+        return (
+            <div>
+                <h1>Cafe not found</h1>
+                <p>Sorry, we couldn't find a cafe with the specified ID.</p>
+            </div>
+        );
+    }
+
+    return (
+        <div>
+            <h1>{cafe.name}</h1>
+            <p><strong>Location:</strong> {cafe.vicinity}</p>
+        </div>
+    );
+}
+
+export default CafePage;

src/pages/LandingPage.jsx

@@ -3,10 +3,39 @@ import '../App.css';
 import MapComponent from "../MapComponent";
 import Banner from '../components/Banner';
 import { useAuthState } from '../utilities/firebase';
+import { useState, useEffect } from "react";
+import { findZipcode } from "../utilities/findZipcode";
+import { findCafes } from "../utilities/findCafes";
 
 const LandingPage = () => {
     const [user] = useAuthState();
-    console.log(user)
+    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]);
+
     const cafesMap = [
         { name: "Cafe Blue", lat: 42.046, lng: -87.688 },
         { name: "Green Bean Cafe", lat: 42.048, lng: -87.684 },
@@ -15,7 +44,7 @@ const LandingPage = () => {
 
     return (
         <div className="App">
-            <Banner />
+            <Banner cafes={cafes} />
             {/* Integrate MapComponent with hardcoded data */}
             <div style={{ height: '600px', width: '100%'}}>
                 <MapComponent cafes={cafesMap} />

src/pages/ReviewsPage.jsx

@@ -36,7 +36,7 @@ const ReviewsPage = () => {
 
     return (
         <div>
-            <Banner />
+            <Banner cafes={cafes}/>
             <CafeList cafes={cafes} />
         </div>
     );