Add labels to applied static filters

yext · Nov 2, 2021 · 90fafc7 · 90fafc7
1 parent 9c5c492
commit 90fafc7
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 6 deletions.
diff --git a/sample-app/src/components/DecoratedAppliedFilters.tsx b/sample-app/src/components/DecoratedAppliedFilters.tsx
@@ -3,23 +3,25 @@ import { AppliedQueryFilter } from "@yext/answers-core";
 import { useAnswersState } from '@yext/answers-headless-react';
 import { GroupedFilters } from '../models/groupedFilters';
 import { getGroupedAppliedFilters } from '../utils/appliedfilterutils';
+import { StaticFiltersLabelConfig } from "./StaticFilters";
 
 export interface DecoratedAppliedFiltersConfig {
   showFieldNames?: boolean,
   hiddenFields?: Array<string>,
   labelText?: string,
   delimiter?: string,
+  staticFiltersGroupLabels?: Record<string, StaticFiltersLabelConfig>,
   appliedQueryFilters?: AppliedQueryFilter[]
 }
 
 /**
  * Container component for AppliedFilters
  */
 export function DecoratedAppliedFiltersDisplay(props : DecoratedAppliedFiltersConfig): JSX.Element {
-  const { hiddenFields = [], appliedQueryFilters = [], ...otherProps } = props;
+  const { hiddenFields = [], staticFiltersGroupLabels = {}, appliedQueryFilters = [], ...otherProps } = props;
   const state = useAnswersState(state => state);
   const filterState = state.vertical.results ? state.filters : {};
-  const groupedFilters: Array<GroupedFilters> = getGroupedAppliedFilters(filterState, appliedQueryFilters, hiddenFields);
+  const groupedFilters: Array<GroupedFilters> = getGroupedAppliedFilters(filterState, appliedQueryFilters, hiddenFields, staticFiltersGroupLabels);
   return <AppliedFilters appliedFilters={groupedFilters} {...otherProps}/>
 }
 

diff --git a/sample-app/src/components/StaticFilters.tsx b/sample-app/src/components/StaticFilters.tsx
@@ -2,6 +2,10 @@ import React, { Fragment } from 'react';
 import { Filter, CombinedFilter, FilterCombinator, Matcher } from '@yext/answers-core';
 import { AnswersHeadlessContext } from '@yext/answers-headless-react';
 
+export interface StaticFiltersLabelConfig {
+  label: string
+}
+
 interface CheckBoxProps {
   fieldId: string,
   value: string,

diff --git a/sample-app/src/pages/VerticalSearchPage.tsx b/sample-app/src/pages/VerticalSearchPage.tsx
@@ -50,6 +50,12 @@ const facetConfigs = {
   }
 }
 
+const staticFiltersGroupLabels = {
+  c_employeeCountry: {
+    label: 'Employee Country'
+  }
+}
+
 export default function VerticalSearchPage(props: {
   verticalKey: string
 }) {
@@ -87,6 +93,7 @@ export default function VerticalSearchPage(props: {
           showFieldNames={true}
           hiddenFields={['builtin.entityType']}
           delimiter='|'
+          staticFiltersGroupLabels={staticFiltersGroupLabels}
         />
         <AlternativeVerticals
           currentVerticalLabel='People'

diff --git a/sample-app/src/utils/appliedfilterutils.tsx b/sample-app/src/utils/appliedfilterutils.tsx
@@ -9,6 +9,7 @@ import {
   getDisplayableAppliedFacets,
   getDisplayableNlpFilters
 } from "./displayablefilterutils";
+import { StaticFiltersLabelConfig } from "../components/StaticFilters";
 
 /**
  * Returns a new list of nlp filters with duplicates of other filters and 
@@ -63,9 +64,10 @@ function createGroupedFilters(
 export function getGroupedAppliedFilters(
   appliedFiltersState: FiltersState,
   nlpFilters: AppliedQueryFilter[],
-  hiddenFields: string[]
+  hiddenFields: string[],
+  staticFiltersGroupLabels: Record<string, StaticFiltersLabelConfig>
 ): Array<GroupedFilters>  {
-  const displayableStaticFilters = getDisplayableStaticFilters(flattenFilters(appliedFiltersState?.static));
+  const displayableStaticFilters = getDisplayableStaticFilters(flattenFilters(appliedFiltersState?.static), staticFiltersGroupLabels);
   const displayableFacets = getDisplayableAppliedFacets(appliedFiltersState?.facets);
   const displayableNlpFilters = getDisplayableNlpFilters(nlpFilters);
 

diff --git a/sample-app/src/utils/displayablefilterutils.tsx b/sample-app/src/utils/displayablefilterutils.tsx
@@ -1,4 +1,5 @@
 import { AppliedQueryFilter, Filter, DisplayableFacet } from '@yext/answers-core';
+import { StaticFiltersLabelConfig } from '../components/StaticFilters';
 import { DisplayableFilter } from '../models/displayableFilter';
 import { getFilterDisplayValue } from './filterutils';
 
@@ -29,13 +30,16 @@ export function getDisplayableAppliedFacets(facets: DisplayableFacet[] | undefin
 /**
  * Convert a list of static filters to DisplayableFilter format.
  */
-export function getDisplayableStaticFilters(filters: Filter[]): DisplayableFilter[] {
+export function getDisplayableStaticFilters(
+  filters: Filter[],
+  groupLabels: Record<string, StaticFiltersLabelConfig>
+): DisplayableFilter[] {
   let appliedStaticFilters: DisplayableFilter[] = [];
   filters?.forEach(filter => {
     appliedStaticFilters.push({
       filterType: 'STATIC_FILTER',
       filter: filter,
-      groupLabel: filter.fieldId,
+      groupLabel: groupLabels?.[filter.fieldId]?.label || filter.fieldId,
       label: getFilterDisplayValue(filter),
     });
   });