feat: integrate database operations for movie management in global store and UI components; enhance MovieCast with dynamic cast display and button for full cast visibility

src/app/store/globalStore.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { addMovieToDB, deleteMovieFromDB, updateMovieInDB } from "@/lib/db";
 import { movies } from "@/lib/db/schema";
 import { createContext, FC, use, useEffect, useState } from "react";
 
@@ -37,14 +38,17 @@ export const GlobalStoreProvider: FC<Props> = ({ children }) => {
   const addMovie = async (movie: Movie) => {
     if (movies.find((m) => m.id === movie.id)) return;
 
+    addMovieToDB(movie);
     setMovies((prev) => [...prev, movie]);
   };
 
   const deleteMovie = async (id: number) => {
+    deleteMovieFromDB(id);
     setMovies((prev) => prev.filter((m) => m.id !== id));
   };
 
   const updateMovie = async (id: number, movie: Partial<Movie>) => {
+    updateMovieInDB(id, movie);
     setMovies((prev) =>
       prev.map((m) => (m.id === id ? { ...m, ...movie } : m))
     );

src/components/atoms/MovieCard/index.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { FC } from "react";
-import { addMovie, deleteMovie, updateMovie } from "@/lib/db";
 import { useGlobalStore } from "@/app/store/globalStore";
 import { Movie } from "@/types/global";
 import {
@@ -37,23 +36,19 @@ export const MovieCard: FC<Props> = ({
   const buttonClass =
     "p-4 text-sm transition-colors cursor-pointer text-center group/toggle";
 
-  const handleAdd = async () => {
-    await addMovie(movie);
+  const handleAdd = () => {
     addMovieToStore(movie);
   };
 
-  const handleRemove = async () => {
-    await deleteMovie(id);
+  const handleRemove = () => {
     deleteMovieFromStore(id);
   };
 
-  const handleSeen = async () => {
-    await updateMovie(id, { seen: !movie.seen });
+  const handleSeen = () => {
     updateMovieInStore(id, { seen: !movie.seen });
   };
 
-  const handleFavorite = async () => {
-    await updateMovie(id, { favorite: !movie.favorite });
+  const handleFavorite = () => {
     updateMovieInStore(id, { favorite: !movie.favorite });
   };
 

src/components/molecules/MovieCast/index.tsx

@@ -1,5 +1,7 @@
+"use client";
+import { Button } from "@/components/atoms/Button";
 import { MovieDetailsRich } from "@/lib/tmdb/types";
-import { FC } from "react";
+import { FC, useState } from "react";
 import { FaDollarSign } from "react-icons/fa";
 
 type Props = {
@@ -7,10 +9,11 @@ type Props = {
 };
 
 export const MovieCast: FC<Props> = ({ movieDetails }) => {
+  const [limitCast, setLimitCast] = useState(8);
   const director = movieDetails?.credits.crew.find(
     (member) => member.job === "Director"
   );
-  const mainCast = movieDetails?.credits.cast.slice(0, 6) || [];
+  const mainCast = movieDetails?.credits.cast.slice(0, limitCast) || [];
 
   const formatCurrency = (amount: number) =>
     new Intl.NumberFormat("pl-PL", {
@@ -26,18 +29,21 @@ export const MovieCast: FC<Props> = ({ movieDetails }) => {
           {mainCast.length > 0 && (
             <div className="lg:col-span-2">
               <h2 className="text-2xl font-bold text-white mb-6">Obsada</h2>
-              <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
                 {mainCast.map((actor) => (
                   <div key={actor.id} className="text-center group">
                     <div className="relative overflow-hidden rounded-xl mb-3">
                       <img
+                        style={{
+                          aspectRatio: "185/278",
+                        }}
                         src={
                           actor.profile_path
                             ? `https://image.tmdb.org/t/p/w185${actor.profile_path}`
                             : "/api/placeholder/185/278"
                         }
                         alt={actor.name}
-                        className="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-500"
+                        className="w-full object-cover group-hover:scale-110 transition-transform duration-500 bg-gradient-to-br from-purple-500/20 to-cyan-500/20"
                       />
                       <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                     </div>
@@ -46,6 +52,22 @@ export const MovieCast: FC<Props> = ({ movieDetails }) => {
                   </div>
                 ))}
               </div>
+
+              {limitCast < movieDetails.credits.cast.length && (
+                <div className="flex justify-center">
+                  <Button
+                    theme="teal"
+                    size="small"
+                    className="mt-6"
+                    onClick={() => {
+                      setLimitCast(movieDetails.credits.cast.length);
+                    }}
+                  >
+                    Pokaż wszystkich (
+                    {movieDetails.credits.cast.length - limitCast})
+                  </Button>
+                </div>
+              )}
             </div>
           )}
 

src/components/organisms/Hero/index.tsx

@@ -10,8 +10,6 @@ import {
 } from "react-icons/fa";
 import { RiCalendarCheckLine, RiCalendarScheduleLine } from "react-icons/ri";
 import { useGlobalStore } from "@/app/store/globalStore";
-import { addMovie, deleteMovie } from "@/lib/db";
-import { ReadMore } from "@/components/atoms/ReadMore";
 import Link from "next/link";
 import { Button } from "@/components/atoms/Button";
 
@@ -95,12 +93,10 @@ export const Hero: FC<Props> = ({
   }, [autoRotate, rotateInterval, nextSlide, movies.length]);
 
   const handleAdd = async () => {
-    await addMovie(currentMovie);
     addMovieToStore(currentMovie);
   };
 
   const handleRemove = async () => {
-    await deleteMovie(id);
     deleteMovieInStore(id);
   };
 

src/lib/db/index.ts

@@ -10,7 +10,7 @@ export const getMovies = async () => {
   return await db.select().from(movies).$withCache();
 };
 
-export const addMovie = async (movie: Movie) => {
+export const addMovieToDB = async (movie: Movie) => {
   await db
     .insert(movies)
     .values({
@@ -20,10 +20,13 @@ export const addMovie = async (movie: Movie) => {
     .onConflictDoNothing();
 };
 
-export const deleteMovie = async (id: number) => {
+export const deleteMovieFromDB = async (id: number) => {
   await db.delete(movies).where(eq(movies.id, id));
 };
 
-export const updateMovie = async (movieId: number, movie: Partial<Movie>) => {
+export const updateMovieInDB = async (
+  movieId: number,
+  movie: Partial<Movie>
+) => {
   await db.update(movies).set(movie).where(eq(movies.id, movieId));
 };