rename and use spread operator for array concat

sample-app/src/components/AppliedFilters.tsx

@@ -1,4 +1,4 @@
-import { DisplayableAppliedFilter } from '../models/displayableFilter';
+import { DisplayableFilter } from '../models/displayableFilter';
 import { GroupedFilters } from '../models/groupedFilters';
 import '../sass/AppliedFilters.scss';
 
@@ -37,8 +37,8 @@ function renderFilterLabel(label: string): JSX.Element {
   );
 }
 
-function renderAppliedFilters(filters: Array<DisplayableAppliedFilter>): JSX.Element {
-  const filterElems = filters.map((filter: DisplayableAppliedFilter, index: number) => {
+function renderAppliedFilters(filters: Array<DisplayableFilter>): JSX.Element {
+  const filterElems = filters.map((filter: DisplayableFilter, index: number) => {
     return (
       <div className="AppliedFilters__filterValue" key={filter.label}>
         <span className="AppliedFilters__filterValueText">{filter.label}</span>

sample-app/src/models/displayableFilter.ts

@@ -1,6 +1,6 @@
 import { Filter } from '@yext/answers-core';
 
-export interface DisplayableAppliedFilter {
+export interface DisplayableFilter {
   filterType: 'NLP_FILTER' | 'STATIC_FILTER' | 'FACET',
   filter: Filter,
   groupLabel: string,

sample-app/src/utils/filterutils.tsx

@@ -2,7 +2,7 @@ import { AppliedQueryFilter, CombinedFilter, Filter, DisplayableFacet, NearFilte
 import { FiltersState } from '@yext/answers-headless/lib/esm/models/slices/filters';
 import { mapArrayToObject } from '../utils/arrayutils';
 import { GroupedFilters } from '../models/groupedFilters';
-import { DisplayableAppliedFilter } from '../models/displayableFilter';
+import { DisplayableFilter } from '../models/displayableFilter';
 
 /**
  * Check if the object follows CombinedFilter interface
@@ -56,10 +56,10 @@ export function isDuplicateFilter(thisFilter: Filter, otherFilter: Filter): bool
  * filter listed in hiddenFields removed from the given nlp filter list.
  */
 function pruneNlpFilters (
-  nlpFilters: DisplayableAppliedFilter[], 
-  appliedFilters: DisplayableAppliedFilter[], 
+  nlpFilters: DisplayableFilter[], 
+  appliedFilters: DisplayableFilter[], 
   hiddenFields: string[]
-): DisplayableAppliedFilter[] {
+): DisplayableFilter[] {
   const duplicatesRemoved = nlpFilters.filter(nlpFilter => {
     const isDuplicate = appliedFilters.find(appliedFilter =>
       isDuplicateFilter(nlpFilter.filter, appliedFilter.filter)
@@ -74,7 +74,7 @@ function pruneNlpFilters (
  * from the given applied filter list.
  */
 function pruneAppliedFilters(
-  appliedFilters: DisplayableAppliedFilter[], hiddenFields: string[]): DisplayableAppliedFilter[] {
+  appliedFilters: DisplayableFilter[], hiddenFields: string[]): DisplayableFilter[] {
   return appliedFilters.filter(appliedFilter => {
     return !hiddenFields.includes(appliedFilter.filter.fieldId);
   });
@@ -85,12 +85,12 @@ function pruneAppliedFilters(
  * list of filters under that same label or category.
  */
 function createGroupedFilters(
-  appliedFilters: DisplayableAppliedFilter[],
-  nlpFilters: DisplayableAppliedFilter[]
+  appliedFilters: DisplayableFilter[],
+  nlpFilters: DisplayableFilter[]
 ): Array<GroupedFilters> {
-  const getGroupLabel = (filter: DisplayableAppliedFilter) => filter.groupLabel;
-  const allFilters = appliedFilters.concat(nlpFilters);
-  const groupedFilters: Record<string, DisplayableAppliedFilter[]> = mapArrayToObject(allFilters, getGroupLabel);
+  const getGroupLabel = (filter: DisplayableFilter) => filter.groupLabel;
+  const allFilters = [...appliedFilters, ...nlpFilters];
+  const groupedFilters: Record<string, DisplayableFilter[]> = mapArrayToObject(allFilters, getGroupLabel);
   return Object.keys(groupedFilters).map(label => ({
     label: label,
     filters: groupedFilters[label]
@@ -112,10 +112,10 @@ function getFilterDisplayValue(filter: Filter): string {
 }
 
 /**
- * convert a list of facets to DisplayableAppliedFilter format with only selected facets returned.
+ * convert a list of facets to DisplayableFilter format with only selected facets returned.
  */
 function getDisplayableAppliedFacets(facets: DisplayableFacet[] | undefined) {
-  let appliedFacets: DisplayableAppliedFilter[] = [];
+  let appliedFacets: DisplayableFilter[] = [];
   facets?.forEach(facet => {
     facet.options.forEach(option => {
       if(option.selected) {
@@ -136,10 +136,10 @@ function getDisplayableAppliedFacets(facets: DisplayableFacet[] | undefined) {
 }
 
 /**
- * convert a list of static filters to DisplayableAppliedFilter format.
+ * convert a list of static filters to DisplayableFilter format.
  */
 function getDisplayableStaticFilters(filters: Filter[]) {
-  let appliedStaticFilters: DisplayableAppliedFilter[] = [];
+  let appliedStaticFilters: DisplayableFilter[] = [];
   filters?.forEach(filter => {
     appliedStaticFilters.push({
       filterType: 'STATIC_FILTER',
@@ -152,10 +152,10 @@ function getDisplayableStaticFilters(filters: Filter[]) {
 }
 
 /**
- * convert a list of nlp filters to DisplayableAppliedFilter format.
+ * convert a list of nlp filters to DisplayableFilter format.
  */
 function getDisplayableNlpFilters(filters: AppliedQueryFilter[]) {
-  let appliedNplFilters: DisplayableAppliedFilter[] = [];
+  let appliedNplFilters: DisplayableFilter[] = [];
   filters?.forEach(filter => {
     appliedNplFilters.push({
       filterType: 'NLP_FILTER',
@@ -180,7 +180,7 @@ export function getGroupedAppliedFilters(
   const displayableFacets = getDisplayableAppliedFacets(appliedFiltersState?.facets);
   const displayableNlpFilters = getDisplayableNlpFilters(nlpFilters);
 
-  const appliedFilters = displayableStaticFilters.concat(displayableFacets);
+  const appliedFilters = [...displayableStaticFilters, ...displayableFacets];
   const prunedAppliedFilters = pruneAppliedFilters(appliedFilters, hiddenFields);
   const prunedNlpFilters = pruneNlpFilters (displayableNlpFilters, prunedAppliedFilters, hiddenFields);