posting, styling

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"
   },

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"
     }
 }

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;
 }

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 (
-            <div className="error-message">
-                <h1>Cafe not found</h1>
-                <p>Sorry, we couldn't find a cafe with the specified ID.</p>
-            </div>
-        );
-    }
+    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 (
+            <div className="error-message">
+                <h1>Cafe not found</h1>
+                <p>Sorry, we couldn't find a cafe with the specified ID.</p>
+            </div>
+        );
+    }
+
+    const postItems = posts ? Object.entries(posts) : [];
+    const sortedPosts = postItems.sort((a, b) => new Date(b[1].date) - new Date(a[1].date));
+
     return (
         <div>
             <Banner cafes={cafes} />
@@ -91,6 +113,28 @@ const CafePage = () => {
                     <p><strong>Location:</strong> {cafe.vicinity}</p>
                 </div>
 
+                <div className="review-section">
+                    <h2>Share a Review</h2>
+                    <textarea
+                        placeholder="Write your review..."
+                        value={newReview}
+                        onChange={(e) => setNewReview(e.target.value)}
+                        className="review-textarea"
+                    />
+                    <select
+                        value={selectedCategory}
+                        onChange={(e) => setSelectedCategory(e.target.value)}
+                        className="category-dropdown"
+                    >
+                        <option value="Ambience">Ambience</option>
+                        <option value="Seating Availability">Seating Availability</option>
+                        <option value="Outlet Availability">Outlet Availability</option>
+                        <option value="Noise Level">Noise Level</option>
+                        <option value="Food and Drink">Food and Drink</option>
+                    </select>
+                    <button onClick={handleReviewSubmit} className="submit-review-btn">Submit Review</button>
+                </div>
+
                 {sortedPosts && sortedPosts.length > 0 ? (
                     <div className="posts-section">
                         <h2>Posts</h2>

src/utilities/posts.jsx

@@ -1,13 +1,13 @@
 import { useState, useEffect } from 'react';
-import { onValue, query, orderByChild, equalTo, ref, get, update } from 'firebase/database';
+import { onValue, query, orderByChild, equalTo, ref, get, update, set, push } from 'firebase/database';
 import { database } from './firebase';
 
 export const findCafePosts = (cafeId) => {
     const [data, setData] = useState(null);
     const [error, setError] = useState(null);
 
     useEffect(() => {
-        if (!cafeId) return
+        if (!cafeId) return;
 
         const postsRef = ref(database, `/posts`);
         const postsQuery = query(postsRef, orderByChild('cafeId'), equalTo(cafeId));
@@ -60,3 +60,26 @@ export const addReplyToPost = async (postId, userId, replyMessage) => {
         return error.message || 'Error adding reply';
     }
 };
+
+export const addCafePost = async (cafeId, post) => {
+    try {
+        const postsRef = ref(database, `/posts`);
+        const newPostRef = push(postsRef);
+
+        const newPost = {
+            cafeId: cafeId,
+            category: post.category,
+            content: post.content,
+            date: post.date,
+            email: post.email,
+            replies: post.replies || {}
+        };
+
+        await set(newPostRef, newPost);
+
+        return null;
+    } catch (error) {
+        console.error('Error adding cafe post:', error);
+        return error.message || 'Error adding post';
+    }
+};