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

feat: simplify MovieList component by consolidating filters and adding new Label component for enhanced filtering options

This commit is contained in:
Norbert Maciaszek 2025-08-21 21:46:53 +02:00
parent 64bb4cd4e4
commit 6bd1b289d7
4 changed files with 132 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/page.tsx
View File

@ -5,19 +5,7 @@ export default async function Home() {
return (
<>
<TrackedMovies />
<MovieList
heading="Nadchodzące"
filterUpcoming={1}
sortDirection="desc"
/>
<MovieList
heading="Do obejrzenia"
filterReleased={1}
filterSeen={0}
filterFavorites={0}
/>
<MovieList heading="Obejrzane" filterSeen={1} filterFavorites={0} />
<MovieList heading="Ulubione" filterFavorites={1} filterSeen={1} />
<MovieList heading="Moja lista" />
</>
);
}

14
src/components/atoms/Dropdown/index.tsx
View File

@ -2,6 +2,7 @@
import { useOutsideClick } from "@/hooks/useOutsideClick";
import { FC, useEffect, useRef, useState } from "react";
import { FaFilter } from "react-icons/fa";
import { Button } from "../Button";
type Props = {
items: {
@ -25,15 +26,12 @@ export const Dropdown: FC<Props> = ({ items, defaultValue, callback }) => {
return (
<div ref={ref} className="relative inline-block">
<button
onClick={() => setIsOpen(!isOpen)}
className="relative z-10 block p-2 shadow-sm cursor-pointer bg-white text-primary rounded-md"
>
<Button theme="glass" size="icon" onClick={() => setIsOpen(!isOpen)}>
<FaFilter />
</button>
</Button>
<div
className="absolute left-0 z-20 w-48 py-2 mt-2 origin-top-right bg-white rounded-md shadow-xl dark:bg-gray-800"
className="absolute right-0 z-20 w-48 py-2 mt-2 origin-top-right bg-gradient-to-r from-slate-800 via-slate-800/80 to-slate-900 border border-slate-700/30 shadow-lg rounded-md"
style={{
opacity: isOpen ? 1 : 0,
pointerEvents: isOpen ? "auto" : "none",
@ -45,8 +43,8 @@ export const Dropdown: FC<Props> = ({ items, defaultValue, callback }) => {
onClick={() => {
setValue(item.value);
}}
className={`block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-300 transform hover:bg-primary-50 cursor-pointer ${
value === item.value ? "bg-primary-50" : ""
className={`block px-4 py-3 text-sm text-slate-400 capitalize transition-colors duration-300 transform hover:bg-slate-700/80 cursor-pointer ${
value === item.value ? "bg-slate-700/80" : ""
}`}
>
{item.label}

20
src/components/atoms/Label/index.tsx Normal file
View File

@ -0,0 +1,20 @@
import { FC, HTMLAttributes } from "react";
type Props = HTMLAttributes<HTMLDivElement> & {
active?: boolean;
};
export const Label: FC<Props> = ({ children, className, active, ...props }) => {
return (
<div
className={`flex items-center gap-2 outline-slate-500 px-3 py-2 rounded-lg bg-slate-800/80 hover:bg-slate-700/80 transition-colors cursor-pointer group ${className} ${
active ? "outline-2" : ""
}`}
{...props}
>
<span className="text-sm text-slate-400 group-hover:text-slate-200 transition-colors">
{children}
</span>
</div>
);
};

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

@ -6,6 +6,7 @@ import { useGlobalStore } from "@/app/store/globalStore";
import { Dropdown } from "@/components/atoms/Dropdown";
import { useAutoAnimate } from "@formkit/auto-animate/react";
import { Button } from "@/components/atoms/Button";
import { Label } from "@/components/atoms/Label";
type Props = {
heading?: string;
@ -14,13 +15,14 @@ type Props = {
overrideMovies?: Movie[];
showFilters?: boolean;
filterSeen?: 0 | 1;
filterFavorites?: 0 | 1;
filterUpcoming?: 0 | 1;
filterReleased?: 0 | 1;
fluid?: boolean;
showFilters?: boolean;
showSorting?: boolean;
sort?: "title" | "releaseDate" | "popularity";
sortDirection?: "asc" | "desc";
@ -32,54 +34,62 @@ export const MovieList: FC<Props> = ({
icon,
colors = "white",
overrideMovies,
filterSeen,
filterFavorites,
filterUpcoming,
filterReleased,
fluid = false,
showFilters = true,
sort = "releaseDate",
filterSeen: filterSeenInitial,
filterFavorites: filterFavoritesInitial,
filterUpcoming: filterUpcomingInitial,
filterReleased: filterReleasedInitial,
fluid = false,
showSorting = true,
sort: sortType = "releaseDate",
sortDirection = "asc",
loadMore = false,
}) => {
const { movies: storeMovies } = useGlobalStore();
const movies = overrideMovies || storeMovies;
const [filter, setFilter] = useState<"title" | "releaseDate" | "popularity">(
sort
const [filter, setFilter] = useState({
seen: filterSeenInitial,
favorites: filterFavoritesInitial,
upcoming: filterUpcomingInitial,
released: filterReleasedInitial,
});
const [sort, setSort] = useState<"title" | "releaseDate" | "popularity">(
sortType
);
const [loaded, setLoaded] = useState(loadMore ? 4 : movies.length);
const [parent] = useAutoAnimate();
const filteredMovies = movies.filter((movie) => {
let result = true;
const today = new Date();
if (filterSeen !== undefined) {
result = movie.seen === !!filterSeen;
if (filter.seen !== undefined) {
result = movie.seen === !!filter.seen;
}
if (filterFavorites !== undefined) {
result = result && movie.favorite === !!filterFavorites;
if (filter.favorites !== undefined) {
result = result && movie.favorite === !!filter.favorites;
}
if (filterUpcoming !== undefined) {
if (filter.upcoming !== undefined) {
const releaseDate = new Date(movie.release_date);
result =
result && filterUpcoming ? releaseDate > today : releaseDate < today;
result && filter.upcoming ? releaseDate > today : releaseDate < today;
}
if (filterReleased !== undefined) {
if (filter.released !== undefined) {
const releaseDate = new Date(movie.release_date);
result =
result && filterReleased ? releaseDate < today : releaseDate > today;
result && filter.released ? releaseDate < today : releaseDate > today;
}
return result;
});
let sortedMovies = filteredMovies.sort((a, b) => {
if (filter === "title") return a.title.localeCompare(b.title);
if (filter === "releaseDate")
if (sort === "title") return a.title.localeCompare(b.title);
if (sort === "releaseDate")
return (
new Date(b.release_date).getTime() - new Date(a.release_date).getTime()
);
if (filter === "popularity") return b.popularity - a.popularity;
if (sort === "popularity") return b.popularity - a.popularity;
return 0;
});
@ -89,6 +99,16 @@ export const MovieList: FC<Props> = ({
sortedMovies = sortedMovies.reverse();
}
const handleFilter = (key?: keyof typeof filter) => {
setFilter({
seen: filterSeenInitial,
favorites: filterFavoritesInitial,
upcoming: filterUpcomingInitial,
released: filterReleasedInitial,
...(key && { [key]: 1 }),
});
};
return (
<section className="blocks">
<div className={`${fluid ? "max-w-full px-4" : "container"}`}>
@ -101,17 +121,6 @@ export const MovieList: FC<Props> = ({
{icon}
</div>
)}
{showFilters && !icon && (
<Dropdown
items={[
{ label: "Tytuł", value: "title" },
{ label: "Data premiery", value: "releaseDate" },
{ label: "Popularność", value: "popularity" },
]}
defaultValue={filter}
callback={(value) => setFilter(value as "title")}
/>
)}
<h2
className={`text-3xl font-bold ${colorsMap[colors]} bg-clip-text text-transparent text-center sm:text-left`}
>
@ -119,6 +128,71 @@ export const MovieList: FC<Props> = ({
</h2>
</div>
)}
{showFilters && (
<div className="flex flex-wrap gap-4 mt-6 p-4 rounded-xl bg-gradient-to-br from-slate-800/50 via-slate-800/30 to-slate-900/50 border border-slate-700/30 shadow-lg">
<Label
onClick={() => handleFilter()}
active={
filter.seen === filterSeenInitial &&
filter.favorites === filterFavoritesInitial &&
filter.upcoming === filterUpcomingInitial &&
filter.released === filterReleasedInitial
}
>
Wszystkie ({movies.length})
</Label>
<Label
active={filter.favorites !== undefined}
onClick={() => handleFilter("favorites")}
>
Ulubione ({movies.filter((movie) => movie.favorite).length})
</Label>
<Label
active={filter.seen !== undefined}
onClick={() => handleFilter("seen")}
>
Obejrzane ({movies.filter((movie) => movie.seen).length})
</Label>
<Label
active={filter.released !== undefined}
onClick={() => handleFilter("released")}
>
W kinach (
{
movies.filter(
(movie) => new Date(movie.release_date) < new Date()
).length
}
)
</Label>
<Label
active={filter.upcoming !== undefined}
onClick={() => handleFilter("upcoming")}
>
Nadchodzące (
{
movies.filter(
(movie) => new Date(movie.release_date) > new Date()
).length
}
)
</Label>
{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")}
/>
</div>
)}
</div>
)}
{filteredMovies.length === 0 && (
<p className="text-text/60 text-sm">Brak filmów</p>
)}