fix favourite page

.firebase/hosting.YnVpbGQ.cache

@@ -1,17 +1,17 @@
-robots.txt,1724015731100,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
-manifest.json,1724015731099,341d52628782f8ac9290bbfc43298afccb47b7cbfcee146ae30cf0f46bc30900
-logo512.png,1724015731099,191fc21360b4ccfb1cda11a1efb97f489ed22672ca83f4064316802bbfdd750e
-index.html,1724015739011,c612393173506fd1359f7f3ce8d7c18ca2232400718c687bc10a0b7eec0f6654
-favicon.png,1724015731098,f931ae131773885fa11c192ca453676d76ec3ee91461099f4086a3bfe99f1856
-favicon.ico,1724015731098,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955
-asset-manifest.json,1724015739011,1a40de597bd79bb44eb1c4eb19082760e904fc4767a3f1fc5e5364a4bc8286ef
-logo192.png,1724015731099,caff018b7f1e8fd481eb1c50d75b0ef236bcd5078b1d15c8bb348453fee30293
-404.html,1724015731097,05cbc6f94d7a69ce2e29646eab13be2c884e61ba93e3094df5028866876d18b3
-static/js/453.4baca2de.chunk.js,1724015739027,444c04d85e9132cbd8e3f3b52607d2f3cfd724bb298696863fd3b7df5086c8df
-static/js/main.0df913bb.js.LICENSE.txt,1724015739027,a828b2f45d4141d4cbe24b182341672bb7dc890999b8da871fe60093330eb34c
-static/css/main.8fdccf9f.css.map,1724015739027,dc8fcf15541eca990725937452ca2e6e960dec2ffa62993b616446449d1f8ee9
-static/js/453.4baca2de.chunk.js.map,1724015739027,c61a9ec87b58a4e74167ef9ee14d46be1ab7569e9145c56f4da7621576a83887
-static/css/main.8fdccf9f.css,1724015739027,30262237c3a42caaca8bb1579ec9a04156b6af68292ddcd514a157d1f2c12dcc
-static/media/swipebite-high-resolution-logo-transparent.e20fec7369c205a2fc22.png,1724015739027,a275e5630a1a7e462249232b6aafe8bc72c899aa487352c08f720a938b59ffb6
-static/js/main.0df913bb.js,1724015739027,beebb93987c2fb545f4cdaf0f78e67ec4f4e7223b70651423b84015d903b8beb
-static/js/main.0df913bb.js.map,1724015739028,558fac133f182c465a0761950b9694fd4e376d96bf50d5f983b062b6105b4a61
+robots.txt,1724878259115,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
+manifest.json,1724878259115,341d52628782f8ac9290bbfc43298afccb47b7cbfcee146ae30cf0f46bc30900
+favicon.png,1724878259114,f931ae131773885fa11c192ca453676d76ec3ee91461099f4086a3bfe99f1856
+index.html,1724878271956,4307cbe7ca7b59fbaa0e2f25afc267b7179f4715ed44f430fa7511320af4bba2
+asset-manifest.json,1724878271956,3d0b5752089d83815c07893852dfc27e9b37d182ab1c3924eb13fcce6a43a041
+logo512.png,1724878259115,191fc21360b4ccfb1cda11a1efb97f489ed22672ca83f4064316802bbfdd750e
+logo192.png,1724878259115,caff018b7f1e8fd481eb1c50d75b0ef236bcd5078b1d15c8bb348453fee30293
+404.html,1724878259114,05cbc6f94d7a69ce2e29646eab13be2c884e61ba93e3094df5028866876d18b3
+favicon.ico,1724878259114,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955
+static/js/main.b435bb79.js.LICENSE.txt,1724878271972,213583a4bbc82ea35e622623b4467992655516d6fdee620c73a5f5440d09bca3
+static/js/453.4baca2de.chunk.js,1724878271972,444c04d85e9132cbd8e3f3b52607d2f3cfd724bb298696863fd3b7df5086c8df
+static/css/main.8fdccf9f.css,1724878271972,30262237c3a42caaca8bb1579ec9a04156b6af68292ddcd514a157d1f2c12dcc
+static/css/main.8fdccf9f.css.map,1724878271972,dc8fcf15541eca990725937452ca2e6e960dec2ffa62993b616446449d1f8ee9
+static/js/453.4baca2de.chunk.js.map,1724878271972,c61a9ec87b58a4e74167ef9ee14d46be1ab7569e9145c56f4da7621576a83887
+static/media/swipebite-high-resolution-logo-transparent.e20fec7369c205a2fc22.png,1724878271972,a275e5630a1a7e462249232b6aafe8bc72c899aa487352c08f720a938b59ffb6
+static/js/main.b435bb79.js,1724878271972,0c49cec37f60223da49dc73e536676ecb78dacec870945229ccbb1b1e04133df
+static/js/main.b435bb79.js.map,1724878271973,bd7534dd921d342976a72b92302d536847c0c9bcb7b57bc49212f712aa0e3fc7

build/asset-manifest.json

@@ -1,16 +1,16 @@
 {
   "files": {
-    "main.css": "/static/css/main.8fdccf9f.css",
-    "main.js": "/static/js/main.0df913bb.js",
+    "main.css": "/static/css/main.2f308a24.css",
+    "main.js": "/static/js/main.a244e512.js",
     "static/js/453.4baca2de.chunk.js": "/static/js/453.4baca2de.chunk.js",
     "static/media/swipebite-high-resolution-logo-transparent.png": "/static/media/swipebite-high-resolution-logo-transparent.e20fec7369c205a2fc22.png",
     "index.html": "/index.html",
-    "main.8fdccf9f.css.map": "/static/css/main.8fdccf9f.css.map",
-    "main.0df913bb.js.map": "/static/js/main.0df913bb.js.map",
+    "main.2f308a24.css.map": "/static/css/main.2f308a24.css.map",
+    "main.a244e512.js.map": "/static/js/main.a244e512.js.map",
     "453.4baca2de.chunk.js.map": "/static/js/453.4baca2de.chunk.js.map"
   },
   "entrypoints": [
-    "static/css/main.8fdccf9f.css",
-    "static/js/main.0df913bb.js"
+    "static/css/main.2f308a24.css",
+    "static/js/main.a244e512.js"
   ]
 }

build/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet"><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Swipact</title><script defer="defer" src="/static/js/main.0df913bb.js"></script><link href="/static/css/main.8fdccf9f.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet"><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Swipact</title><script defer="defer" src="/static/js/main.a244e512.js"></script><link href="/static/css/main.2f308a24.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

src/App.css

@@ -258,3 +258,10 @@ input{
   }
 }
 
+.ellipsisl3{
+overflow: hidden;
+text-overflow: ellipsis;
+display: -webkit-box;
+-webkit-line-clamp: 3;
+-webkit-box-orient: vertical;
+}

src/Components/FavouriteDishes.jsx

@@ -12,31 +12,27 @@ import { Link } from 'react-router-dom';
 
 
 function FavouriteDishes() {
- const {favoriteDishes} = useContext(FavoriteContext)
-
+const {favoriteDishes} = useContext(FavoriteContext)
+console.log(favoriteDishes)
     const displayList = (list) =>
         list.map(dish=>
             <>
                 <Grid item xs={6}>
-                    <Link to={`/restaurant/${dish.restaurant}`}>
+                    <Link to={`/restaurant/${dish.restaurantID}`}>
                     <Card sx={{ maxWidth: 200 }}>
                         <CardActionArea>
                             <CardMedia
                                 component="img"
                                 height="140"
-                                image={dish.img}
+                                image={dish.image}
                                 alt="green iguana" />
                             <CardContent>
-                                <Typography gutterBottom variant="h5" component="div">
-                                    {dish.name}
-                                </Typography>
                                 <Typography variant="body2" color="text.secondary">
-                                    {dish.restaurant}
+                                    {dish.restaurantData.name}
                                 </Typography>
                                 <div className="inline">
-                                    <Rating name="disabled" value={4} />
+                                    <Rating name="disabled" value={dish.restaurantData.rating} />
                                 </div>
-                                <h5>400m from you</h5>
                             </CardContent>
                         </CardActionArea>
                     </Card>

src/Components/HighlightedDish.jsx

@@ -29,22 +29,14 @@ function HighlightedDish() {
             const loadedFoodList = await Promise.all(menuItem.docs.map(async (doc) => {
               const docData = doc.data();
 
-              // const imageRef = ref(storage, docData.img);
-              // const imageUrl = await getDownloadURL(imageRef);
-
               const restaurantID = doc.ref.parent.parent.id;
               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 reviewsCount = await getCountFromServer(reviewsRef)
-              // const reviewsAverage = await getAggregateFromServer(reviewsRef, {averageRating: average("rating")})
-
               return { ...docData, id: doc.id, restaurantID: restaurantID, restaurantData};
             }));
               setFoodList(loadedFoodList);
-              // console.log(foodListWithUrls)
           } catch (err) {
             console.error(err);
           } finally {
@@ -111,7 +103,7 @@ function HighlightedDish() {
                 <h4>{dish.restaurantData.cuisine}</h4>
                 <div className="inline">
                   <Rating name="disabled" value={dish.restaurantData.rating} readOnly/>
-                  <h6>{dish.restaurantData.reviews} reviews</h6> 
+                  <h6>{dish.restaurantData.review_count} reviews</h6> 
                 </div>
               </div>
           </Link>

src/Components/Reviews.jsx

@@ -1,18 +1,37 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Rating } from '@mui/material'
+import Box from '@mui/material/Box';
 
 function Reviews({reviews}) {
+    const [clickedIndex, setClickedIndex] = useState(null)
+    const expand = (index) =>{
+        setClickedIndex(prevIndex => (prevIndex === index? null: index))
+    }
 return (
     <div>
         <div>
             {reviews.map((review, index)=>(
                 <div key={index}>
-                    <div className="inline">
-                        <h5>{review.name}</h5>
-                        <Rating name="disabled" value={review.rating} readOnly/>
-                    </div>
-                    <p>{review.review_text}</p>
-                    <br />
+                    <Box         
+                    component="span"
+                    sx={(theme) => ({
+                    display: 'block',
+                    p: 1,
+                    m: 1,
+                    bgcolor: '#fff',
+                    color: 'grey.800',
+                    border: '1px solid',
+                    borderColor: 'grey.300',
+                    borderRadius: 2,
+                    fontSize: '0.875rem',
+                    })}
+                    onClick={()=>expand(index)}>
+                        <div className="inline">
+                            <h5>{review.name}</h5>
+                            <Rating name="disabled" value={review.rating} readOnly/>
+                        </div>
+                        <p className={clickedIndex === index? '':'ellipsisl3'}>{review.review_text}</p>
+                    </Box>
                 </div>
             ))}
         </div>