From 467f3af2911346280372f738fbca8005ef0971be Mon Sep 17 00:00:00 2001 From: 006080 Date: Mon, 25 Nov 2024 20:28:34 +0100 Subject: [PATCH 1/4] PriceRange-PopUp --- src/App.jsx | 4 - src/components/FilterButton/FilterButton.jsx | 65 +++++- .../FilterButton/FilterButton.module.css | 10 + src/components/Header/Header.module.css | 2 +- .../PriceRangeModal/PriceRangeModal.jsx | 91 ++++++++ .../PriceRangeModal.module.css | 210 ++++++++++++++++++ .../priceRange/PriceRangeFilter.css | 67 +++--- .../priceRange/PriceRangeFilter.jsx | 114 +++++----- 8 files changed, 460 insertions(+), 103 deletions(-) create mode 100644 src/components/PriceRangeModal/PriceRangeModal.jsx create mode 100644 src/components/PriceRangeModal/PriceRangeModal.module.css diff --git a/src/App.jsx b/src/App.jsx index a580c98f..ad9d1ab9 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -5,9 +5,7 @@ import "./App.css"; import CategoryTabs from "./components/CategoryTabs/CategoryTabs"; import ProductCard from "./components/ProductCard/ProductCard"; import CalendarToggle from "./components/calendarToggle/CalendarToggle"; -import PriceRangeFilter from "./components/priceRange/PriceRangeFilter"; import { BASE_URL } from "./constants/constants"; -import FilterButton from "./components/FilterButton/FilterButton"; function App() { @@ -62,8 +60,6 @@ function App() { - -
{places.map((place) => { if (!place.id) return null; diff --git a/src/components/FilterButton/FilterButton.jsx b/src/components/FilterButton/FilterButton.jsx index 35aba5d9..42751fc8 100644 --- a/src/components/FilterButton/FilterButton.jsx +++ b/src/components/FilterButton/FilterButton.jsx @@ -1,19 +1,60 @@ -import React from 'react' -import styles from "./FilterButton.module.css" +import React, { useState, useEffect } from "react"; +import styles from "./FilterButton.module.css"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faSliders } from "@fortawesome/free-solid-svg-icons"; +import PriceRangeModal from "../PriceRangeModal/PriceRangeModal"; const FilterButton = () => { - return ( + const [isModalOpen, setModalOpen] = useState(false); + const [histogramData, setHistogramData] = useState([]); -
-
- -
Filters
-
-
+ // Simulating dynamic data fetching or processing + useEffect(() => { + // Replace this logic with actual data processing from the provided file or API + const generateHistogramData = () => { + const minPrice = 9; + const maxPrice = 310; + const bins = 6; // Number of bins for histogram - ) -} + const binSize = Math.ceil((maxPrice - minPrice) / bins); + const mockData = Array.from({ length: bins }, (_, index) => { + const from = minPrice + index * binSize; + const to = Math.min(from + binSize - 1, maxPrice); + const count = Math.floor(Math.random() * 20) + 1; // Random count for demo -export default FilterButton \ No newline at end of file + return { from, to, count }; + }); + + return mockData; + }; + + const data = generateHistogramData(); + setHistogramData(data); + }, []); + + const toggleModal = () => setModalOpen((prev) => !prev); + + return ( + <> + {/* Filter button */} +
+
+ +
Filters
+
+
+ + {/* Modal for price range */} + {isModalOpen && ( + + )} + + ); +}; + +export default FilterButton; diff --git a/src/components/FilterButton/FilterButton.module.css b/src/components/FilterButton/FilterButton.module.css index a9b1ccf3..933fac46 100644 --- a/src/components/FilterButton/FilterButton.module.css +++ b/src/components/FilterButton/FilterButton.module.css @@ -13,6 +13,16 @@ transition: background-color 0.3s, border-color 0.3s; } +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */ + z-index: 1000; + } + .filterButton:hover { background-color: rgb(240, 240, 240); border-color: rgb(96, 96, 96); diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css index 5c00e68e..209ad7bc 100644 --- a/src/components/Header/Header.module.css +++ b/src/components/Header/Header.module.css @@ -1,7 +1,7 @@ .headerSectionContainer { width: 100%; position: relative; - z-index: 1000; + z-index: 900; } .header { diff --git a/src/components/PriceRangeModal/PriceRangeModal.jsx b/src/components/PriceRangeModal/PriceRangeModal.jsx new file mode 100644 index 00000000..15887941 --- /dev/null +++ b/src/components/PriceRangeModal/PriceRangeModal.jsx @@ -0,0 +1,91 @@ +import React, { useState } from "react"; +import styles from "./PriceRangeModal.module.css"; +import PriceRangeFilter from "../priceRange/PriceRangeFilter"; +import { CloseIcon } from "../../icons/CloseIcon"; + +const PriceRangeModal = ({ isOpen, onClose, histogramData, className }) => { + const [bedrooms, setBedrooms] = useState(0); // State for Bedrooms + const [beds, setBeds] = useState(0); // State for Beds + const [bathrooms, setBathrooms] = useState(0); // State for Bathrooms + + // Increment and Decrement Handlers + const increment = (setter, value) => setter(value + 1); + const decrement = (setter, value) => { + if (value > 0) setter(value - 1); + }; + + if (!isOpen) return null; + + return ( +
+
+ {/* Header Section */} +
+
+ +
+

Filters

+
+ +
+ +
+ + {/* Rooms and Beds Section */} +
+

Rooms and Beds

+ + {/* Bedrooms Section */} +
+
+

Bedrooms

+
+
+ +

{bedrooms || "Any"}

+ +
+
+ + {/* Beds Section */} +
+
+

Beds

+
+
+ +

{beds || "Any"}

+ +
+
+ + {/* Bathrooms Section */} +
+
+

Bathrooms

+
+
+ +

{bathrooms || "Any"}

+ +
+
+
+ + {/* Submit Section */} +
+ + +
+
+
+ ); +}; + +export default PriceRangeModal; diff --git a/src/components/PriceRangeModal/PriceRangeModal.module.css b/src/components/PriceRangeModal/PriceRangeModal.module.css new file mode 100644 index 00000000..67dab23d --- /dev/null +++ b/src/components/PriceRangeModal/PriceRangeModal.module.css @@ -0,0 +1,210 @@ +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.6); + /* Semi-transparent black */ + z-index: 1000; +} + +.submitSection { + padding-left: 0px; + padding-right: 10px; + padding-top: 20px; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.section { + justify-content: space-between; + display: flex; + flex-direction: row; +} + +.increment { + display: flex; + gap: 20px; + align-items: center; + justify-content: center; + flex-direction: row; +} + +.sub { + font-weight: 400; + width: 2.5rem; + text-align: center; +} + +.label { + display: flex; + flex-direction: row; +} + +.buttonContainer { + display: flex; + flex-direction: row; + flex: 1; + align-items: center; +} + +button.button { + border-radius: 100%; + background-color: white; + color: black; + border: 1px solid rgb(176, 176, 176); + width: 1.2rem; + height: 1.2rem; + padding: .938rem; + text-align: center; + display: inline-flex; + font-size: 1rem; + flex-direction: column; + justify-content: center; + align-items: center; + text-decoration: none; +} + +button.button:hover { + cursor: pointer; + border-color: var(--primary); +} + +button.buttonDisable { + border-radius: 100%; + background-color: white; + color: rgb(235, 235, 235); + border: 1px solid rgb(235, 235, 235); + width: 1.2rem; + height: 1.2rem; + padding: .938rem; + text-align: center; + display: inline-flex; + font-size: 16px; + flex-direction: column; + justify-content: center; + align-items: center; + text-decoration: none; +} + +button.buttonDisable:hover { + cursor: not-allowed; +} + +.button { + border-radius: 100%; + background-color: white; + color: black; + border: 1px solid rgb(176, 176, 176); + width: 1.2rem; + height: 1.2rem; + padding: .938rem; + text-align: center; + display: inline-flex; + font-size: 1rem; + flex-direction: column; + justify-content: center; + align-items: center; + text-decoration: none; +} + +.subtitle { + margin-bottom: 10px; + font-weight: 400; + font-size: medium; +} + +.title { + margin: 0; + font-size: 18px; + font-weight: 500; + margin-top: 20px; + +} + +.priceModal { + position: fixed; + width: 30vw; + flex-direction: column; + position: fixed; + display: flex; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 30px; + padding-top: 10px; + background-color: #fff; + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + z-index: 2000; +} + +.priceModal .header { + padding-top: 0; + display: flex; + align-items: center; + justify-content: center; + position: relative; + /* Position to allow absolute positioning of CloseIcon */ + padding: 10px; + /* Add vertical padding */ + border-bottom: 1px solid #ccc; + /* Optional border for header separation */ +} + +.priceModal .header h4 { + font-size: 18px; + font-weight: bold; + margin: 0; + /* Remove default margin */ + text-align: center; +} + +.customCloseWrapper { + position: absolute; + left: 10px; + top: 50%; + transform: translateY(-50%); + cursor: pointer; + font-size: 20px; + display: flex; + align-items: center; + /* If the icon is not centered vertically */ + justify-content: center; +} + +.roomsSection { + border-bottom: 1px solid #e7e7e7; + /* Optional border for header separation */ + padding: 10px; +} + +.range { + border-bottom: 1px solid #e7e7e7; +} + +.buttonModal { + color: aliceblue; + max-height: 50px; + background-color: rgb(0, 0, 0); +} + +.clearAll:hover { + border: none; + background-color: rgb(236, 236, 236); +} + +h4 { + text-align: left; +} + +@media (max-width: 768px) { + .priceModal { + position: fixed; + width: 100vw; + + } + +} \ No newline at end of file diff --git a/src/components/priceRange/PriceRangeFilter.css b/src/components/priceRange/PriceRangeFilter.css index e349266f..c2578b28 100644 --- a/src/components/priceRange/PriceRangeFilter.css +++ b/src/components/priceRange/PriceRangeFilter.css @@ -1,12 +1,13 @@ .price-range-container { position: relative; - width: 30%; - padding: 20px; + padding: 10px; color: #fff; } h2 { margin-bottom: 10px; + font-size: larger; + font-weight: 500; text-align: left; color: black; } @@ -15,40 +16,50 @@ p { text-align: left; margin-bottom: 20px; color: black; + font-size: medium; + font-weight: 400; } /* slider */ .horizontal-slider { width: 100%; - height: 10px; + height: 80px; margin: 0; position: relative; z-index: 2; } .track { - height: 10px; + height: 2px; } -.thumb { - height: 20px; - width: 20px; - background-color: white; - border: 2px solid #ff5a5f; - border-radius: 50%; - cursor: grab; - position: absolute; - top: -5px; - z-index: 3; -} + .thumb { + top: -15px; + cursor: grab; + border-radius: 100%; + background-color: white; + color: black; + border: 1px solid lightgrey; + width: 2rem; + height: 2rem; + padding: .938rem; + text-align: center; + display: inline-flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-decoration: none; + box-shadow: 1px 5px 22px rgba(0, 0, 0, 0.1); + } + /* Histogram styling */ .histogram { display: flex; justify-content: space-between; align-items: flex-end; - height: 150px; - margin: 0 15px; /* Pull histogram up to remove space with slider */ + height: 100px; + margin: 0 125px; /* Pull histogram up to remove space with slider */ position: relative; z-index: 1; } @@ -57,28 +68,24 @@ p { display: flex; flex-direction: column-reverse; text-align: center; - width: 100%; - height: 100%; - margin: o 1px; } .histogram-bar { - background-color: red; - width: 100%; - max-width: 20px; - margin: 0 auto; + background-color: rgb(196, 0, 91); + max-width: 6px; } .histogram-label { margin-top: 5px; - font-size: 12px; + font-size: 5px; } /* inputs */ .price-inputs-container { display: flex; justify-content: space-between; - margin-top: 10px; + margin-top: -30px; + margin-bottom: 40px; width: 100%; } @@ -98,16 +105,10 @@ p { color: black; width: 100px; outline: none; - box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); } .price-input label { margin-bottom: 5px; font-size: 14px; color: #666; -} - -.price-input input:focus { - border-color: #ff5a5f; - box-shadow: 0 2px 8px rgba(255, 90, 95, 0.3); -} +} \ No newline at end of file diff --git a/src/components/priceRange/PriceRangeFilter.jsx b/src/components/priceRange/PriceRangeFilter.jsx index c8975b57..2a03453a 100644 --- a/src/components/priceRange/PriceRangeFilter.jsx +++ b/src/components/priceRange/PriceRangeFilter.jsx @@ -2,75 +2,88 @@ import React, { useState } from "react"; import ReactSlider from "react-slider"; import "./PriceRangeFilter.css"; -const PriceRangeFilter = ({ histogramData }) => { - const [minPrice, setMinPrice] = useState(9); - const [maxPrice, setMaxPrice] = useState(310); - const [sliderValues, setSliderValues] = useState([minPrice, maxPrice]); +const PriceRangeFilter = () => { + const [sliderValues, setSliderValues] = useState([134, 340]); + + // Mock histogram data + const histogramData = [ + { from: 50, to: 62.5, count: 2 }, + { from: 62.5, to: 75, count: 1 }, + { from: 75, to: 87.5, count: 2 }, + { from: 87.5, to: 100, count: 3 }, + { from: 100, to: 112.5, count: 3 }, + { from: 112.5, to: 125, count: 2 }, + { from: 125, to: 137.5, count: 3 }, + { from: 137.5, to: 150, count: 2 }, + { from: 150, to: 162.5, count: 5 }, + { from: 162.5, to: 175, count: 5 }, + { from: 175, to: 187.5, count: 5 }, + { from: 187.5, to: 200, count: 5 }, + { from: 200, to: 212.5, count: 4 }, + { from: 212.5, to: 225, count: 4 }, + { from: 225, to: 237.5, count: 3 }, + { from: 237.5, to: 250, count: 4 }, + { from: 250, to: 262.5, count: 3 }, + { from: 262.5, to: 275, count: 2 }, + { from: 275, to: 287.5, count: 2 }, + { from: 287.5, to: 300, count: 3 }, + { from: 300, to: 312.5, count: 2 }, + { from: 312.5, to: 325, count: 1 }, + { from: 325, to: 337.5, count: 1 }, + { from: 337.5, to: 350, count: 1 }, + ]; + const handleSliderChange = (values) => { setSliderValues(values); - setMinPrice(values[0]); - setMaxPrice(values[1]); - }; - - const handleMinPriceChange = (e) => { - const value = parseInt(e.target.value, 10); - if (value < maxPrice && value >= 9) { - setMinPrice(value); - setSliderValues([value, sliderValues[1]]); - } }; - const handleMaxPriceChange = (e) => { - const value = parseInt(e.target.value, 10); - if (value > minPrice && value <= 310) { - setMaxPrice(value); - setSliderValues([sliderValues[0], value]); - } - }; - - const [minValue, maxValue] = sliderValues; - return (
+ {/* Header */}

Price range

Nightly prices including fees and taxes

+ {/* Histogram */}
{histogramData.map((bin, index) => { - const isInRange = bin.from >= minValue && bin.to <= maxValue; - const barColor = isInRange ? "red" : "gray"; + const isInRange = bin.from >= sliderValues[0] && bin.to <= sliderValues[1]; + const barColor = isInRange ? "rgb(255, 19, 129)" : "lightgray"; - return( -
-
- {/*{`${bin.from}-${bin.to}`}*/} -
+ return ( +
+
+ {`${bin.from}-${bin.to}`} +
); })}
+ {/* Slider */} { - const [minValue, maxValue] = state.value; + const trackColor = + props.key === "track-0" + ? "lightgray" + : props.key === "track-1" + ? "rgb(255, 19, 129)" + : "lightgray"; - let trackColor = props.key === "track-0" ? "gray" : props.key === "track-1" ? "red" : "gray"; - return (
{ ); }} /> - - + {/* Inputs */}
From 691f25f291d2a44469bc66f668bb8e66db321960 Mon Sep 17 00:00:00 2001 From: 006080 Date: Thu, 5 Dec 2024 16:15:10 +0100 Subject: [PATCH 2/4] categoryTap-overley-solved --- src/components/CategoryTabs/CategoryTabs.module.css | 6 ++++-- src/components/FilterButton/FilterButton.module.css | 1 - src/components/Header/Header.module.css | 2 +- src/components/HeaderUserMenu/HeaderUserMenu.module.css | 1 + src/components/PriceRangeModal/PriceRangeModal.module.css | 2 -- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/CategoryTabs/CategoryTabs.module.css b/src/components/CategoryTabs/CategoryTabs.module.css index e7ac990b..244c82a7 100644 --- a/src/components/CategoryTabs/CategoryTabs.module.css +++ b/src/components/CategoryTabs/CategoryTabs.module.css @@ -10,12 +10,13 @@ left: 0; right: 0; background-color: white; - z-index: 998; + z-index: 499; padding-top: 15px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .categoryMenu { + z-index: 1; width: 95vw; display: flex; flex-direction: row; @@ -29,7 +30,8 @@ display: flex; justify-content: center; overflow: hidden; - position: relative; + /* position: relative; */ + z-index: 1; } .filterButtonWrapper { diff --git a/src/components/FilterButton/FilterButton.module.css b/src/components/FilterButton/FilterButton.module.css index 933fac46..58b8cc3c 100644 --- a/src/components/FilterButton/FilterButton.module.css +++ b/src/components/FilterButton/FilterButton.module.css @@ -20,7 +20,6 @@ width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */ - z-index: 1000; } .filterButton:hover { diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css index 1ad5fe42..616ec322 100644 --- a/src/components/Header/Header.module.css +++ b/src/components/Header/Header.module.css @@ -1,7 +1,7 @@ .headerSectionContainer { width: 100%; position: relative; - z-index: 900; + z-index: 500; } .header { diff --git a/src/components/HeaderUserMenu/HeaderUserMenu.module.css b/src/components/HeaderUserMenu/HeaderUserMenu.module.css index 0368cb50..a4a62120 100644 --- a/src/components/HeaderUserMenu/HeaderUserMenu.module.css +++ b/src/components/HeaderUserMenu/HeaderUserMenu.module.css @@ -1,4 +1,5 @@ .headerContainer { + z-index:; position: relative; display: inline-block; } diff --git a/src/components/PriceRangeModal/PriceRangeModal.module.css b/src/components/PriceRangeModal/PriceRangeModal.module.css index 67dab23d..10eb4cff 100644 --- a/src/components/PriceRangeModal/PriceRangeModal.module.css +++ b/src/components/PriceRangeModal/PriceRangeModal.module.css @@ -5,8 +5,6 @@ width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.6); - /* Semi-transparent black */ - z-index: 1000; } .submitSection { From 9f024fbb68e92689bab721bab0824d30c84f438a Mon Sep 17 00:00:00 2001 From: Bohdan Hrabynskyi Date: Fri, 6 Dec 2024 16:43:10 +0100 Subject: [PATCH 3/4] Fix PriceRange-PopUp --- src/App.css | 10 ++++++ src/App.jsx | 31 ++++++++----------- src/components/CategoryTabs/CategoryTabs.jsx | 4 +-- src/components/FilterButton/FilterButton.jsx | 30 ++++++------------ .../FilterButton/FilterButton.module.css | 10 ------ src/components/Header/Header.module.css | 2 +- .../priceRange/PriceRangeFilter.jsx | 2 -- 7 files changed, 35 insertions(+), 54 deletions(-) diff --git a/src/App.css b/src/App.css index 2bb08714..8ac7e2cf 100644 --- a/src/App.css +++ b/src/App.css @@ -36,3 +36,13 @@ .host { color: grey; } + +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.6); + z-index: 1100; +} \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index ad9d1ab9..d9235a46 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -6,30 +6,17 @@ 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"; function App() { const [places, setPlaces] = useState([]); const [selectPlaceId, setSelectPlaceId] = useState(null); const [searchParams] = useSearchParams(); + const [isModalOpen, setModalOpen] = useState(false); + const [histogramData, setHistogramData] = useState([]); - const histogramData = [ - { from: 16, to: 23, count: 2 }, - { from: 37, to: 44, count: 13 }, - { from: 55, to: 63, count: 30 }, - { from: 76, to: 84, count: 50 }, - { from: 95, to: 103, count: 90 }, - { from: 116, to: 123, count: 60 }, - { from: 135, to: 143, count: 20 }, - { from: 156, to: 156, count: 12 }, - { from: 174, to: 182, count: 15 }, - { from: 194, to: 202, count: 8 }, - { from: 216, to: 224, count: 5 }, - { from: 233, to: 242, count: 10 }, - { from: 254, to: 261, count: 25 }, - { from: 273, to: 281, count: 40 }, - { from: 292, to: 304, count: 22 }, - ]; + const toggleModal = () => setModalOpen((prev) => !prev); useEffect(() => { axios @@ -58,7 +45,7 @@ function App() {
- +
{places.map((place) => { @@ -79,6 +66,14 @@ function App() { ); })}
+ {isModalOpen && ( + + )} ); } diff --git a/src/components/CategoryTabs/CategoryTabs.jsx b/src/components/CategoryTabs/CategoryTabs.jsx index 8d1c5d26..71e68e7b 100644 --- a/src/components/CategoryTabs/CategoryTabs.jsx +++ b/src/components/CategoryTabs/CategoryTabs.jsx @@ -28,7 +28,7 @@ const categories = [ { label: "Riverside Cabins", tag: constants.RIVERSIDE_CABINS, icon: }, ]; -const CategoryTabs = () => { +const CategoryTabs = ({toggleModal, setHistogramData}) => { const [activeTab, setActiveTab] = useState(null); const [showLeftArrow, setShowLeftArrow] = useState(false); const [showRightArrow, setShowRightArrow] = useState(false); @@ -124,7 +124,7 @@ const CategoryTabs = () => { })}
- +
{showRightArrow && ( diff --git a/src/components/FilterButton/FilterButton.jsx b/src/components/FilterButton/FilterButton.jsx index 42751fc8..2d263d25 100644 --- a/src/components/FilterButton/FilterButton.jsx +++ b/src/components/FilterButton/FilterButton.jsx @@ -1,15 +1,15 @@ -import React, { useState, useEffect } from "react"; +import { useEffect } from "react"; import styles from "./FilterButton.module.css"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faSliders } from "@fortawesome/free-solid-svg-icons"; -import PriceRangeModal from "../PriceRangeModal/PriceRangeModal"; - -const FilterButton = () => { - const [isModalOpen, setModalOpen] = useState(false); - const [histogramData, setHistogramData] = useState([]); +const FilterButton = ({toggleModal, setHistogramData = () => {}}) => { // Simulating dynamic data fetching or processing useEffect(() => { + if (!setHistogramData) { + console.warn("setHistogramData is not provided to FilterButton"); + return; + } // Replace this logic with actual data processing from the provided file or API const generateHistogramData = () => { const minPrice = 9; @@ -28,11 +28,9 @@ const FilterButton = () => { return mockData; }; - const data = generateHistogramData(); - setHistogramData(data); - }, []); - - const toggleModal = () => setModalOpen((prev) => !prev); + const data = generateHistogramData(); + setHistogramData(data); + }, [setHistogramData]); return ( <> @@ -43,16 +41,6 @@ const FilterButton = () => {
Filters
- - {/* Modal for price range */} - {isModalOpen && ( - - )} ); }; diff --git a/src/components/FilterButton/FilterButton.module.css b/src/components/FilterButton/FilterButton.module.css index 933fac46..a9b1ccf3 100644 --- a/src/components/FilterButton/FilterButton.module.css +++ b/src/components/FilterButton/FilterButton.module.css @@ -13,16 +13,6 @@ transition: background-color 0.3s, border-color 0.3s; } -.overlay { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */ - z-index: 1000; - } - .filterButton:hover { background-color: rgb(240, 240, 240); border-color: rgb(96, 96, 96); diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css index 1ad5fe42..92a77918 100644 --- a/src/components/Header/Header.module.css +++ b/src/components/Header/Header.module.css @@ -1,7 +1,7 @@ .headerSectionContainer { width: 100%; position: relative; - z-index: 900; + z-index: 1000; } .header { diff --git a/src/components/priceRange/PriceRangeFilter.jsx b/src/components/priceRange/PriceRangeFilter.jsx index 2a03453a..e1504420 100644 --- a/src/components/priceRange/PriceRangeFilter.jsx +++ b/src/components/priceRange/PriceRangeFilter.jsx @@ -29,8 +29,6 @@ const PriceRangeFilter = () => { { from: 287.5, to: 300, count: 3 }, { from: 300, to: 312.5, count: 2 }, { from: 312.5, to: 325, count: 1 }, - { from: 325, to: 337.5, count: 1 }, - { from: 337.5, to: 350, count: 1 }, ]; From 2e1db766b319e118baa1893bf2a925f6deb68406 Mon Sep 17 00:00:00 2001 From: Bohdan Hrabynskyi Date: Fri, 6 Dec 2024 16:48:23 +0100 Subject: [PATCH 4/4] Add missing library to the ProductHighlight --- src/components/ProductHighlight/ProductHighlight.test.jsx | 1 + src/components/SearchPanel/SearchPanel.jsx | 3 --- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/ProductHighlight/ProductHighlight.test.jsx b/src/components/ProductHighlight/ProductHighlight.test.jsx index eb69a5da..3112538e 100644 --- a/src/components/ProductHighlight/ProductHighlight.test.jsx +++ b/src/components/ProductHighlight/ProductHighlight.test.jsx @@ -2,6 +2,7 @@ import { render, screen } from "@testing-library/react"; import ProductHighlight from "./ProductHighlight"; import { CHECK_IN, AWARD, CANCELLATION } from "../../constants/constants"; import { describe, it, expect } from "vitest"; +import '@testing-library/jest-dom'; describe("ProductHighlight Component", () => { const mockHighlights = [ diff --git a/src/components/SearchPanel/SearchPanel.jsx b/src/components/SearchPanel/SearchPanel.jsx index 7cee32f3..cd506d14 100644 --- a/src/components/SearchPanel/SearchPanel.jsx +++ b/src/components/SearchPanel/SearchPanel.jsx @@ -56,9 +56,6 @@ const SearchPanel = () => {