Fix #98 #99

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;
  }
 
@@ -1106,17 +1120,11 @@ export class CodeSnippetDisplay extends React.Component<
  });
  }
 
- this.setState(
- {
- codeSnippets: filteredSnippets,
- searchValue: searchValue,
- filterTags: filterTags
- },
-
- () => {
- console.log('CodeSnippets are succesfully filtered.');
- }
- );
+ this.setState({
+ codeSnippets: filteredSnippets,
+ searchValue: searchValue,
+ filterTags: filterTags
+ });
  };
 
  getActiveTags(): string[] {
@@ -1158,12 +1166,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/CodeSnippetEditor.tsx

@@ -305,7 +305,6 @@ export class CodeSnippetEditor extends ReactWidget {
  `.${CODE_SNIPPET_EDITOR}-${this._codeSnippetEditorMetaData.id} .${CODE_SNIPPET_EDITOR_LANG_INPUT}`
  ) as HTMLSelectElement).value;
 
- console.log(language);
  const validity = this.validateInputs(name, description, language);
  if (validity) {
  this.updateSnippet();
@@ -364,7 +363,6 @@ export class CodeSnippetEditor extends ReactWidget {
  this._codeSnippetEditorMetaData.description = description;
  this._codeSnippetEditorMetaData.language = language;
 
- console.log(language);
  this.saved = true;
 
  const newPath =
@@ -378,8 +376,6 @@ export class CodeSnippetEditor extends ReactWidget {
  try {
  await this.contentsService.rename(oldPath, newPath);
  } catch (error) {
- console.log('duplicate name!');
-
  await showDialog({
  title: 'Duplicate Name of Code Snippet',
  body: <p> {`"${newPath}" already exists.`} </p>,
@@ -406,14 +402,12 @@ export class CodeSnippetEditor extends ReactWidget {
  })
  .catch(() => {
  nameCheck = true;
- console.log('new snippet has been created!');
  });
  if (!nameCheck) {
  return;
  }
  }
 
- console.log(this._codeSnippetEditorMetaData.selectedTags);
  await this.contentsService.save(newPath, {
  type: 'file',
  format: 'text',

src/CodeSnippetWidget.tsx

@@ -85,7 +85,6 @@ export class CodeSnippetWidget extends ReactWidget {
  // Clear the current snippets
  this._codeSnippetWidgetModel.clearSnippets();
 
- console.log('fetching snippets!');
  await this.codeSnippetManager
  .getData('snippets', 'directory')
  .then(model => {
@@ -337,6 +336,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/ConfirmMessage.tsx

@@ -44,8 +44,6 @@ export class ConfirmMessage<T> extends Widget {
  const body = renderer.createBody(options.body);
  content.addWidget(body);
 
- console.log(content);
-
  void ConfirmMessage.tracker.add(this);
  }
 

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 {