82 lines
2.1 KiB
TypeScript
82 lines
2.1 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import { TMDB } from "@/lib/tmdb";
|
|
import { SearchResult } from "@/lib/tmdb/types";
|
|
import { FC } from "react";
|
|
import { useEffect } from "react";
|
|
import { Pagination } from "@/components/atoms/Pagination";
|
|
import { MovieList } from "../MovieList";
|
|
import { Spinner } from "@/components/atoms/Spinner";
|
|
|
|
type Props = {
|
|
query: string;
|
|
};
|
|
|
|
export const SearchList: FC<Props> = ({ query }) => {
|
|
const [response, setResponse] = useState<SearchResult | null>(null);
|
|
const {
|
|
results,
|
|
total_results = 0,
|
|
total_pages = 0,
|
|
page = 1,
|
|
} = response ?? {};
|
|
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const handleSearch = async (query: string, page: number) => {
|
|
setIsLoading(true);
|
|
|
|
const data = await TMDB.search({
|
|
query,
|
|
page,
|
|
});
|
|
setResponse(data);
|
|
setIsLoading(false);
|
|
};
|
|
|
|
const handlePageChange = (page: number) => {
|
|
window.history.replaceState({}, "", `?s=${query}&page=${page}`);
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
handleSearch(query, page);
|
|
};
|
|
|
|
useEffect(() => {
|
|
handleSearch(query, page);
|
|
}, [query]);
|
|
|
|
return (
|
|
<section className="mb-4 md:mb-10">
|
|
<div className="container">
|
|
<p className="text-sm text-gray-500">
|
|
{total_results} filmów znaleziono dla Twojego wyszukiwania
|
|
</p>
|
|
|
|
<div className="relative">
|
|
{isLoading && (
|
|
<div className="absolute -inset-10 flex pt-60 justify-center bg-gradient-to-t from-slate-900/90 via-slate-800/50 to-transparent z-10">
|
|
<Spinner />
|
|
</div>
|
|
)}
|
|
<MovieList
|
|
showFilters={false}
|
|
overrideDisplayType="grid"
|
|
overrideMovies={results?.map((m) => ({
|
|
...m,
|
|
favorite: false,
|
|
seen: false,
|
|
genre_ids: JSON.stringify(m.genre_ids),
|
|
}))}
|
|
fluid
|
|
/>
|
|
</div>
|
|
|
|
<Pagination
|
|
totalPages={total_pages}
|
|
currentPage={page}
|
|
onPageChange={handlePageChange}
|
|
/>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|