gitadmin/moviebox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Squashed commit of the following:

Browse Source 
commit b908db03ad9a982e0cf4e9f964ad03ba06a17294
Author: Norbert Maciaszek <norbert@ambiscale.com>
Date:   Sat Aug 9 20:02:56 2025 +0200

    Add SearchPage and enhance Navbar with Search component: create a new SearchPage for displaying search results, update Navbar to include a Search component with improved UI and functionality for movie searching.

commit ac1e2e67ec9a68d022123a7f0e3fa4a6e3fbe5ea
Author: Norbert Maciaszek <norbert@ambiscale.com>
Date:   Sat Aug 9 20:02:50 2025 +0200

    Enhance MovieCard and Search components: implement a new layout for MovieCard, add interactive buttons for managing movie state, and improve Search functionality with pagination support and a refined input design.

commit ce604baf702a418252c3575a0d575221a5492372
Author: Norbert Maciaszek <norbert@ambiscale.com>
Date:   Sat Aug 9 20:02:27 2025 +0200

    Add Button and Pagination components: create reusable Button component with support for links and a Pagination component for navigating between pages, enhancing UI functionality and user experience.

commit b60a43e7e15a92f02ac6fb7eb8d5304885453e5f
Author: Norbert Maciaszek <norbert@ambiscale.com>
Date:   Sat Aug 9 20:02:13 2025 +0200

    Add logo SVG and update global styles: introduce a new logo.svg file, enhance color palette in globals.css with additional shades for primary, secondary, and accent colors, and adjust layout components to incorporate Navbar in global data layout.

commit b2bfc87bd391df65277ad78a617800f51bc8f069
Author: Norbert Maciaszek <norbert@ambiscale.com>
Date:   Sat Aug 9 20:01:15 2025 +0200

    Add custom hooks: implement useKeyListener for keyboard event handling, useLocalStorage for managing local storage state, and useOutsideClick for detecting clicks outside a specified element.

commit fdf2a72eb1f6d93163476b04c735cc4a05bf6208
Author: Norbert Maciaszek <norbert@ambiscale.com>
Date:   Sat Aug 9 20:01:08 2025 +0200

    Refactor TMDB API integration: update fetch function to accept path parameters, enhance search functionality with additional options, and include total results in SearchResult type for improved data handling.

commit 62ab1698b6372940f12ff01f819cbdf662b7ad8a
Author: Norbert Maciaszek <norbert@ambiscale.com>
Date:   Sat Aug 9 20:00:57 2025 +0200

    Update package dependencies: add dotenv, drizzle-orm, and react-icons; update drizzle-kit and tsx versions; enhance package-lock.json with new modules and dependencies for improved functionality and compatibility.
This commit is contained in:
Norbert Maciaszek
2025-08-09 20:05:48 +02:00
parent 8b1bd6e174
commit 5c3423c353
22 changed files with 2179 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/molecules/MovieList/index.tsx
View File

@@ -93,6 +93,7 @@ export const MovieList: FC<Props> = ({
{sortedMovies.map((movie) => (
<MovieCard
key={movie.id}
layout="zeus"
{...movie}
imagePath={movie.posterPath || ""}
seen={movie.seen === 1}

53
src/components/molecules/SearchMovies/index.tsx
View File

@@ -1,29 +1,53 @@
"use client";
import { SearchInput } from "@/components/atoms/SearchInput";
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";
export const SearchMovies = () => {
const [results, setResults] = useState<SearchResult["results"]>([]);
type Props = {
query: string;
};
const handleSearch = async (query: string) => {
const data = await TMDB.search(query);
setResults(data.results);
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">
<div className="row justify-center">
<div className="col-12 md:col-5">
<SearchInput onChange={handleSearch} />
</div>
</div>
<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) => (
{results?.map((result) => (
<MovieCard
layout="zeus"
key={result.id}
id={result.id}
title={result.title}
@@ -36,6 +60,11 @@ export const SearchMovies = () => {
/>
))}
</div>
<Pagination
totalPages={total_pages}
currentPage={page}
onPageChange={handlePageChange}
/>
</div>
</section>
);