From 590d9d5e3774baf3dcd2c6cb7b00f3ebc67ce4da Mon Sep 17 00:00:00 2001 From: Mark Fortes Date: Fri, 8 Nov 2024 14:39:55 -0600 Subject: [PATCH] posting, styling --- package-lock.json | 42 +++++++++++++++ package.json | 1 + src/dummy.json | 10 ---- src/pages/CafePage.css | 113 ++++++++++++++++++---------------------- src/pages/CafePage.jsx | 66 +++++++++++++++++++---- src/utilities/posts.jsx | 27 +++++++++- 6 files changed, 175 insertions(+), 84 deletions(-) diff --git a/package-lock.json b/package-lock.json index 61170d7..f9a5630 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "firebase-admin": "^12.7.0", "react": "^18.3.0", "react-dom": "^18.3.0", + "react-router-dom": "^6.28.0", "socket.io": "^4.8.1", "socket.io-client": "^4.8.1" }, @@ -1750,6 +1751,15 @@ "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==", "license": "BSD-3-Clause" }, + "node_modules/@remix-run/router": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz", + "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==", + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.22.4", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz", @@ -5182,6 +5192,38 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.28.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz", + "integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.21.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.28.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz", + "integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.21.0", + "react-router": "6.28.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/readable-stream": { "version": "3.6.2", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", diff --git a/package.json b/package.json index 97b701c..e6cd875 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "firebase-admin": "^12.7.0", "react": "^18.3.0", "react-dom": "^18.3.0", + "react-router-dom": "^6.28.0", "socket.io": "^4.8.1", "socket.io-client": "^4.8.1" }, 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 ( -
-

Cafe not found

-

Sorry, we couldn't find a cafe with the specified ID.

-
- ); - } + const handleReviewSubmit = async () => { + if (newReview.trim() && user) { + const review = { + content: newReview, + category: selectedCategory, + email: user.email, + date: Date.now(), + replies: {} + }; - const postItems = posts ? Object.entries(posts) : []; - const sortedPosts = postItems.sort((a, b) => new Date(b[1].date) - new Date(a[1].date)); + const error = await addCafePost(cafe.placeId, review); + if (error) { + console.error('Error adding review:', error); + } else { + setNewReview(''); + setSelectedCategory('Ambience'); + } + } + }; const handleReplyChange = (e, postId) => { setReplyMessages((prev) => ({ @@ -82,6 +92,18 @@ const CafePage = () => { } }; + if (!cafe) { + return ( +
+

Cafe not found

+

Sorry, we couldn't find a cafe with the specified ID.

+
+ ); + } + + const postItems = posts ? Object.entries(posts) : []; + const sortedPosts = postItems.sort((a, b) => new Date(b[1].date) - new Date(a[1].date)); + return (
@@ -91,6 +113,28 @@ const CafePage = () => {

Location: {cafe.vicinity}

+
+

Share a Review

+