diff --git a/src/stores/Howto/howto.store.tsx b/src/stores/Howto/howto.store.tsx index 9166a7b7f4..c552e94d01 100644 --- a/src/stores/Howto/howto.store.tsx +++ b/src/stores/Howto/howto.store.tsx @@ -11,6 +11,7 @@ import { Storage } from '../storage' import { ModuleStore } from '../common/module.store' import { ISelectedTags } from 'src/models/tags.model' import { RootStore } from '..' +import { includesAll } from 'src/utils/filters' export class HowtoStore extends ModuleStore { // we have two property relating to docs that can be observed @@ -53,30 +54,13 @@ export class HowtoStore extends ModuleStore { } @computed get filteredHowtos() { - // Check if this.selectedTags is empty - if ( - Object.keys(this.selectedTags).length === 0 && - this.selectedTags.constructor === Object - ) { - return this.allHowtos - } else { - const filtered: IHowto[] = [] - this.allHowtos.map(howto => { - if (howto.tags !== undefined) { - // encapsulate howtoTags in const to avoid type error - const howtoTags = Object.keys(howto.tags) - // filter the howto containing the selected tags - const isMatching = Object.keys(this.selectedTags).every(val => { - return howtoTags.includes(val) - }) - // push the matching howto to filtered array - if (isMatching) { - filtered.push(howto) - } - } - }) - return filtered - } + const selectedTagsArr = Object.keys(this.selectedTags) + return selectedTagsArr.length > 0 + ? this.allHowtos.filter(howto => { + const tags = howto.tags ? Object.keys(howto.tags) : null + return tags ? includesAll(selectedTagsArr, tags) : false + }) + : this.allHowtos } public updateSelectedTags(tagKey: ISelectedTags) { diff --git a/src/utils/filters.ts b/src/utils/filters.ts index 3ddd09105a..fcaa36b5d0 100644 --- a/src/utils/filters.ts +++ b/src/utils/filters.ts @@ -5,6 +5,18 @@ import { ISODateString } from 'src/models/common.models' In the future this could possibly be replaced by more comprehensive libraries */ +/************************************************************************ + * Array Methods + ***********************************************************************/ +/** + * Test whether a one array contains all string values of another array + * @param arr1 The array that will be tested, e.g ["a","b","c"] + * @param arr2 The values to test, e.g. ["a","c"] + */ +export const includesAll = (arr1: string[], arr2: string[]) => { + return arr1.every(val => arr2.includes(val)) +} + /************************************************************************ * Date Methods ***********************************************************************/