68 lines
1.7 KiB
TypeScript
68 lines
1.7 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import { TMDB } from "@/lib/tmdb";
|
|
import { MovieCard } from "@/components/atoms/MovieCard";
|
|
import { SearchResult } from "@/lib/tmdb/types";
|
|
import { FC } from "react";
|
|
import { useEffect } from "react";
|
|
import { Pagination } from "@/components/atoms/Pagination";
|
|
|
|
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 handleSearch = async (query: string, page: number) => {
|
|
const data = await TMDB.search({
|
|
query,
|
|
page,
|
|
});
|
|
setResponse(data);
|
|
};
|
|
|
|
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} movies found for your search
|
|
</p>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mt-8">
|
|
{results?.map((result) => (
|
|
<MovieCard
|
|
key={result.id}
|
|
layout="zeus"
|
|
{...result}
|
|
genre_ids={result.genre_ids.join(",")}
|
|
seen={false}
|
|
favorite={false}
|
|
/>
|
|
))}
|
|
</div>
|
|
<Pagination
|
|
totalPages={total_pages}
|
|
currentPage={page}
|
|
onPageChange={handlePageChange}
|
|
/>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|