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

Refactor movie filtering and management features: update MovieList and MovieCard components to use new filter props; enhance global store with updateMovie functionality; implement movie state updates for seen and favorite statuses.

Browse Source
This commit is contained in:
Norbert Maciaszek
2025-08-05 22:30:53 +02:00
parent b08cdea130
commit 3809110a39
5 changed files with 93 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/atoms/MovieCard/index.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { FC, useState } from "react";
import { FC } from "react";
import { ReadMore } from "../ReadMore";
import { addMovie, deleteMovie } from "@/lib/db";
import { addMovie, deleteMovie, updateMovie } from "@/lib/db";
import { useGlobalStore } from "@/app/store/globalStore";
type Props = {
@@ -16,6 +16,8 @@ type Props = {
notes?: string;
};
const buttonClass = "px-2 py-6 text-sm w-full transition-colors cursor-pointer";
export const MovieCard: FC<Props> = ({
id,
title,
@@ -31,9 +33,12 @@ export const MovieCard: FC<Props> = ({
movies,
addMovie: addMovieToStore,
deleteMovie: deleteMovieFromStore,
updateMovie: updateMovieInStore,
} = useGlobalStore();
const alreadyInStore = movies.find((m) => m.id === id);
const isReleased = new Date(releaseDate) < new Date();
const handleAdd = async () => {
const movie = {
id,
@@ -55,6 +60,16 @@ export const MovieCard: FC<Props> = ({
deleteMovieFromStore(id);
};
const handleSeen = async () => {
await updateMovie(id, { seen: seen ? 0 : 1 });
updateMovieInStore(id, { seen: seen ? 0 : 1 });
};
const handleFavorite = async () => {
await updateMovie(id, { favorite: favorite ? 0 : 1 });
updateMovieInStore(id, { favorite: favorite ? 0 : 1 });
};
return (
<div className="flex w-full shadow-md rounded-lg overflow-hidden mx-auto group/card">
<div className="overflow-hidden rounded-xl relative movie-item text-white movie-card">
@@ -85,22 +100,41 @@ export const MovieCard: FC<Props> = ({
</div>
</div>
</div>
<div className="absolute top-0 z-10 bg-transparent inset-x-0 group-hover/card:bg-white/50 transition-all opacity-0 group-hover/card:opacity-100 flex justify-center">
{/* <div className="absolute top-0 z-10 bg-transparent inset-x-0 group-hover/card:bg-white/50 transition-all opacity-0 group-hover/card:opacity-100 flex flex-col justify-center"> */}
<div className="absolute top-0 z-10 bg-transparent inset-0 group-hover/card:bg-black/50 transition-all opacity-0 group-hover/card:opacity-100 flex flex-col justify-center">
{!alreadyInStore && (
<button
className="bg-primary/70 text-white px-4 py-2 rounded-md w-full hover:bg-primary transition-colors cursor-pointer"
className={`${buttonClass} bg-primary/70 text-white hover:bg-primary`}
onClick={handleAdd}
>
Add to watchlist
</button>
)}
{alreadyInStore && (
<button
className="bg-primary/70 text-white px-4 py-2 rounded-md w-full hover:bg-primary transition-colors cursor-pointer"
onClick={handleRemove}
>
Remove from watchlist
</button>
<>
{isReleased && (
<button
className={`${buttonClass} bg-accent/70 text-white hover:bg-accent`}
onClick={handleSeen}
>
{seen ? "Mark as unseen" : "Mark as seen"}
</button>
)}
<button
className={`${buttonClass} bg-amber-400/70 text-white hover:bg-amber-500`}
onClick={handleFavorite}
>
{favorite ? "Remove favorite" : "Add to favorites"}
</button>
<button
className={`${buttonClass} bg-primary/70 text-white hover:bg-primary`}
onClick={handleRemove}
>
Remove from watchlist
</button>
</>
)}
</div>
<figure className="absolute inset-0 w-full bottom-[20%]">