fetch data from firebase

mulundapm · Jul 21, 2024 · bee93d7 · bee93d7
1 parent 0665010
commit bee93d7
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 43 deletions.
diff --git a/src/App.css b/src/App.css
@@ -162,7 +162,6 @@ a{
 
 .primary-button{
   background-color: #F4CE14;
-  margin: 20px;
   padding: 10px 20px;
   border-radius: 16px;
   border: none;

diff --git a/src/Components/ImageSlider.jsx b/src/Components/ImageSlider.jsx
@@ -1,20 +1,31 @@
-import React from 'react'
-import GreekSalad from '../Assets/Food images/Greek Salad.jpeg'
-import Brushetta from '../Assets/Food images/Brushetta.jpg'
-import GrillFish from '../Assets/Food images/Grill Fish.jpg'
-import ModernHummusTrio from '../Assets/Food images/Modern Hummus Trio.jpeg'
-import BabaGanoush from '../Assets/Food images/Baba Ganoush.jpg'
+import React, { useEffect, useState } from 'react'
+import { getDownloadURL, ref } from 'firebase/storage';
+import { storage } from '../config/firebase'
+import { getDoc , collection, docs , getDocs, getAggregateFromServer, getCountFromServer, average} from 'firebase/firestore'
 
 
-function ImageSlider() {
+function ImageSlider({menuItems}) { 
+  // const [itemImages, setItemImages] = useState(null)
+  // useEffect( ()=>{
+  //   const loadMenuItems = async () =>{
+  //     setItemImages(menuItem)
+  //     const images = menuItem.docs.map(doc => doc.img)
+  //     const imageRef = ref(storage, menuItem.img);
+  //     const imageUrl = await getDownloadURL(imageRef);
+  //   }
+  //   loadMenuItems();
+  // }, [])
+  console.log({menuItems})
   return (
-    <div className='slider-container'>
-        <label htmlFor=""></label>
-        <img src={GreekSalad} alt="Greek Salad" className='slider-image'/>
-        <img src={Brushetta} alt="Brushetta" className='slider-image'/>
-        <img src={GrillFish} alt="GrillFish" className='slider-image'/>
-        <img src={ModernHummusTrio} alt="ModernHummusTrio" className='slider-image'/>
-        <img src={BabaGanoush} alt="BabaGanoush" className='slider-image'/>
+    <div>
+      <h2>{menuItems.img}</h2>
+          {/* {menuImages.map((image, index) => (
+            <div key={index}>
+              <h2>{image.img}</h2>
+            </div>
+          ))}
+      <div className='slider-container'>
+      </div> */}
     </div>
   )
 }

diff --git a/src/Components/RestaurantDetails.jsx b/src/Components/RestaurantDetails.jsx
@@ -6,7 +6,8 @@ import { Rating } from '@mui/material'
 import ImageSlider from '../Components/ImageSlider'
 import Reviews from '../Components/Reviews'
 import RestaurantMap from '../Components/RestaurantMap'
-import { getDoc , collection, doc as firestoreDoc, getDocs} from 'firebase/firestore'
+import { getDoc , collection, doc as firestoreDoc, getDocs, getAggregateFromServer, getCountFromServer, average} from 'firebase/firestore'
+import { Link } from 'react-router-dom'
 import { db } from '../config/firebase'
 
 function RestaurantDetails() {
@@ -18,19 +19,35 @@ function RestaurantDetails() {
     useEffect(() => {
     const fetchRestaurant = async () => {
         try {
-        const restaurantRef = firestoreDoc(db, 'restaurants', restaurantID);
-        const restaurantDoc = await getDoc(restaurantRef);
-        const reviewsRef = collection(db, 'restaurants', restaurantID, 'reviews')
-        const reviewDoc = await getDoc(restaurantRef);
-        const menuItemRef = collection (db, 'restaurants', restaurantID, 'menu-items')
-        setThisRestaurant(restaurantDoc.data(), );
+            const restaurantRef = firestoreDoc(db, 'restaurants', restaurantID);
+            const restaurantDoc = await getDoc(restaurantRef);
+            const restaurantData = restaurantDoc.exists() ? restaurantDoc.data() : {};
+
+            const reviewsRef = collection(db, 'restaurants', restaurantID, 'reviews');
+            const reviewSnap = await getDocs(reviewsRef);
+            const reviewsData = reviewSnap.docs.map(doc => doc.data());
+
+            const menuItemRef = collection(db, 'restaurants', restaurantID, 'menu-items')
+            const menuItemSnap = await getDocs(menuItemRef)
+            const menuItemData = menuItemSnap.docs.map(doc => doc.data())
+
+            const reviewsCount = await getCountFromServer(reviewsRef)
+            const reviewsAverage = await getAggregateFromServer(reviewsRef, {averageRating: average("rating")})
+
+
+            setThisRestaurant({... restaurantData, 
+                reviews: reviewsData,  
+                menuItems: menuItemData, 
+                counts: reviewsCount.data().count, 
+                ratings: reviewsAverage.data().averageRating});
         } catch (err) {
         console.error(err);
         } finally {
         setLoading(false);
         }
     };
     fetchRestaurant();
+    console.log(thisRestaurant)
     }, [restaurantID]);
 
     if (loading) {
@@ -41,21 +58,22 @@ function RestaurantDetails() {
     return <div>Restaurant not found</div>;
     }
 
+    console.log(thisRestaurant)
     return (
     <div>
             <img src={restaurantImage} alt="Restaurant Image" className='restaurant-image center'/>
             <h2>{thisRestaurant.name}</h2>
             <h4>{thisRestaurant.cuisine}</h4>
             <div className="inline">
-                <Rating name="disabled" value={3}/>
-                <h6>48 reviews</h6> 
+                <Rating name="disabled" value={thisRestaurant.ratings}/>
+                <h6>{thisRestaurant.counts} Reviews</h6> 
             </div>
             <h2>Featured Dishes</h2>
-            <ImageSlider/>
+            <ImageSlider menuItems={thisRestaurant.menuItems}/>
             <div className="container center">
-                <button>Reserve a table</button>
+                <Link to={thisRestaurant.website}><button className='primary-button'>Reserve a table</button></Link>
             </div>
-            <Reviews/>
+            <Reviews reviews={thisRestaurant.reviews}/>
             <RestaurantMap/>
             </div>
     )

diff --git a/src/Components/Reviews.jsx b/src/Components/Reviews.jsx
@@ -1,25 +1,23 @@
 import React from 'react'
 import { Rating } from '@mui/material'
 
-function Reviews() {
-  return (
+function Reviews({reviews}) {
+return (
     <div>
-        <div className="review-container">
-            <div className="inline">
-                <h5>Family friendly</h5>
-                <Rating name="disabled" value={5}/>
-            </div>
-            <p>This place is amazing. Their menu is children friendly as well. Have something for poeple of all ages!</p>
-        </div>
-        <div className="review-container">
-            <div className="inline">
-                <h5>Family friendly</h5>
-                <Rating name="disabled" value={5}/>
-            </div>
-            <p>This place is amazing. Their menu is children friendly as well. Have something for poeple of all ages!</p>
+        <div>
+            {reviews.map((review, index)=>(
+                <div key={index}>
+                    <div className="inline">
+                        <h5>{review.title}</h5>
+                        <Rating name="disabled" value={review.rating}/>
+                    </div>
+                    <p>{review.description}</p>
+                    <br />
+                </div>
+            ))}
         </div>
     </div>
-  )
+)
 }
 
 export default Reviews