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

src/components/molecules/MovieList/index.tsx

@@ -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>
         )}