add support group for options in libraries

Author: javiert-okta

src/app/[language]/libraries/page.tsx

@@ -40,6 +40,7 @@ export default function Libraries({
   searchParams?: {
     programming_language?: string;
     algorithm?: keyof LibraryModel["support"];
+    support?: keyof LibraryModel["support"]
   };
 }) {
   const librariesDictionary = getLibrariesDictionary(languageCode);
@@ -49,10 +50,15 @@ export default function Libraries({
     encoding: "utf-8",
   });
 
-  const programmingLanguage = searchParams?.programming_language ?? "" ;
+  const programmingLanguage = searchParams?.programming_language;
   const algorithm = searchParams?.algorithm;
-  const query = programmingLanguage !== "" ? programmingLanguage : algorithm ?? "";
+  const support = searchParams?.support;
+  const query = programmingLanguage ?? algorithm ?? support ?? "";
   const dictionary = JSON.parse(source) as LibraryDictionaryModel;
+  const allOptions = Object.keys(Object.values(dictionary)[0].libs[0].support);
+  const indexAlgorithmStart = allOptions.findIndex(
+    (option) => option == "hs256"
+  );
 
   const categoryOptions: { id: string; name: string }[] = Object.values(
     dictionary
@@ -61,21 +67,30 @@ export default function Libraries({
     name: library.name,
   }));
 
-  const algorithmOptions: { value: string; label: string}[] = Object.keys(Object.values(
-    dictionary
-  )[0].libs[0].support).map(key => ({
-    value: key,
-    label: key.toUpperCase()
-  }))
+  const supportOptions: { value: string; label: string }[] = allOptions
+    .slice(0, indexAlgorithmStart)
+    .map((key) => ({
+      value: key,
+      label: key.toUpperCase(),
+    }));
 
-  const categories: LibraryCategoryModel[] = dictionary[programmingLanguage]
+  const algorithmOptions: { value: string; label: string }[] = allOptions
+    .slice(indexAlgorithmStart)
+    .map((key) => ({
+      value: key,
+      label: key.toUpperCase(),
+    }));
+
+  const categories: LibraryCategoryModel[] = programmingLanguage
     ? [dictionary[programmingLanguage]]
     : Object.values(dictionary);
 
-  const filteredCategories = algorithm
+  const categoryToFilter = algorithm ?? support
+
+  const filteredCategories = categoryToFilter
     ? categories.map((category) => {
         const filteredLibs = category.libs.filter(
-          (lib) => lib.support[algorithm]
+          (lib) => lib.support[categoryToFilter]
         );
         return {
           ...category,
@@ -190,6 +205,7 @@ export default function Libraries({
         query={query || librariesDictionary.filterPicker.defaultValue.value}
         categoryOptions={categoryOptions}
         algorithmOptions={algorithmOptions}
+        supportOptions={supportOptions}
         dictionary={librariesDictionary}
       />
       <LibraryResultsComponent

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

@@ -7,6 +7,7 @@ import { usePathname, useRouter } from "next/navigation";
 import {
   LIBRARIES_FILTER_ALGORITHM_KEY,
   LIBRARIES_FILTER_PROGRAMMING_LANGUAGE_KEY,
+  LIBRARIES_FILTER_SUPPORT_KEY,
 } from "@/libs/config/project.constants";
 import { clsx } from "clsx";
 import { getLocalizedSecondaryFont } from "@/libs/theme/fonts";
@@ -21,6 +22,7 @@ interface LibraryHeroComponentProps {
   query: string;
   categoryOptions: { id: string; name: string }[];
   algorithmOptions: { value: string; label: string }[];
+  supportOptions: { value: string; label: string }[];
   dictionary: LibrariesDictionaryModel;
 }
 
@@ -29,6 +31,7 @@ export const LibraryHeroComponent: React.FC<LibraryHeroComponentProps> = ({
   query,
   categoryOptions,
   algorithmOptions,
+  supportOptions,
   dictionary,
 }) => {
   const pathname = usePathname();
@@ -49,6 +52,9 @@ export const LibraryHeroComponent: React.FC<LibraryHeroComponentProps> = ({
       case "Algorithm":
         params.set(LIBRARIES_FILTER_ALGORITHM_KEY, selection);
         break;
+      case "Support":
+        params.set(LIBRARIES_FILTER_SUPPORT_KEY, selection);
+        break;
       default:
         break;
     }
@@ -72,6 +78,10 @@ export const LibraryHeroComponent: React.FC<LibraryHeroComponentProps> = ({
           }),
         ],
       },
+      {
+        label: "Support",
+        options: [...supportOptions],
+      },
       {
         label: "Algorithm",
         options: [...algorithmOptions],
@@ -82,6 +92,7 @@ export const LibraryHeroComponent: React.FC<LibraryHeroComponentProps> = ({
     dictionary.filterPicker.defaultValue.label,
     dictionary.filterPicker.defaultValue.value,
     algorithmOptions,
+    supportOptions
   ]);
 
   return (

src/features/libraries/models/library-filters.model.ts

@@ -1 +1 @@
-export type LibraryFilterLabel = "ProgrammingLanguage" | "Algorithm"
+export type LibraryFilterLabel = "ProgrammingLanguage" | "Algorithm" | "Support"

src/libs/config/project.constants.ts

@@ -1,8 +1,9 @@
 export const BASE_URL = "https://jwt.io";
 export const LIBRARIES_FILTER_QUERY_PARAM_KEY = "filter";
 export const LIBRARIES_FILTER_DEFAULT_VALUE = "all";
-export const LIBRARIES_FILTER_PROGRAMMING_LANGUAGE_KEY = "programming_language"
-export const LIBRARIES_FILTER_ALGORITHM_KEY = "algorithm"
+export const LIBRARIES_FILTER_PROGRAMMING_LANGUAGE_KEY = "programming_language";
+export const LIBRARIES_FILTER_ALGORITHM_KEY = "algorithm";
+export const LIBRARIES_FILTER_SUPPORT_KEY = "support";
 export enum SupportedTokenHashParamValues {
   TOKEN = "token",
   ACCESS_TOKEN = "access_token",