add options to library hero to support grouped selections

Author: javiert-okta

src/features/libraries/components/library-hero/library-hero.component.tsx

@@ -3,59 +3,84 @@
 import React, { useMemo } from "react";
 import styles from "./library-hero.module.scss";
 import { BoxComponent } from "@/features/common/components/box/box.component";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { LIBRARIES_FILTER_QUERY_PARAM_KEY } from "@/libs/config/project.constants";
+import { usePathname, useRouter } from "next/navigation";
+import {
+  LIBRARIES_FILTER_ALGORITHM_KEY,
+  LIBRARIES_FILTER_PROGRAMMING_LANGUAGE_KEY,
+} from "@/libs/config/project.constants";
 import { clsx } from "clsx";
 import { getLocalizedSecondaryFont } from "@/libs/theme/fonts";
 import { LibrariesDictionaryModel } from "@/features/localization/models/libraries-dictionary.model";
 import { DebuggerPickerComponent } from "@/features/common/components/debugger-picker/debugger-picker.component";
+import { LibraryFilterLabel } from "../../models/library-filters.model";
+import { DebuggerPickerOptionModel } from "@/features/common/models/debugger-picker-option.model";
 
 interface LibraryHeroComponentProps {
   languageCode: string;
   query: string;
   categoryOptions: { id: string; name: string }[];
+  algorithmOptions: { value: string; label: string }[];
   dictionary: LibrariesDictionaryModel;
 }
 
 export const LibraryHeroComponent: React.FC<LibraryHeroComponentProps> = ({
   languageCode,
   query,
   categoryOptions,
+  algorithmOptions,
   dictionary,
 }) => {
-  const searchParams = useSearchParams();
   const pathname = usePathname();
   const { replace } = useRouter();
 
-  const handleSelection = (selection: string) => {
-    const params = new URLSearchParams(searchParams);
-
-    if (selection) {
-      params.set(LIBRARIES_FILTER_QUERY_PARAM_KEY, selection);
-    } else {
-      params.delete(LIBRARIES_FILTER_QUERY_PARAM_KEY);
+  const handleSelection = (
+    selection: string,
+    parentLabel?: LibraryFilterLabel
+  ) => {
+    if (!parentLabel) {
+      return;
+    }
+    const params = new URLSearchParams("");
+    switch (parentLabel) {
+      case "ProgrammingLanguage":
+        params.set(LIBRARIES_FILTER_PROGRAMMING_LANGUAGE_KEY, selection);
+        break;
+      case "Algorithm":
+        params.set(LIBRARIES_FILTER_ALGORITHM_KEY, selection);
+        break;
+      default:
+        break;
     }
-
     replace(`${pathname}?${params.toString()}`);
   };
 
   const options = useMemo(() => {
     return [
       {
-        value: dictionary.filterPicker.defaultValue.value,
-        label: dictionary.filterPicker.defaultValue.label,
+        label: "ProgrammingLanguage",
+        options: [
+          {
+            value: dictionary.filterPicker.defaultValue.value,
+            label: dictionary.filterPicker.defaultValue.label,
+          },
+          ...categoryOptions.map((categoryOption) => {
+            return {
+              value: categoryOption.id,
+              label: categoryOption.name,
+            };
+          }),
+        ],
+      },
+      {
+        label: "Algorithm",
+        options: [...algorithmOptions],
       },
-      ...categoryOptions.map((categoryOption) => {
-        return {
-          value: categoryOption.id,
-          label: categoryOption.name,
-        };
-      }),
-    ];
+    ] as DebuggerPickerOptionModel[];
   }, [
     categoryOptions,
     dictionary.filterPicker.defaultValue.label,
     dictionary.filterPicker.defaultValue.value,
+    algorithmOptions
   ]);
 
   return (
@@ -67,7 +92,7 @@ export const LibraryHeroComponent: React.FC<LibraryHeroComponentProps> = ({
         <h1
           className={clsx(
             styles.heroTitle,
-            getLocalizedSecondaryFont(languageCode),
+            getLocalizedSecondaryFont(languageCode)
           )}
         >
           {dictionary.title}
@@ -80,7 +105,9 @@ export const LibraryHeroComponent: React.FC<LibraryHeroComponentProps> = ({
               languageCode={languageCode}
               options={options}
               selectedOptionCode={
-                options.filter((option) => option.value === query)[0]
+                options
+                  .flatMap((group) => group.options)
+                  .filter((option) => option.value === query)[0]
               }
               handleSelection={handleSelection}
               placeholder={null}