Fix #98 #99

Author: jahn96

src/CodeSnippetDisplay.tsx

@@ -1072,17 +1072,31 @@ export class CodeSnippetDisplay extends React.Component<
     props: ICodeSnippetDisplayProps,
     state: ICodeSnippetDisplayState
   ): ICodeSnippetDisplayState {
-    if (
-      props.codeSnippets !== state.codeSnippets &&
-      state.searchValue === '' &&
-      state.filterTags.length === 0
-    ) {
+    if (state.searchValue === '' && state.filterTags.length === 0) {
       return {
         codeSnippets: props.codeSnippets,
         searchValue: '',
         filterTags: []
       };
     }
+
+    if (state.searchValue !== '' || state.filterTags.length !== 0) {
+      const newSnippets = props.codeSnippets.filter(codeSnippet => {
+        return (
+          (state.searchValue !== '' &&
+            codeSnippet.name.toLowerCase().includes(state.searchValue)) ||
+          (state.searchValue !== '' &&
+            codeSnippet.language.toLowerCase().includes(state.searchValue)) ||
+          (codeSnippet.tags &&
+            codeSnippet.tags.some(tag => state.filterTags.includes(tag)))
+        );
+      });
+      return {
+        codeSnippets: newSnippets,
+        searchValue: state.searchValue,
+        filterTags: state.filterTags
+      };
+    }
     return null;
   }
 
@@ -1158,12 +1172,19 @@ export class CodeSnippetDisplay extends React.Component<
           editor.dispose();
         }
 
+        // deleting snippets when there is one snippet active
         contentsService.delete('snippets/' + codeSnippet.name + '.json');
         this.props._codeSnippetWidgetModel.deleteSnippet(codeSnippet.id);
         this.props._codeSnippetWidgetModel.updateSnippetContents();
-        this.setState({
-          codeSnippets: this.props._codeSnippetWidgetModel.snippets
-        });
+
+        // active tags after delete
+        const activeTags = this.getActiveTags();
+
+        // filterTags: only the tags that are still being used
+        this.setState(state => ({
+          codeSnippets: this.props._codeSnippetWidgetModel.snippets,
+          filterTags: state.filterTags.filter(tag => activeTags.includes(tag))
+        }));
       }
     });
   }

src/CodeSnippetWidget.tsx

@@ -337,6 +337,15 @@ export class CodeSnippetWidget extends ReactWidget {
      */
     const source = event.source;
     if (source instanceof CodeSnippetDisplay) {
+      if (
+        source.state.searchValue !== '' ||
+        source.state.filterTags.length !== 0
+      ) {
+        alert(
+          "Sorry, in the current version, you can't move snippets within explorer while filtering or searching"
+        );
+        return;
+      }
       event.dropAction = 'move';
       if (event.mimeData.hasData('snippet/id')) {
         const srcIdx = event.mimeData.getData('snippet/id') as number;

src/FilterTools.tsx

@@ -9,7 +9,7 @@ interface IFilterSnippetProps {
 
 interface IFilterSnippetState {
   show: boolean;
-  filteredTags: string[];
+  selectedTags: string[];
   searchValue: string;
 }
 
@@ -31,7 +31,7 @@ export class FilterTools extends React.Component<
 > {
   constructor(props: IFilterSnippetProps) {
     super(props);
-    this.state = { show: false, filteredTags: [], searchValue: '' };
+    this.state = { show: false, selectedTags: [], searchValue: '' };
     this.createFilterBox = this.createFilterBox.bind(this);
     this.renderFilterOption = this.renderFilterOption.bind(this);
     this.renderTags = this.renderTags.bind(this);
@@ -40,6 +40,20 @@ export class FilterTools extends React.Component<
     this.filterSnippets = this.filterSnippets.bind(this);
   }
 
+  componentDidMount() {
+    this.setState({ show: false, selectedTags: [], searchValue: '' });
+  }
+
+  componentDidUpdate(prevProps: IFilterSnippetProps) {
+    if (prevProps !== this.props) {
+      this.setState(state => ({
+        selectedTags: state.selectedTags.filter(tag =>
+          this.props.tags.includes(tag)
+        )
+      }));
+    }
+  }
+
   createFilterBox(): void {
     const filterArrow = document.querySelector(`.${FILTER_ARROW_UP}`);
 
@@ -78,10 +92,10 @@ export class FilterTools extends React.Component<
 
     this.setState(
       state => ({
-        filteredTags: this.handleClickHelper(
+        selectedTags: this.handleClickHelper(
           target,
           parent,
-          state.filteredTags,
+          state.selectedTags,
           clickedTag
         )
       }),
@@ -138,7 +152,7 @@ export class FilterTools extends React.Component<
   };
 
   filterSnippets(): void {
-    this.props.onFilter(this.state.searchValue, this.state.filteredTags);
+    this.props.onFilter(this.state.searchValue, this.state.selectedTags);
   }
 
   renderFilterOption(): JSX.Element {