Am making an event filter using the following data. However it seems all the event got filtered out.
I am not sure what is wrong though
[
{
"index": 1,
"eventname": "Swimming",
"price":[250,100,350],
"date":[20230812,20230831]
}
,
{
"index":2,
"eventname": "Fencing",
"price":[220,140,50],
"date":[20230712,20230913]
}
,
{
"index":3,
"eventname": "Jogging",
"price":[90,70,50],
"date":[20230308,20230609]
}
,
{
"index":4,
"eventname": "Basketball",
"price":[160,140,120],
"date":[20230911,20230221]
}
]
The Event Filters are as follows:
import React from 'react';
import { HiOutlineMagnifyingGlass } from "react-icons/hi2";
import "./eventmain.css";
import "../App.css";
const EventNameFilter = ({ onInputChange }) => {
const handleInputChange = (e) => {
const value = e.target.value;
onInputChange(value);
};
return(
<div className="event-name-filter">
<label htmlFor="eventname" >Event name</label>
<input type="text" id="event-name-search"
placeholder="Enter event name" className="event-name" onChange={handleInputChange}
/>
</div>
);
}
const PriceSlider = ({onPriceChange}) =>{
const handlePriceChange = (e) => {
const value = e.target.value;
onPriceChange(value);
};
return(
<div className='price-slider'>
<label htmlFor="pricerange" className="flex flex-col">Price Range </label>
<input type="range" min="0" max="500" id="pricerange" onInput={handlePriceChange}/>
</div>
)
}
const GoToLocation = () =>{
return(
<div className = "go-to-location"> Find by location</div>
);
}
const Search = () =>{
return(
<div className = "search">
<HiOutlineMagnifyingGlass />
</div>
);
}
export default function EventFilterBar(){
return(
<div className= "event-filter-bar">
<EventNameFilter />
<PriceSlider />
<GoToLocation />
<Search />
<div>
<p id="username">Username</p>
</div>
<div>
<img id="usericon" src="./free-user-icon-3296-thumb.png" alt="user icon" />
</div>
</div>
)
}
And the event page
export default function EventMain (){
const [searchInput,setInput]=useState('');
const [maxPrice,setMaxPrice] = useState(750);
const handleSearchInput = (value) => {
setInput(value);
};
const handlePriceChange = (value) => {
setMaxPrice(value);
}
const getEarliestDate = (dates) => {
return Math.min(...dates);
};
const getLatestDate = (dates) => {
return Math.max(...dates);
};
const filteredEvents = mockEventData.filter((event) =>
event.eventname.toLowerCase().includes(searchInput.toLowerCase())
).filter((event) =>Math.max(event.price)<maxPrice
);
return(
<div className="event-main">
<EventFilterBar onInputChange={handleSearchInput} onPriceChange={handlePriceChange}/>
<HeaderBar/>
{filteredEvents.map((event, index) => (
<EventCard
key={index}
eventname={event.eventname}
earliestdate={getEarliestDate(event.date)}
latestdate={getLatestDate(event.date)}
price={event.price.toSorted((a, b) => a - b).toString()}
/>
))}
</div>
);
}
The event cards
import './eventmain.css';
import { IoIosStar, IoIosStarOutline } from "react-icons/io";
import React, { useState } from 'react';
export default function EventCard({ eventname, earliestdate, latestdate, price }) {
const [starred, setStarred] = useState(false);
const StarIcon = starred ? <IoIosStar onClick={() => setStarred(!starred)} />
: <IoIosStarOutline onClick={() => setStarred(!starred)} />;
return (
<div className="event-card">
<div className="event-element"><p>{eventname}</p></div>
<div className="event-element"><p>{earliestdate}</p></div>
<div className="event-element"><p>{latestdate}</p></div>
<div className="event-element"><p>{price}</p></div>
<div className="event-element">{StarIcon}</div>
</div>
);
}
(It looks like my post is mostly code; I am adding some more details. It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.)