= ({ text }) => {
setIsOpen(!isOpen)}
>
{text}
diff --git a/src/components/atoms/SearchInput/index.tsx b/src/components/atoms/SearchInput/index.tsx
index 9d1b996..b47ac49 100644
--- a/src/components/atoms/SearchInput/index.tsx
+++ b/src/components/atoms/SearchInput/index.tsx
@@ -1,18 +1,23 @@
"use client";
import { FC, useEffect, useState } from "react";
+import { IoSearch } from "react-icons/io5";
type Props = {
+ className?: string;
defaultValue?: string;
placeholder?: string;
onChange?: (value: string) => void;
debounce?: number;
+ autoFocus?: boolean;
};
export const SearchInput: FC = ({
+ className = "",
defaultValue = "",
placeholder = "Search",
onChange,
debounce = 500,
+ autoFocus = false,
}) => {
const [value, setValue] = useState(defaultValue);
@@ -25,12 +30,19 @@ export const SearchInput: FC = ({
}, [value]);
return (
- setValue(e.target.value)}
- />
+
+ setValue(e.target.value)}
+ autoFocus={autoFocus}
+ />
+
+
);
};
diff --git a/src/components/molecules/MovieList/index.tsx b/src/components/molecules/MovieList/index.tsx
index 808b123..adf4f0a 100644
--- a/src/components/molecules/MovieList/index.tsx
+++ b/src/components/molecules/MovieList/index.tsx
@@ -93,6 +93,7 @@ export const MovieList: FC = ({
{sortedMovies.map((movie) => (
{
- const [results, setResults] = useState([]);
+type Props = {
+ query: string;
+};
- const handleSearch = async (query: string) => {
- const data = await TMDB.search(query);
- setResults(data.results);
+export const SearchList: FC = ({ query }) => {
+ const [response, setResponse] = useState(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 (
-
+
+ {total_results} movies found for your search
+
- {results.map((result) => (
+ {results?.map((result) => (
{
/>
))}
+
+
+
+
+
+
+
+
+ {results && (
+
+
{total_results} movies found
+
+ )}
+ {results?.slice(0, 5).map((result) => (
+
+ ))}
+ {total_results > 5 && (
+
+
+
+ )}
+
+
+
-
+
+
+
Home
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ if (!alreadyInStore) {
+ handleAdd();
+ }
+ }}
+ >
+ {!alreadyInStore &&