84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
import React, { useState } from "react";
|
|
import Input from "./Input";
|
|
import { Search as SearchIcon } from "lucide-react";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
const SearchBar: React.FC = () => {
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
//const [debouncedQuery, setDebouncedQuery] = useState(searchQuery);
|
|
const navigate = useNavigate();
|
|
|
|
// Debounce the search query
|
|
{/*
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setDebouncedQuery(searchQuery);
|
|
}, 500); // Wait 500ms after user stops typing
|
|
|
|
return () => clearTimeout(timer);
|
|
}, [searchQuery]); */}
|
|
|
|
// Perform search when debounced query changes
|
|
const handleSearch = async () => {
|
|
if (!searchQuery.trim()) return;
|
|
|
|
try {
|
|
const response = await fetch("/api/search", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ query: searchQuery }), // <-- Fixed payload
|
|
});
|
|
|
|
const data = await response.json();
|
|
console.log("Search results:", data);
|
|
|
|
navigate("/results", { state: { searchResults: data, query: searchQuery } });
|
|
|
|
// Handle the search results here
|
|
} catch (error) {
|
|
console.error("Error performing search:", error);
|
|
}
|
|
};
|
|
|
|
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === "Enter") {
|
|
console.log("Key pressed:", e.key); // Debugging
|
|
|
|
e.preventDefault(); // Prevent unintended form submission
|
|
handleSearch(); // Trigger search when Enter key is pressed
|
|
}
|
|
};
|
|
|
|
|
|
const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setSearchQuery(e.target.value);
|
|
};
|
|
|
|
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === "Enter") {
|
|
handleSearch();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div id="search-bar" className="flex items-center">
|
|
<Input
|
|
type="text"
|
|
placeholder="Search..."
|
|
value={searchQuery}
|
|
onChange={handleSearchChange}
|
|
onKeyDown={handleKeyPress}
|
|
extraClasses="pr-[30px] focus:outline-none focus:border-purple-500 focus:w-[30vw]"
|
|
/>
|
|
|
|
|
|
|
|
<SearchIcon className="-translate-x-[28px] top-1/2 h-6 w-6 text-white" />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SearchBar;
|