From d330f8172967a602f75321efb494f11e1d158c1c Mon Sep 17 00:00:00 2001 From: alizenart <97767073+alizenart@users.noreply.github.com> Date: Thu, 7 Nov 2024 22:56:33 -0600 Subject: [PATCH] initial UI --- src/App.css | 139 +++++++++++--------------------- src/App.jsx | 188 ++++++++++++++++++++----------------------- src/MapComponent.jsx | 42 ++++++++++ 3 files changed, 174 insertions(+), 195 deletions(-) create mode 100644 src/MapComponent.jsx diff --git a/src/App.css b/src/App.css index 7e822a0..fcefc44 100644 --- a/src/App.css +++ b/src/App.css @@ -1,124 +1,75 @@ .App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } + display: flex; + flex-direction: column; + min-height: 100vh; } .App-header { - background-color: #FFF2D7; - min-height: 100vh; + background-color: #EBEBE5; + font-size: 1.5rem; + color: #8dbf50; + font-weight: bold; + padding: 20px; display: flex; - flex-direction: column; + justify-content: space-between; align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: #65431F; } -.App-link { - padding: 8px; - border-radius: 5px; - border: none; - height:27px; - } - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.page-title { + color: #8dbf50; } -button { - margin-top: 10px; - padding: 10px; - border-radius: 5px; - background-color: #61dafb; - background-color: #8A3323; +.my-post-button { border: none; + color: #8dbf50; + font-weight: bold; + background-color: transparent; + font-size: 1.25rem; cursor: pointer; - color:white; - height:100%; } -.cafe-card{ - background-color: #8A3323 !important; -} - -.App-header ul { - list-style-type: none; - padding: 0; -} - -.App-header li { - margin: 5px 0; - background-color: #444; - padding: 10px; - border-radius: 5px; +.my-post-button:hover { color: white; } -.App-header ul { - list-style-type: none; - padding: 0; +.cafe-card { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + padding-bottom: 20px; + border-bottom: 1px solid #ddd; + background-color: #FFF2D7; } -.App-header li { - margin: 10px 0; - background-color: #444; - padding: 10px; - border-radius: 5px; - color: white; +.listings-plant-image, .cafe-image { + width: 150px; + height: 100px; + object-fit: cover; + padding-left: 20px; } -.App-header li ul { - margin-top: 5px; +.cafe-info { + flex: 1; + padding-left: 20px; } -input { - margin: 5px; - padding: 8px; - border-radius: 5px; - border: none; -} -.availability-section { - margin-top: 20px; +.cafe-action, .plant-action { + text-align: right; } -.availability-display { - margin-top: 10px; +.price { + font-size: 1.2rem; + color: #333; } -.availability-item { - background-color: #555; - padding: 10px; - margin-top: 5px; - border-radius: 5px; -} - -input { - margin: 5px; - padding: 8px; - border-radius: 5px; - border: none; +.book-btn, .cafe-action button { + color: #8dbf50; + font-size: 1rem; + font-weight: bold; + cursor: pointer; } -button { - margin-top: 10px; - padding: 10px; - border-radius: 5px; - background-color: #61dafb; - border: none; - cursor: pointer; +.book-btn:hover { + background-color: #6f9640; } diff --git a/src/App.jsx b/src/App.jsx index 032bc57..f300761 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,10 +1,8 @@ import React, { useState, useEffect } from 'react'; import './App.css'; - import { useAuthState, signInWithGoogle, firebaseSignOut } from './utilities/firebase'; - import { findCafes } from './utilities/findCafes'; - +import MapComponent from "./MapComponent"; function App() { const [reviews, setReviews] = useState([]); @@ -17,52 +15,19 @@ function App() { const [dist, setDist] = useState(''); const [cafes, setCafes] = useState([]); - const [user] = useAuthState(); - + const [user] = useAuthState(); const handleSignIn = async () => { try { - await signInWithGoogle(); // Sign in with Google + await signInWithGoogle(); } catch (error) { console.error('Error signing in:', error); } }; - + const handleLogout = () => firebaseSignOut(); - useEffect(() => { - }, []); - - // const findCafes = () => { - // const radiusMeters = parseFloat(dist) * 1609.34; - - // const geocoder = new window.google.maps.Geocoder(); - // geocoder.geocode({ address: address }, (results, status) => { - // if (status === "OK" && results[0]) { - // const location = results[0].geometry.location; - - // const service = new window.google.maps.places.PlacesService(document.createElement("div")); - // service.nearbySearch( - // { - // location: location, - // radius: radiusMeters, - // type: "cafe", - // }, - // (results, status) => { - // if (status === window.google.maps.places.PlacesServiceStatus.OK) { - // setCafes(results.map((place) => place.name)); - // } else { - // alert("No cafes found within the specified radius."); - // setCafes([]); - // } - // } - // ); - // } else { - // alert("Invalid zip code or location not found."); - // setCafes([]); - // } - // }); - // }; + useEffect(() => {}, []); const findCafesWrapper = () => { findCafes(dist, address, setCafes); @@ -71,38 +36,61 @@ function App() { const handleReviewSubmit = () => { if (newReview.trim()) { const review = { id: Date.now(), text: newReview, replies: [] }; + setReviews((prevReviews) => [...prevReviews, review]); setNewReview(''); } }; const handleReplySubmit = (reviewId) => { if (replyText.trim()) { + setReviews((prevReviews) => + prevReviews.map((review) => + review.id === reviewId + ? { ...review, replies: [...review.replies, replyText] } + : review + ) + ); setReplyText(''); setSelectedReview(null); } }; const handleAvailabilityUpdate = (cafeId) => { - + const timestamp = new Date().toLocaleString(); + const newUpdate = { timestamp, seating: cafeStatus.seating, outlets: cafeStatus.outlets }; + + setAvailability((prevAvailability) => ({ + ...prevAvailability, + [cafeId]: { + history: [...(prevAvailability[cafeId]?.history || []), newUpdate], + }, + })); + setCafeStatus({ seating: '', outlets: '' }); }; + const cafesMap = [ + { name: "Cafe Blue", lat: 42.046, lng: -87.688 }, + { name: "Green Bean Cafe", lat: 42.048, lng: -87.684 }, + { name: "Java Lounge", lat: 42.044, lng: -87.690 }, + ]; + return (

CafeWay

{user ? ( - <> - -

Welcome, {user.email}

- - ) : ( - - )} -
+ <> + +

Welcome, {user.email}

+ + ) : ( + + )} +
+ +
+
+

Share a Review

setNewReview(e.target.value)} /> -
- + -

Update Cafe Availability

- setCafeStatus({ ...cafeStatus, seating: e.target.value }) - } + onChange={(e) => setCafeStatus({ ...cafeStatus, seating: e.target.value })} /> - setCafeStatus({ ...cafeStatus, outlets: e.target.value }) - } + onChange={(e) => setCafeStatus({ ...cafeStatus, outlets: e.target.value })} /> - -
+ -

Availability History

{availability['cafe-123']?.history?.map((update, index) => (
@@ -176,7 +150,7 @@ function App() { ))}
-
+

Cafes Near Me

setDist(e.target.value)} /> - - + +

Cafes Near Me

    {cafes.map((cafe, index) => (
  • {cafe}
    • ))}
+ + +
    + {cafes.map((cafesMap, index) => ( +
  • + {cafe.name} (Lat: {cafe.lat}, Lng: {cafe.lng}) +
    • + ))} +
+ + {/* Integrate MapComponent with hardcoded data */} +
+ +
- +
); } diff --git a/src/MapComponent.jsx b/src/MapComponent.jsx new file mode 100644 index 0000000..e946599 --- /dev/null +++ b/src/MapComponent.jsx @@ -0,0 +1,42 @@ +import React, { useEffect, useRef, useState } from "react"; + +const MapComponent = ( {cafes} ) => { + const mapRef = useRef(null); + const defaultLocation = { lat: 42.0451, lng: -87.6877 }; // Default to a location, e.g., Chicago + + + useEffect(() => { + if (!mapRef.current) return; + + // Initialize map + const map = new window.google.maps.Map(mapRef.current, { + center: defaultLocation, + zoom: 14, + mapId: 'ae95546a5be3631', + disableDefaultUI: true, + }); + + // Add markers for each cafe + cafes.forEach((cafe) => { + const marker = new window.google.maps.Marker({ + position: { lat: cafe.lat, lng: cafe.lng }, + map: map, + title: cafe.name, + }); + + // Info window with cafe name + const infoWindow = new window.google.maps.InfoWindow({ + content: `
${cafe.name}
`, + }); + + // Show info window on marker click + marker.addListener("click", () => { + infoWindow.open(map, marker); + }); + }); + }, []); + + return
; +}; + +export default MapComponent;