Modified filter so that it works on a narrowing basis when using language tags with snippet tags.

Author: kpinnipa

src/CodeSnippetDisplay.tsx

@@ -1304,7 +1304,12 @@ export class CodeSnippetDisplay extends React.Component<
     return null;
   }
 
-  filterSnippets = (searchValue: string, filterTags: string[]): void => {
+  filterSnippets = (
+    searchValue: string,
+    filterTags: string[],
+    selectedLangTags: string[]
+  ): void => {
+    // TODO: when language tag is selected, only display tags that have that tag AND the snippet tags selected.
     // filter with search
     let matchIndices: number[][] = [];
     const matchResults: StringExt.IMatchResult[] = [];
@@ -1351,12 +1356,34 @@ export class CodeSnippetDisplay extends React.Component<
       const newMatchIndices = matchIndices.slice();
       filteredSnippets = filteredSnippets.filter((codeSnippet, id) => {
         return filterTags.some((tag) => {
+          // check if filterTags has a language tag or pass in selectedLang tags
+          // then check if codeSnippet.language matches that lang. If it matches then
+          // filter by the rest of the selected snippet tags.
           if (codeSnippet.tags) {
-            if (
-              codeSnippet.tags.includes(tag) ||
-              codeSnippet.language === tag
-            ) {
-              return true;
+            if (selectedLangTags.length !== 0) {
+              // lang tags selected
+              console.log(selectedLangTags);
+              if (
+                codeSnippet.tags.includes(tag) &&
+                selectedLangTags.includes(codeSnippet.language)
+              ) {
+                return true;
+              } else if (
+                filterTags.length === selectedLangTags.length &&
+                filterTags.every((value) => selectedLangTags.includes(value))
+              ) {
+                //if only language tags are selected
+                console.log('hi');
+                if (selectedLangTags.includes(codeSnippet.language)) {
+                  return true;
+                }
+              }
+            } else {
+              // no lang tags selected
+              console.log('reached');
+              if (codeSnippet.tags.includes(tag)) {
+                return true;
+              }
             }
           }
           // if the snippet does not have the tag, remove its mathed index

src/FilterTools.tsx

@@ -9,7 +9,11 @@ import React from 'react';
 interface IFilterSnippetProps {
   languages: string[];
   allTags: string[][]; // change to [[snip], [lang]]
-  onFilter: (searchValue: string, filterTags: string[]) => void;
+  onFilter: (
+    searchValue: string,
+    filterTags: string[],
+    selectedLangTags: string[]
+  ) => void;
 }
 
 interface IFilterSnippetState {
@@ -181,7 +185,13 @@ export class FilterTools extends React.Component<
   };
 
   filterSnippets(): void {
-    this.props.onFilter(this.state.searchValue, this.state.selectedTags);
+    this.props.onFilter(
+      this.state.searchValue,
+      this.state.selectedTags,
+      this.state.selectedTags.filter((tag) =>
+        this.props.languages.includes(tag)
+      )
+    );
   }
 
   renderFilterOption(): JSX.Element {