75 lines
2.7 KiB
React
75 lines
2.7 KiB
React
import styles from "./SearchBar.module.css"
|
|
import {Link} from "react-router";
|
|
import {useEffect, useState} from "react";
|
|
import searchEvents from "../../utils/searchEvents.js";
|
|
|
|
function SearchBar() {
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [searchResults, setSearchResults] = useState([]);
|
|
|
|
useEffect(() => {
|
|
const performSearch = async (query) => {
|
|
if (query.trim() === '') {
|
|
setSearchResults([]);
|
|
return;
|
|
}
|
|
|
|
const data = await searchEvents(query);
|
|
if (data) {
|
|
setSearchResults(data);
|
|
} else {
|
|
setSearchResults([]);
|
|
}
|
|
};
|
|
|
|
|
|
const handler = setTimeout(() => {
|
|
performSearch(searchQuery);
|
|
}, 300);
|
|
|
|
return () => {
|
|
clearTimeout(handler);
|
|
};
|
|
}, [searchQuery]);
|
|
|
|
return (
|
|
<div className={`${styles.searchBarContainer} glassCard`}>
|
|
<form className={styles.searchBarForm} onSubmit={(event) => event.preventDefault()}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24px" viewBox="0 -960 960 960" fill="#currentColor">
|
|
<path
|
|
d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
|
|
</svg>
|
|
<input
|
|
type="text"
|
|
placeholder="Rechercher un événement"
|
|
value={searchQuery}
|
|
onChange={(event) => setSearchQuery(event.target.value)}
|
|
/>
|
|
</form>
|
|
|
|
<div className={styles.lineContainer}>
|
|
{searchResults.length > 0 ? (
|
|
<div className={styles.line}></div>
|
|
) : null}
|
|
</div>
|
|
|
|
|
|
{searchResults.map((result, i) => (
|
|
<Link to={`/event/` + event.id}>
|
|
<div className={styles.searchedEvent} key={i}>
|
|
<div className={`${styles.eventImageDiv}`}>
|
|
{result.image == null ? (
|
|
<img src="empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
|
|
) : (
|
|
<img src={result.image + `.png`} alt="Photo de l'événement" />
|
|
)}
|
|
</div>
|
|
<p>{result.name}</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default SearchBar; |