Create component for searchBar + btn
This commit is contained in:
T'JAMPENS QUENTIN p2406187
@@ -1,100 +0,0 @@
|
||||
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() {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [searchResults, setSearchResults] = useState([]);
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
const performSearch = async (query) => {
|
||||
if (query.trim() === '') {
|
||||
setSearchResults([]);
|
||||
return;
|
||||
}
|
||||
|
||||
let data;
|
||||
|
||||
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 = setTimeout(() => {
|
||||
performSearch(searchQuery);
|
||||
}, 300);
|
||||
|
||||
return () => {
|
||||
clearTimeout(handler);
|
||||
};
|
||||
}, [searchQuery]);
|
||||
|
||||
return (
|
||||
<div className={`${styles.searchBarContainer} glassCard`}>
|
||||
<form className={styles.searchBarForm} onSubmit={(element) => element.preventDefault()}>
|
||||
<img src="search.svg" alt="Rechercher"/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Rechercher un événement"
|
||||
value={searchQuery}
|
||||
onChange={(element) => 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, i) => (
|
||||
(location.pathname.includes("events")) ? (
|
||||
<Link to={`/events/` + result.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>
|
||||
) : location.pathname.includes("volunteers") ? (
|
||||
<Link to={`/profile/` + result.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} {result.lastname}</p>
|
||||
</div>
|
||||
</Link>
|
||||
) : null
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SearchBar;
|
||||
@@ -1,6 +1,8 @@
|
||||
.searchBarContainer{
|
||||
position: fixed;
|
||||
top: 4rem;
|
||||
top: 20vh;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 100;
|
||||
width: 60%;
|
||||
background: #fff;
|
||||
|
||||
@@ -0,0 +1,120 @@
|
||||
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;
|
||||
@@ -0,0 +1,38 @@
|
||||
import styles from "../../ToolBar.module.css"
|
||||
import Button from "../../../ui/button/button";
|
||||
import { useEffect, useState } from "react";
|
||||
import SearchBar from "../../../SearchBar/SearchBar";
|
||||
|
||||
export default function SearchBtn() {
|
||||
|
||||
const [isSearchVisible, setIsSearchVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (isSearchVisible) {
|
||||
document.documentElement.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.documentElement.style.overflow = '';
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.documentElement.style.overflow = '';
|
||||
};
|
||||
}, [isSearchVisible]);
|
||||
|
||||
return <>
|
||||
|
||||
{isSearchVisible ? (
|
||||
<div className={styles.searchBarContainer}>
|
||||
<div className={styles.searchBarOverlay} onClick={() => setIsSearchVisible(false)}></div>
|
||||
<SearchBar/>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div>
|
||||
<Button className={`${styles.searchButton} glassCard`} variant={"default"} onClick={() => setIsSearchVisible(true)}>
|
||||
<img src="search.svg" alt="Rechercher"/>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</>
|
||||
}
|
||||
Reference in New Issue
Block a user