Untitled

thewitchking

Jun 10th, 2025

713

Never

Add comment

Not a member of Pastebin yet? Sign Up, it unlocks many cool features!

JavaScript 2.93 KB | None | 0 0

raw download clone embed print report

import React, { useState, useEffect, useRef, useCallback } from "react";
import { FaSearch } from "react-icons/fa";
import { useNavigate, useLocation } from "react-router-dom";
import "./SearchBar.css";
import { generateBaseURL } from "../utils";
import useDebounce from "../hooks/useDebounce";
function SearchBar() {
const [searchText, setSearchText] = useState("");
const [searchResults, setSearchResults] = useState([]);
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const searchRef = useRef(null);
const navigate = useNavigate();
const location = useLocation();
const debouncedSearchText = useDebounce(searchText, 300);
const fetchSearchResults = useCallback(async (value) => {
if (value.length > 0) {
try {
const baseURL = generateBaseURL();
const response = await fetch(`${baseURL}/search?query=${value}`);
const data = await response.json();
setSearchResults(data);
setIsDropdownOpen(true);
} catch (error) {
console.error("Error fetching search results:", error);
}
} else {
setSearchResults([]);
setIsDropdownOpen(false);
}
}, []);
useEffect(() => {
fetchSearchResults(debouncedSearchText);
}, [debouncedSearchText, fetchSearchResults]);
useEffect(() => {
// Close dropdown on route change
setIsDropdownOpen(false);
}, [location]);
useEffect(() => {
const handleClickOutside = (event) => {
if (searchRef.current && !searchRef.current.contains(event.target)) {
setIsDropdownOpen(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
const handleResultClick = (result) => {
navigate(`/details/${result.id}`);
setIsDropdownOpen(false);
};
return (
<div ref={searchRef} className="search-container">
<div className="search-input-wrapper">
<FaSearch className="search-icon" />
<input
type="text"
placeholder="Search apartments..."
value={searchText}
onChange={(e) => setSearchText(e.target.value)}
onFocus={() => setIsDropdownOpen(searchResults.length > 0)}
data-testid="search-input"
/>
</div>
{isDropdownOpen && (
<div className="dropdown" data-testid="auth-dropdown-btn">
{searchResults.length > 0 ? (
searchResults.map((result, index) => (
<div
key={index}
className="dropdown-item"
onClick={() => handleResultClick(result)}
>
{result.name}
</div>
))
) : (
<div className="dropdown-item">No results found.</div>
)}
</div>
)}
</div>
);
}
export default SearchBar;

Add Comment

Please, Sign In to add comment