feat: implement feedback in filters and map view

iic2154-uc-cl · Nov 5, 2024 · 973f658 · 973f658
1 parent f1d6d96
commit 973f658
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 28 deletions.
diff --git a/src/components/Filter.jsx b/src/components/Filter.jsx
@@ -180,26 +180,34 @@ const Filter = ({ onCategoryChange, onSubCategoryChange, onRatingChange, onPrice
 
         {/* linea de separación */}
         <hr/>
+        {/* Solo se muestra si categoría: Propiedad o Camping */}
+        {selectedIndustries.includes('Propiedad') || selectedIndustries.includes('Camping') ? (
+            <>
+            <h3>Precio</h3>
+            <div className="price-list">
+                {/* rango de precio: 0 - 100000 */}
+                <Slider
+                    value={rangePrice}
+                    onChange={handlePriceChange}
+                    valueLabelDisplay="off"
+                    min={0}
+                    max={100000}
+                    step={1000}
+                    style={{ width: '100%', color: '#fa7e02' }}
+                />
+                <span className='price-text'>
+                    <span>{`$${rangePrice[0]}`}</span>
+                    <span>{' - '}</span>
+                    <span>{`$${rangePrice[1]}`}</span>
+                </span>
+
+            </div>
+            </>
+        )
+        : null}
+
+        {/* linea de separación */}
 
-        <h3>Precio</h3>
-        <div className="price-list">
-            {/* rango de precio: 0 - 100000 */}
-            <Slider
-                value={rangePrice}
-                onChange={handlePriceChange}
-                valueLabelDisplay="off"
-                min={0}
-                max={100000}
-                step={1000}
-                style={{ width: '100%', color: '#fa7e02' }}
-            />
-            <span className='price-text'>
-                <span>{`$${rangePrice[0]}`}</span>
-                <span>{' - '}</span>
-                <span>{`$${rangePrice[1]}`}</span>
-            </span>
-
-        </div>
 
         <div className="buttons">
             <button id="showResultsBtn" className="show-results-btn" onClick={handleReset}>

diff --git a/src/components/NewPublicacion.jsx b/src/components/NewPublicacion.jsx
@@ -1,20 +1,26 @@
 import React from 'react'
 import '../styles/newmapa.css';
+import { useNavigate } from 'react-router-dom';
 
-const NewPublicacion = ({ title, description, image, price, rating, location, category, subcategory }) => {
+const NewPublicacion = ({ title, description, image, price, rating, location, category, subcategory, id }) => {
+
+  const navigate = useNavigate();
   return (
     <div className='publicacion'>
-        <img src={image} alt="imagen" />
+        {/* click en la imagen para ver la publicación */}
+
+        <img src={image} alt="imagen" onClick={() => navigate(`/publicacion/${id}`)} />
+
         <div className='publicacion-info'>
             <div>
                 <p className='publicacion-titulo'>{title}</p>
                 <p className='publicacion-review'>{rating} estrellas</p>
                 <div className='publicacion-caracteristicas'>
-                    {// si precio = 0, mostrar "Gratis", de lo contrario, mostrar el precio 
-                    price === 0 ? <div className='caracteristica'>Gratis</div> : 
-                    <div className='caracteristica'>${price}</div>
+                    {// Mostrar si categoría: Propiedad o Camping
+                        category === 'Propiedad' || category === 'Camping' ?
+                        <div className='caracteristica'>${price} por noche</div> :
+                        null
                     }
-                    <div className='caracteristica'>{category}</div>
                     <div className='caracteristica'>{subcategory}</div>
                     <div className='caracteristica'>{location}</div>
                 </div>

diff --git a/src/pages/newMapa.jsx b/src/pages/newMapa.jsx
@@ -35,9 +35,9 @@ const NewMapa = () => {
         const matchesRating = selectedRating === 0 || publicacion.rating >= selectedRating;
         // Filtra por rango de precio
         const matchesPrice = publicacion.precio >= rangePrice[0] && publicacion.precio <= rangePrice[1];
-        // Filtra por término de búsqueda
-        const matchesSearch = searchTerm === '' || publicacion.nombre.toLowerCase().includes(searchTerm.toLowerCase());
-
+        // Filtra por término de búsqueda. Nombre o comuna
+        const matchesSearch = searchTerm === '' || publicacion.nombre.toLowerCase().includes(searchTerm.toLowerCase()) || publicacion.direccion.toLowerCase().includes(searchTerm.toLowerCase());
+    
         return matchesCategory && matchesSubCategory && matchesRating && matchesPrice && matchesSearch;
     });
 

diff --git a/src/styles/calendario.css b/src/styles/calendario.css
@@ -28,6 +28,11 @@
     width: 100%;
   }
 
+  .event-image-container {
+    display: flex;
+    flex-direction: column;
+  }
+
   .event-image-container, .event-text-container {
     max-width: 35%;
     padding: 20px;
@@ -210,6 +215,7 @@
     border-radius: 8px;
     cursor: pointer;
     transition: 0.6s;
+    max-width: fit-content;
 }
 
 .event-subcategory {