121 lines
4.7 KiB
TypeScript
121 lines
4.7 KiB
TypeScript
import styles from "./SearchBar.module.css";
|
|
import { Link } from "react-router";
|
|
import { useEffect, useState } from "react";
|
|
import searchEvents from "../../utils/events/searchEvents.js";
|
|
import searchUsers from "../../utils/users/searchUsers.js";
|
|
import { useLocation } from "react-router";
|
|
|
|
function SearchBar(): any {
|
|
const [searchQuery, setSearchQuery] = useState<string>("");
|
|
const [searchResults, setSearchResults] = useState<any[]>([]);
|
|
const location: any = useLocation();
|
|
|
|
useEffect(() => {
|
|
const performSearch = async (query: string): Promise<void> => {
|
|
if (query.trim() === "") {
|
|
setSearchResults([]);
|
|
return;
|
|
}
|
|
|
|
let data: any;
|
|
|
|
if (location.pathname.includes("events")) {
|
|
data = await searchEvents(query);
|
|
} else if (location.pathname.includes("volunteers")) {
|
|
data = await searchUsers(query);
|
|
}
|
|
|
|
if (data) {
|
|
setSearchResults(data);
|
|
} else {
|
|
setSearchResults([]);
|
|
}
|
|
};
|
|
|
|
const handler: ReturnType<typeof setTimeout> = setTimeout(() => {
|
|
performSearch(searchQuery);
|
|
}, 300);
|
|
|
|
return () => {
|
|
clearTimeout(handler);
|
|
};
|
|
}, [searchQuery, location.pathname]);
|
|
|
|
return (
|
|
<div className={`${styles.searchBarContainer} glassCard`}>
|
|
<form
|
|
className={styles.searchBarForm}
|
|
onSubmit={(element: React.FormEvent<HTMLFormElement>) =>
|
|
element.preventDefault()
|
|
}
|
|
>
|
|
<img src="search.svg" alt="Rechercher" />
|
|
<input
|
|
type="text"
|
|
placeholder="Rechercher un événement"
|
|
value={searchQuery}
|
|
onChange={(element: React.ChangeEvent<HTMLInputElement>) =>
|
|
setSearchQuery(element.target.value)
|
|
}
|
|
/>
|
|
</form>
|
|
|
|
<div className={styles.lineContainer}>
|
|
{searchResults.length > 0 ? (
|
|
<div className={styles.line}></div>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className={styles.elementList}>
|
|
{searchResults.map((result: any, i: number) =>
|
|
location.pathname.includes("events") ? (
|
|
<Link to={`/events/` + result.id} key={i}>
|
|
<div className={styles.searchedEvent}>
|
|
<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>
|
|
) : location.pathname.includes("volunteers") ? (
|
|
<Link to={`/profile/` + result.id} key={i}>
|
|
<div className={styles.searchedEvent}>
|
|
<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} {result.lastname}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
) : null
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default SearchBar;
|