links group refactored to select multiple categories

src/app/catalog/_components/Category.tsx

@@ -1,14 +1,48 @@
 "use client";
 
-import { getCategoryName } from "@/lib/categories-map";
+import { GENDER_MAP } from "@/constants";
+
+import { getCategoryName, groupCategories } from "@/lib/categories-map";
+import { useDataContext } from "@/components/DataContext";
 import { Text } from "@/components/ui/text";
 
 import useFilterQueryParams from "./useFilterQueryParams";
 
 export default function Category() {
-  const { defaultValue: defaultCategory } = useFilterQueryParams("category");
+  const { defaultValue: selectedCategories } = useFilterQueryParams("category");
+  const { defaultValue: gender } = useFilterQueryParams("gender");
+  const { dictionary } = useDataContext();
+  const selectedCategoryIds = selectedCategories?.split(",") || [];
+  const categoriesGroups = groupCategories(
+    dictionary?.categories?.map((v) => v.name as string) || [],
+  );
+
+  const getGenderKey = (value: string) =>
+    Object.entries(GENDER_MAP).find(([_, val]) => val === value)?.[0] || value;
+
+  const getGroupTitle = () => {
+    return (
+      Object.entries(categoriesGroups).find(([_, group]) => {
+        const groupCategoryIds = group.items.map((item) => item.id);
+        return (
+          groupCategoryIds.length === selectedCategoryIds.length &&
+          groupCategoryIds.every((id) => selectedCategoryIds.includes(id))
+        );
+      })?.[1]?.title || null
+    );
+  };
+
+  if (getGroupTitle() && gender) {
+    return (
+      <Text variant="uppercase">{`${getGenderKey(gender)}'s ${getGroupTitle()}`}</Text>
+    );
+  }
 
   return (
-    <Text variant="uppercase">{`${getCategoryName(defaultCategory) || "all categories"}`}</Text>
+    <Text variant="uppercase">
+      {selectedCategories
+        ? selectedCategoryIds.map((id) => getCategoryName(id)).join(", ")
+        : "all categories"}
+    </Text>
   );
 }

src/app/catalog/_components/utils.ts

@@ -30,7 +30,7 @@ export function getProductsPagedQueryParams({
     sortFactors: sort ? [sort as common_SortFactor] : undefined,
     orderFactor: order ? (order as common_OrderFactor) : undefined,
     filterConditions: {
-      categoryIds: category ? [parseInt(category)] : undefined,
+      categoryIds: category ? category.split(",").map(id => parseInt(id)) : undefined,
       //   genderIds: gender ? [parseInt(gender)] : undefined,
       sizesIds: size ? [parseInt(size)] : undefined,
       from: undefined,

src/components/ui/desktop-nav-menu.tsx

@@ -1,11 +1,11 @@
 import Link from "next/link";
-import { useSearchParams } from "next/navigation";
 import { GENDER_MAP } from "@/constants";
 import * as NavigationMenu from "@radix-ui/react-navigation-menu";
 
 import { groupCategories } from "@/lib/categories-map";
 import { cn } from "@/lib/utils";
 import { useDataContext } from "@/components/DataContext";
+import useFilterQueryParams from "@/app/catalog/_components/useFilterQueryParams";
 
 import { Button } from "./button";
 import { Text } from "./text";
@@ -37,6 +37,7 @@ export function DesktopNavigationMenu({ className }: { className?: string }) {
                   className="w-40"
                   key={key}
                   title={category.title}
+                  gender={GENDER_MAP["men"]}
                   links={category.items.map((item) => ({
                     title: item.label.toLowerCase(),
                     href: `${item.href}&${men}`,
@@ -64,6 +65,7 @@ export function DesktopNavigationMenu({ className }: { className?: string }) {
                   className="w-40"
                   key={key}
                   title={category.title}
+                  gender={GENDER_MAP["women"]}
                   links={category.items.map((item) => ({
                     title: item.label.toLowerCase(),
                     href: `${item.href}&${women}`,
@@ -96,17 +98,36 @@ function LinksGroup({
   className,
   title,
   links,
+  gender,
 }: {
   groupIndex: number;
   className?: string;
   title: string;
+  gender: string;
   links: {
     title: string;
     href: string;
     id: string;
   }[];
 }) {
-  const category = useSearchParams().get("category");
+  const { defaultValue: category } = useFilterQueryParams("category");
+  const { defaultValue: currentGender } = useFilterQueryParams("gender");
+  const selectedCategories = category?.split(",") || [];
+  const genderCategories = currentGender === gender ? selectedCategories : [];
+  const isSelectedCategory = (id: string) => genderCategories.includes(id);
+
+  const getViewAllHref = () => {
+    const groupCategoryIds = links.map((link) => link.id);
+    return `/catalog?category=${encodeURIComponent(groupCategoryIds.join(","))}&gender=${gender}`;
+  };
+
+  const getNewHref = (id: string) => {
+    const newCategories = isSelectedCategory(id)
+      ? genderCategories.filter((v) => v !== id)
+      : [...genderCategories, id];
+
+    return `/catalog?category=${encodeURIComponent(newCategories.join(","))}&gender=${gender}`;
+  };
 
   return (
     <div className={cn("space-y-4", className)}>
@@ -116,16 +137,18 @@ function LinksGroup({
       <div className="space-y-2">
         <div className="w-full">
           <Button variant="simpleReverse" asChild>
-            <NavigationMenu.Link href="/catalog">view all</NavigationMenu.Link>
+            <NavigationMenu.Link href={getViewAllHref()}>
+              view all
+            </NavigationMenu.Link>
           </Button>
         </div>
         {links.map((link) => (
           <div className="w-full" key={link.href}>
             <Button
-              variant={category === link.id ? "simple" : "simpleReverse"}
+              variant={isSelectedCategory(link.id) ? "simple" : "simpleReverse"}
               asChild
             >
-              <NavigationMenu.Link href={link.href}>
+              <NavigationMenu.Link href={getNewHref(link.id)}>
                 {link.title}
               </NavigationMenu.Link>
             </Button>

src/components/ui/mobile-menu-dialog.tsx

@@ -5,6 +5,7 @@ import * as DialogPrimitives from "@radix-ui/react-dialog";
 import { groupCategories } from "@/lib/categories-map";
 import CurrencyPopover from "@/app/_components/currency-popover";
 import NewslatterForm from "@/app/_components/newslatter-form";
+import useFilterQueryParams from "@/app/catalog/_components/useFilterQueryParams";
 
 import { useDataContext } from "../DataContext";
 import { Button } from "./button";
@@ -66,11 +67,30 @@ function Menu({
   setActiveCategory: (category: "men" | "women" | undefined) => void;
 }) {
   const { dictionary } = useDataContext();
-
+  const { defaultValue: category } = useFilterQueryParams("category");
+  const { defaultValue: currentGender } = useFilterQueryParams("gender");
   const categoriesGroups = groupCategories(
     dictionary?.categories?.map((v) => v.name as string) || [],
   );
 
+  const selectedCategories = category?.split(",") || [];
+  const genderCategories =
+    currentGender === GENDER_MAP[activeCategory!] ? selectedCategories : [];
+  const isSelectedCategory = (id: string) => genderCategories.includes(id);
+
+  const getViewAllHref = (items: { id: string }[]) => {
+    const groupCategoryIds = items.map((item) => item.id);
+    return `/catalog?category=${encodeURIComponent(groupCategoryIds.join(","))}&gender=${GENDER_MAP[activeCategory!]}`;
+  };
+
+  const getNewHref = (id: string) => {
+    const newCategories = isSelectedCategory(id)
+      ? genderCategories.filter((v) => v !== id)
+      : [...genderCategories, id];
+
+    return `/catalog?category=${encodeURIComponent(newCategories.join(","))}&gender=${GENDER_MAP[activeCategory!]}`;
+  };
+
   return (
     <div className="flex h-full grow flex-col justify-between overflow-y-auto bg-bgColor p-2">
       {activeCategory === undefined ? (
@@ -122,15 +142,18 @@ function Menu({
               <div className="space-y-4">
                 <DialogPrimitives.Close asChild>
                   <Button variant="simpleReverse" asChild>
-                    <Link href="/catalog">view all</Link>
+                    <Link href={getViewAllHref(category.items)}>view all</Link>
                   </Button>
                 </DialogPrimitives.Close>
                 {category.items.map((item) => (
                   <DialogPrimitives.Close key={item.id} asChild>
-                    <Button variant="simpleReverse" asChild>
-                      <Link
-                        href={`${item.href}&gender=${GENDER_MAP[activeCategory]}`}
-                      >
+                    <Button
+                      variant={
+                        isSelectedCategory(item.id) ? "simple" : "simpleReverse"
+                      }
+                      asChild
+                    >
+                      <Link href={getNewHref(item.id)}>
                         {item.label.toLowerCase()}
                       </Link>
                     </Button>