Merge pull request #364 from ReDI-School/fix/filterBtnAppearence

Update FilteredPlacesPage with new features to be all components func…

src/App.jsx

@@ -1,6 +1,6 @@
 import axios from "axios";
 import { useEffect, useState } from "react";
-import { Link, useOutletContext, useSearchParams } from "react-router-dom";
+import { useOutletContext, useSearchParams } from "react-router-dom";
 import "./App.css";
 import CategoryTabs from "./components/CategoryTabs/CategoryTabs";
 import ProductCard from "./components/ProductCard/ProductCard";

src/pages/FilteredPlacesPage/FilteredPlacesPage.jsx

@@ -1,53 +1,96 @@
-import { useState, useEffect } from "react";
-import ProductCard from "../../components/ProductCard/ProductCard";
-import { BASE_URL } from "../../constants/constants";
 import axios from "axios";
-import { Link, useParams, useSearchParams } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { useOutletContext, useSearchParams } from "react-router-dom";
+import "../../App.css";
 import CategoryTabs from "../../components/CategoryTabs/CategoryTabs";
+import ProductCard from "../../components/ProductCard/ProductCard";
 import CalendarToggle from "../../components/calendarToggle/CalendarToggle";
+import { BASE_URL } from "../../constants/constants";
+import PriceRangeModal from "../../components/PriceRangeModal/PriceRangeModal";
+import useOutsideClick from "../../hooks/useOutsideClick";
+
+
+function FilteredPlacesPage() {
+  const [places, setPlaces] = useState([]);
+  const [selectPlaceId, setSelectPlaceId] = useState(null);
+  const [searchParams] = useSearchParams();
+  const { modalIsVisible, setModalIsVisible, closeModal } = useOutletContext();
+  const [isModalOpen, setModalOpen] = useState(false);
+  const [histogramData, setHistogramData] = useState([]);
+
+  const toggleModal = () => setModalOpen((prev) => !prev);
+
+  const priceRangeRef = useOutsideClick(() => setModalOpen(false))
+
+	useEffect(() => {
+    if (isModalOpen) {
+      document.body.classList.add('modalOpen');
+    } else {
+      document.body.classList.remove('modalOpen');
+    }
+  }, [isModalOpen]);
+
+  useEffect(() => {
+    axios
+      .get(`${BASE_URL}places`, {params: searchParams})
+      .then((response) => setPlaces(response?.data))
+      .catch((error) => console.error(`Something went wrong. ${error.message}.`));
+  }, [searchParams]);
+
+  const handlePlaceClick = (placeId) => {
+    setSelectPlaceId(placeId);
+    console.log("Selected Place ID:", placeId);
+
+    axios
+      .post(`${BASE_URL}savePlace`, { placeId })
+      .then((response) => {
+        console.log("Place ID sent successfully:", response.data);
+      })
+      .catch((error) => {
+        console.error("Error sending place ID:", error.message);
+      });
+  };
+
+  return (
+    <div> 
+      <div>
+        <CalendarToggle />
+      </div>
+
+      <CategoryTabs toggleModal={toggleModal} setHistogramData={setHistogramData} />
+
+      <div className="grid">
+        {places.map((place) => {
+          if (!place.id) return null;
 
-const FilteredPlacesPage = () => {
-	const [filteredPlaces, setFilteredPlaces] = useState([]);
-	const {region} = useParams();
-	const [searchParams] = useSearchParams();
-
-	useEffect(()=> {
-	axios.get(`${BASE_URL}s/${region}/homes`, {
-		params: searchParams
-	})
-	.then(response => {
-		setFilteredPlaces(response?.data);
-	})
-	.catch(error => console.error(`Something went wrong. ${error.message}.`))
-	}, [region, searchParams])
-
-	return (
-		<>
-		    <div>
-       			<CalendarToggle />
-      		</div>
-			<CategoryTabs />  
-			<div className="grid">
-				{
-					filteredPlaces.map((filteredPlace) => {	
-						return (
-							<ProductCard
-							key={filteredPlace.id}
-							images={filteredPlace.images}
-							// onClick={() => handlePlaceClick(filteredPlace.id)} // Optional: Handle click here if needed
-						>
-							<Link to={`/rooms/${filteredPlace.id}`}>
-							<h2 className="title">{filteredPlace.title}</h2>
-							<p className="host">{filteredPlace.host}</p>
-							<p className="price">{filteredPlace.price}</p>
-							</Link>
-						</ProductCard>
-						)
-					})
-				}
-			</div>
-		</>
-	)
+          return (
+            <ProductCard
+              key={place.id}
+              images={place.images}
+              linkTo={`/rooms/${place.id}`}
+              onClick={() => handlePlaceClick(place.id)}
+              modalIsVisible={modalIsVisible}
+              setModalIsVisible={setModalIsVisible}
+              closeModal={closeModal}
+            >
+            <h2 className="title">{place.title}</h2>
+            <p className="host">{place.host}</p>
+            <p className="price">{place.price}</p>
+            </ProductCard>
+          );
+        })}
+      </div>
+      {isModalOpen && (
+        <PriceRangeModal
+          isOpen={isModalOpen}
+          className="overlay"
+          onClose={toggleModal}
+          histogramData={histogramData}
+          priceRangeRef={priceRangeRef}
+        />
+      )}
+    </div>
+  );
 }
 
-export default FilteredPlacesPage;
+export default FilteredPlacesPage;