-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #317 from ReDI-School/313-filterpricemodal
PriceRange-PopUp
- Loading branch information
Showing
10 changed files
with
464 additions
and
124 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,48 @@ | ||
| import React from 'react' | ||
| import styles from "./FilterButton.module.css" | ||
| import { useEffect } from "react"; | ||
| import styles from "./FilterButton.module.css"; | ||
| import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | ||
| import { faSliders } from "@fortawesome/free-solid-svg-icons"; | ||
|
|
||
| const FilterButton = () => { | ||
| return ( | ||
| 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; | ||
| const maxPrice = 310; | ||
| const bins = 6; // Number of bins for histogram | ||
|
|
||
| <div className={styles.filterButton}> | ||
| <div className={styles.contentFilter}> | ||
| <FontAwesomeIcon icon={faSliders} className={styles.icon} /> | ||
| <h6>Filters</h6> | ||
| </div> | ||
| </div> | ||
| 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 | ||
|
|
||
| ) | ||
| } | ||
| return { from, to, count }; | ||
| }); | ||
|
|
||
| export default FilterButton | ||
| return mockData; | ||
| }; | ||
|
|
||
| const data = generateHistogramData(); | ||
| setHistogramData(data); | ||
| }, [setHistogramData]); | ||
|
|
||
| return ( | ||
| <> | ||
| {/* Filter button */} | ||
| <div className={styles.filterButton} onClick={toggleModal}> | ||
| <div className={styles.contentFilter}> | ||
| <FontAwesomeIcon icon={faSliders} className={styles.icon} /> | ||
| <h6>Filters</h6> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default FilterButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| .headerContainer { | ||
| z-index:; | ||
| position: relative; | ||
| display: inline-block; | ||
| } | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <div className={className}> | ||
| <div className={styles.priceModal}> | ||
| {/* Header Section */} | ||
| <div className={styles.header}> | ||
| <div className={styles.customCloseWrapper} onClick={onClose}> | ||
| <CloseIcon /> | ||
| </div> | ||
| <h4>Filters</h4> | ||
| </div> | ||
|
|
||
| <div className={styles.range}> | ||
| <PriceRangeFilter histogramData={histogramData} /> | ||
| </div> | ||
|
|
||
| {/* Rooms and Beds Section */} | ||
| <div className={styles.roomsSection}> | ||
| <h4 className={styles.title}>Rooms and Beds</h4> | ||
|
|
||
| {/* Bedrooms Section */} | ||
| <div className={styles.section}> | ||
| <div className={styles.label}> | ||
| <h4 className={styles.subtitle}>Bedrooms</h4> | ||
| </div> | ||
| <div className={styles.increment}> | ||
| <button className={styles.button} onClick={() => decrement(setBedrooms, bedrooms)}>-</button> | ||
| <h4 className={styles.sub}>{bedrooms || "Any"}</h4> | ||
| <button className={styles.button} onClick={() => increment(setBedrooms, bedrooms)}>+</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Beds Section */} | ||
| <div className={styles.section}> | ||
| <div className={styles.label}> | ||
| <h4 className={styles.subtitle}>Beds</h4> | ||
| </div> | ||
| <div className={styles.increment}> | ||
| <button className={styles.button} onClick={() => decrement(setBeds, beds)}>-</button> | ||
| <h4 className={styles.sub}>{beds || "Any"}</h4> | ||
| <button className={styles.button} onClick={() => increment(setBeds, beds)}>+</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Bathrooms Section */} | ||
| <div className={styles.section}> | ||
| <div className={styles.label}> | ||
| <h4 className={styles.subtitle}>Bathrooms</h4> | ||
| </div> | ||
| <div className={styles.increment}> | ||
| <button className={styles.button} onClick={() => decrement(setBathrooms, bathrooms)}>-</button> | ||
| <h4 className={styles.sub}>{bathrooms || "Any"}</h4> | ||
| <button className={styles.button} onClick={() => increment(setBathrooms, bathrooms)}>+</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Submit Section */} | ||
| <div className={styles.submitSection}> | ||
| <button className={styles.clearAll} onClick={() => { | ||
| setBedrooms(0); | ||
| setBeds(0); | ||
| setBathrooms(0); | ||
| }}> | ||
| Clear all | ||
| </button> | ||
| <button className={styles.buttonModal}>Show 1,000+ places</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default PriceRangeModal; |
Oops, something went wrong.