diff --git a/src/dummy.json b/src/dummy.json index bd2b4d8..2a65290 100644 --- a/src/dummy.json +++ b/src/dummy.json @@ -17,15 +17,5 @@ "date": "2024-11-08T09:00:00Z", "replies": {}, "uid": "user_2" - }, - "test_id_3": { - "cafeId": "ChIJ60vPsg_QD4gRE61MVG65nSs", - "content": "Is the cafe open late on weekends?", - "category": "Question", - "date": "2024-11-09T11:45:00Z", - "replies": { - "replyId_1": "Yes, they stay open until 10 PM on Saturdays and Sundays!" - }, - "uid": "user_3" } } \ No newline at end of file diff --git a/src/pages/CafePage.css b/src/pages/CafePage.css index 5aa8304..5b783a7 100644 --- a/src/pages/CafePage.css +++ b/src/pages/CafePage.css @@ -1,90 +1,81 @@ -.cafe-page-container { - padding: 2rem; - font-family: 'Hind Vadodara', sans-serif; -} - -.cafe-header { - margin-bottom: 2rem; - border-bottom: 1px solid #ddd; - padding-bottom: 1rem; - text-align: center; -} - -.cafe-header h1 { - font-size: 2.5rem; - color: #8A3323; - margin-bottom: 0.5rem; -} - -.cafe-header p { - font-size: 1.2rem; -} - -.posts-section { +.review-section { margin-top: 2rem; + padding: 1rem; + background-color: #f9f9f9; + border: 1px solid #ddd; + border-radius: 8px; } -.posts-section h2 { +.review-section h2 { font-size: 1.8rem; - margin-bottom: 1rem; color: #8A3323; -} -.posts-list { - list-style-type: none; - padding: 0; + margin-bottom: 1rem; } -.post-item { - padding: 1rem; +.review-textarea { + width: 100%; + height: 100px; margin-bottom: 1rem; + padding: 0.5rem; border: 1px solid #ddd; border-radius: 8px; - background-color: #fafafa; + font-size: 1.1rem; + font-family: 'Hind Vadodara', sans-serif; } -.post-header { +.category-dropdown { + display: block; + width: 100%; margin-bottom: 1rem; + padding: 0.5rem; font-size: 1rem; - color: #555; + border: 1px solid #ddd; + border-radius: 8px; } -.post-header strong { - color: #8A3323; +.submit-review-btn { + background-color: #8A3323; + color: white; + padding: 0.6rem 1.2rem; + font-size: 1rem; + border: none; + border-radius: 8px; + cursor: pointer; + font-family: 'Hind Vadodara', sans-serif; } -.post-content p { - font-size: 1.2rem; - color: #333; +.submit-review-btn:hover { + background-color: #6f291d; } -.replies-section { +.reply-section { margin-top: 1rem; - padding-left: 20px; - background-color: #f9f9f9; - border-left: 3px solid #8A3323; + padding-top: 0.5rem; + border-top: 1px solid #ddd; } -.replies-section h3 { - font-size: 1.5rem; - margin-bottom: 1rem; -} - -.reply-item { - margin-bottom: 0.8rem; - font-size: 1.1rem; - color: #333; +.reply-textarea { + width: 100%; + height: 80px; + margin-top: 0.5rem; + padding: 0.5rem; + border: 1px solid #ddd; + border-radius: 8px; + font-size: 1rem; } -.error-message { - text-align: center; - padding: 2rem; - background-color: #ffebee; - border: 1px solid #f44336; +.reply-btn { + margin-top: 0.5rem; + background-color: #8A3323; + color: white; + padding: 0.4rem 0.8rem; + font-size: 0.9rem; + border: none; border-radius: 8px; - color: #d32f2f; + cursor: pointer; + font-family: 'Hind Vadodara', sans-serif; } -.error-message h1, -.error-message h3 { - color: #d32f2f; +.reply-btn:hover { + background-color: #6f291d; } diff --git a/src/pages/CafePage.jsx b/src/pages/CafePage.jsx index 8a2fd53..2860a62 100644 --- a/src/pages/CafePage.jsx +++ b/src/pages/CafePage.jsx @@ -4,7 +4,7 @@ import { useState, useEffect } from 'react'; import { findZipcode } from '../utilities/findZipcode'; import { findCafes } from '../utilities/findCafes'; import { useAuthState } from '../utilities/firebase'; -import { findCafePosts, addReplyToPost } from '../utilities/posts'; +import { findCafePosts, addReplyToPost, addCafePost } from '../utilities/posts'; import Banner from '../components/Banner'; const CafePage = () => { @@ -14,6 +14,8 @@ const CafePage = () => { const [cafes, setCafes] = useState([]); const [cafe, setCafe] = useState(null); const [replyMessages, setReplyMessages] = useState({}); + const [newReview, setNewReview] = useState(''); + const [selectedCategory, setSelectedCategory] = useState('Ambience'); useEffect(() => { if (user && user.email) { @@ -48,17 +50,25 @@ const CafePage = () => { const [posts, postError] = findCafePosts(cafe?.placeId); - if (!cafe) { - return ( -
Sorry, we couldn't find a cafe with the specified ID.
-Sorry, we couldn't find a cafe with the specified ID.
+Location: {cafe.vicinity}