File size: 3,013 Bytes
0527ba9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
"use client"; // Indicate that this file is a client component in Next.js
import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { search } from "@/api/searchApi"; // Ensure the path is correct for your API
import "./searchPage.css";
const SearchPage = () => {
const [query, setQuery] = useState("");
const [results, setResults] = useState({ films: [], tv_series: [] });
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [debouncedQuery, setDebouncedQuery] = useState("");
const router = useRouter(); // Use Next.js useRouter for navigation
useEffect(() => {
const handler = setTimeout(() => {
if (debouncedQuery) {
handleSearch();
}
}, 200); // Delay of 200ms
return () => {
clearTimeout(handler);
};
}, [debouncedQuery]);
const handleSearch = async () => {
setLoading(true);
setError(null);
try {
const data = await search(debouncedQuery);
setResults(data);
} catch (err) {
setError("Failed to fetch search results.");
} finally {
setLoading(false);
}
};
const handleChange = (e) => {
setQuery(e.target.value);
setDebouncedQuery(e.target.value);
};
const handleItemClick = (path) => {
router.push(path); // Use router.push for navigation
};
return (
<div className="search-page">
<div className="search-container">
<input
type="text"
value={query}
onChange={handleChange}
placeholder="Search for films or TV shows..."
className="search-input"
/>
{loading && (
<div className="loading-indicator">
<div className="spinner"></div>
</div>
)}
</div>
{error && <div className="error-message">{error}</div>}
<div className="results-container">
{results.films.length > 0 && (
<div className="results-section">
<h2>Films</h2>
<ul className="results-list">
{results.films.map((film, index) => (
<li
key={index}
className="result-item"
onClick={() => handleItemClick(`/film/${encodeURIComponent(film)}`)}
>
{film}
</li>
))}
</ul>
</div>
)}
{results.tv_series.length > 0 && (
<div className="results-section">
<h2>TV Series</h2>
<ul className="results-list">
{results.tv_series.map((series, index) => (
<li
key={index}
className="result-item"
onClick={() => handleItemClick(`/tvshow/${encodeURIComponent(series)}`)}
>
{series}
</li>
))}
</ul>
</div>
)}
</div>
</div>
);
};
export default SearchPage;
|