85 lines
2.1 KiB
TypeScript
85 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>({
|
|
results: [],
|
|
total_results: 0,
|
|
total_pages: 0,
|
|
page: 1,
|
|
});
|
|
const { results, total_results, total_pages, page } = response;
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
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]);
|
|
|
|
const movies = results.map((m) => ({
|
|
...m,
|
|
favorite: false,
|
|
seen: false,
|
|
genre_ids: JSON.stringify(m.genre_ids),
|
|
}));
|
|
|
|
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 flex inset-0 items-center justify-center z-10 backdrop-blur">
|
|
<Spinner />
|
|
</div>
|
|
)}
|
|
<MovieList
|
|
showFilters={false}
|
|
overrideDisplayType="grid"
|
|
overrideMovies={movies}
|
|
fluid
|
|
/>
|
|
</div>
|
|
|
|
{total_pages > 1 && (
|
|
<Pagination
|
|
totalPages={total_pages}
|
|
currentPage={page}
|
|
onPageChange={handlePageChange}
|
|
/>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|