refactor: update Pagination and MovieList components for improved styling and functionality; adjust Button themes, enhance movie loading logic, and ensure consistent display of search results

src/components/atoms/Pagination/index.tsx

@@ -13,12 +13,13 @@ export const Pagination: FC<Props> = ({
   onPageChange,
 }) => {
   return (
-    <ul className="flex justify-center gap-3  my-10">
+    <ul className="flex justify-center gap-3 my-10 items-center">
       {currentPage > 1 && (
         <li>
           <Button
-            theme="glass"
             size="icon"
+            theme="slate"
+            className="shadow-amber-400/20 hover:shadow-amber-400/40  "
             aria-label="Previous page"
             onClick={() => onPageChange(currentPage - 1)}
           >
@@ -38,15 +39,16 @@ export const Pagination: FC<Props> = ({
         </li>
       )}
 
-      <li className="text-sm/8 font-medium tracking-widest leading-[2.8]">
+      <li className="text-sm/8 font-medium tracking-widest">
         {currentPage}/{totalPages}
       </li>
 
       {currentPage < totalPages && (
         <li>
           <Button
-            theme="glass"
+            theme="slate"
             size="icon"
+            className="shadow-amber-400/20 hover:shadow-amber-400/40"
             aria-label="Next page"
             onClick={() => onPageChange(currentPage + 1)}
           >

src/components/molecules/MovieList/index.tsx

@@ -67,7 +67,7 @@ export const MovieList: FC<Props> = ({
     sortType
   );
 
-  const [loaded, setLoaded] = useState(loadMore ? 8 : movies.length);
+  const [loaded, setLoaded] = useState(8);
   const [parent] = useAutoAnimate();
 
   const filteredMovies = movies.filter((movie) => {
@@ -105,7 +105,7 @@ export const MovieList: FC<Props> = ({
   if (sortDirection === "desc") {
     sortedMovies = sortedMovies.reverse();
   }
-  sortedMovies = sortedMovies.slice(0, loaded);
+  sortedMovies = sortedMovies.slice(0, loadMore ? loaded : movies.length);
 
   const handleFilter = (key?: keyof typeof filter) => {
     setFilter({
@@ -200,15 +200,6 @@ export const MovieList: FC<Props> = ({
 
             {showSorting && (
               <div className="flex items-center gap-3 ml-auto">
-                <Dropdown
-                  items={[
-                    { label: "Tytuł", value: "title" },
-                    { label: "Data premiery", value: "releaseDate" },
-                    { label: "Popularność", value: "popularity" },
-                  ]}
-                  defaultValue={sort}
-                  callback={(value) => setSort(value as "title")}
-                />
                 {!overrideDisplayType && (
                   <Button
                     size="icon"
@@ -220,6 +211,15 @@ export const MovieList: FC<Props> = ({
                     <FaList />
                   </Button>
                 )}
+                <Dropdown
+                  items={[
+                    { label: "Tytuł", value: "title" },
+                    { label: "Data premiery", value: "releaseDate" },
+                    { label: "Popularność", value: "popularity" },
+                  ]}
+                  defaultValue={sort}
+                  callback={(value) => setSort(value as "title")}
+                />
               </div>
             )}
           </div>

src/components/molecules/SearchMovies/index.tsx

@@ -13,15 +13,14 @@ type Props = {
 };
 
 export const SearchList: FC<Props> = ({ query }) => {
-  const [response, setResponse] = useState<SearchResult | null>(null);
+  const [response, setResponse] = useState<SearchResult>({
-  const {
+    results: [],
-    results,
+    total_results: 0,
-    total_results = 0,
+    total_pages: 0,
-    total_pages = 0,
+    page: 1,
-    page = 1,
+  });
-  } = response ?? {};
+  const { results, total_results, total_pages, page } = response;
-
+  const [isLoading, setIsLoading] = useState(true);
-  const [isLoading, setIsLoading] = useState(false);
 
   const handleSearch = async (query: string, page: number) => {
     setIsLoading(true);
@@ -44,6 +43,13 @@ export const SearchList: FC<Props> = ({ query }) => {
     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">
@@ -53,28 +59,25 @@ export const SearchList: FC<Props> = ({ query }) => {
 
         <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">
+            <div className="absolute flex inset-0 items-center justify-center z-10 backdrop-blur">
               <Spinner />
             </div>
           )}
           <MovieList
             showFilters={false}
             overrideDisplayType="grid"
-            overrideMovies={results?.map((m) => ({
+            overrideMovies={movies}
-              ...m,
-              favorite: false,
-              seen: false,
-              genre_ids: JSON.stringify(m.genre_ids),
-            }))}
             fluid
           />
         </div>
 
-        <Pagination
+        {total_pages > 1 && (
-          totalPages={total_pages}
+          <Pagination
-          currentPage={page}
+            totalPages={total_pages}
-          onPageChange={handlePageChange}
+            currentPage={page}
-        />
+            onPageChange={handlePageChange}
+          />
+        )}
       </div>
     </section>
   );