add environment filter

Author: DarhkVoyd

pages/tools/components/Sidebar.tsx

@@ -29,6 +29,7 @@ export default function Sidebar({
     { label: 'Language', accessorKey: 'languages' },
     { label: 'Dialect', accessorKey: 'drafts' },
     { label: 'Tooling Type', accessorKey: 'toolingTypes' },
+    { label: 'Environment', accessorKey: 'environments' },
     { label: 'License', accessorKey: 'licenses' },
   ];
 
@@ -50,6 +51,9 @@ export default function Sidebar({
         toolingTypes: formData
           .getAll('toolingTypes')
           .map((value) => value as string),
+        environments: formData
+          .getAll('environments')
+          .map((value) => value as string),
       };
       postAnalytics({ eventType: 'query', eventPayload: newTransform });
       return newTransform;

pages/tools/hooks/useToolsTransform.tsx

@@ -14,6 +14,7 @@ export interface Transform {
   languages: string[];
   drafts: JSONSchemaDraft[];
   toolingTypes: string[];
+  environments: string[];
 }
 
 export type TransformUpdate =
@@ -34,6 +35,7 @@ const buildQueryString = (transform: Transform) => {
     languages: transform.languages.join(','),
     drafts: transform.drafts.join(','),
     toolingTypes: transform.toolingTypes.join(','),
+    environments: transform.environments.join(','),
   }).toString();
 };
 
@@ -50,6 +52,7 @@ export default function useToolsTransform(tools: JSONSchemaTool[]) {
     licenses: [],
     drafts: [],
     toolingTypes: [],
+    environments: [],
   });
 
   useEffect(() => {
@@ -78,6 +81,9 @@ export default function useToolsTransform(tools: JSONSchemaTool[]) {
       toolingTypes: parseArrayParam(
         query.toolingTypes,
       ) as Transform['toolingTypes'],
+      environments: parseArrayParam(
+        query.environments,
+      ) as Transform['environments'],
     };
 
     const queryString = buildQueryString(updatedTransform);
@@ -124,6 +130,7 @@ export default function useToolsTransform(tools: JSONSchemaTool[]) {
       licenses: [],
       drafts: [],
       toolingTypes: [],
+      environments: [],
     };
 
     const queryString = buildQueryString(initialTransform);
@@ -183,6 +190,7 @@ const filterTools = (
     languages: lowerCaseArray(transform.languages),
     licenses: lowerCaseArray(transform.licenses),
     toolingTypes: lowerCaseArray(transform.toolingTypes),
+    environments: lowerCaseArray(transform.environments),
     drafts: transform.drafts,
   };
 
@@ -204,14 +212,24 @@ const filterTools = (
         lowerCaseTransform.toolingTypes.includes(type.toLowerCase()),
       );
 
+    const matchesEnvironment =
+      !lowerCaseTransform.environments.length ||
+      (tool.environments || []).some((environment) =>
+        lowerCaseTransform.environments.includes(environment.toLowerCase()),
+      );
+
     const matchesDraft =
       !lowerCaseTransform.drafts.length ||
       (tool.supportedDialects?.draft || []).some((draft) =>
         lowerCaseTransform.drafts.includes(draft),
       );
 
     return (
-      matchesLanguage && matchesLicense && matchesToolingType && matchesDraft
+      matchesLanguage &&
+      matchesLicense &&
+      matchesToolingType &&
+      matchesEnvironment &&
+      matchesDraft
     );
   });
 };

pages/tools/index.page.tsx

@@ -21,7 +21,8 @@ export type FilterCriteriaFields =
   | 'languages'
   | 'drafts'
   | 'toolingTypes'
-  | 'licenses';
+  | 'licenses'
+  | 'environments';
 
 export async function getStaticProps() {
   const toolingData = yaml.load(
@@ -55,6 +56,7 @@ export async function getStaticProps() {
     ]) as JSONSchemaDraft[],
     toolingTypes: getDistinctEntries(toolingData, '$..toolingTypes[*]'),
     licenses: getDistinctEntries(toolingData, '$..license'),
+    environments: getDistinctEntries(toolingData, '$..environments[*]'),
   };
 
   filterCriteria.drafts.sort((a, b) => {