Clean and refactor code base

Author: jahn96

src/CodeSnippetConfirmMessage.ts

@@ -0,0 +1,84 @@
+// Copyright (c) 2020, jupytercalpoly
+// Distributed under the terms of the BSD-3 Clause License.
+
+// import { WidgetTracker, ReactWidget } from '@jupyterlab/apputils';
+import { Dialog } from '@jupyterlab/apputils';
+
+import { Widget } from '@lumino/widgets';
+import { Message } from '@lumino/messaging';
+// import { PromiseDelegate } from '@lumino/coreutils';
+// import { ArrayExt } from '@lumino/algorithm';
+
+import checkSVGstr from '../style/icon/jupyter_checkmark.svg';
+
+/**
+ * The class name for confirmation box
+ */
+// const CONFIRM_CLASS = 'jp-codeSnippet-confirm';
+const CONFIRM_CONTENT = 'jp-codeSnippet-Message-content';
+const CONFIRM_BODY = 'jp-codeSnippet-Message-body';
+const CODE_SNIPPET_CONFIRM_TEXT = 'jp-codeSnippet-confirm-text';
+
+/**
+ * Create and show a dialog.
+ *
+ * @param options - The dialog setup options.
+ *
+ * @returns A promise that resolves with whether the dialog was accepted.
+ */
+export function showMessage<T>(): Promise<Dialog.IResult<T>> {
+  const confirmMessage = new ConfirmMessage({
+    body: new MessageHandler(),
+    buttons: [],
+  });
+  return confirmMessage.launch();
+}
+
+/**
+ * A widget used to show confirmation message.
+ */
+export class ConfirmMessage<T> extends Dialog<any> {
+  constructor(options: Partial<Dialog.IOptions<T>> = {}) {
+    super(options);
+    this.children().next().addClass(CONFIRM_CONTENT);
+  }
+
+  protected onAfterAttach(msg: Message): void {
+    const node = this.node;
+    node.addEventListener('click', this, true);
+  }
+
+  /**
+   *  A message handler invoked on an `'after-detach'` message.
+   */
+  protected onAfterDetach(msg: Message): void {
+    const node = this.node;
+    node.removeEventListener('click', this, true);
+  }
+}
+
+class MessageHandler extends Widget {
+  constructor() {
+    super({ node: Private.createConfirmMessageNode() });
+    this.addClass(CONFIRM_BODY);
+  }
+}
+
+/**
+ * The namespace for module private data.
+ */
+namespace Private {
+  // create a confirm message when new snippet is created successfully
+  export function createConfirmMessageNode(): HTMLElement {
+    const body = document.createElement('div');
+    body.innerHTML = checkSVGstr;
+
+    const messageContainer = document.createElement('div');
+    messageContainer.className = CODE_SNIPPET_CONFIRM_TEXT;
+    const message = document.createElement('text');
+    message.textContent = 'Saved as Snippet!';
+    messageContainer.appendChild(message);
+    body.append(messageContainer);
+    return body;
+  }
+}

src/CodeSnippetDisplay.tsx

@@ -36,13 +36,7 @@ import {
 import { CodeEditor, IEditorServices } from '@jupyterlab/codeeditor';
 import * as nbformat from '@jupyterlab/nbformat';
 import { JupyterFrontEnd } from '@jupyterlab/application';
-import {
-  Cell,
-  CodeCellModel,
-  ICodeCellModel,
-  MarkdownCell,
-  CodeCell,
-} from '@jupyterlab/cells';
+import { CodeCellModel, MarkdownCell, CodeCell } from '@jupyterlab/cells';
 
 import { Widget } from '@lumino/widgets';
 import { find, StringExt } from '@lumino/algorithm';
@@ -51,8 +45,8 @@ import { MimeData } from '@lumino/coreutils';
 
 import React from 'react';
 import { CodeSnippetService, ICodeSnippet } from './CodeSnippetService';
-import { FilterTools } from './FilterTools';
-import { showPreview } from './PreviewSnippet';
+import { FilterTools } from './CodeSnippetFilterTools';
+import { showPreview } from './CodeSnippetPreview';
 import { showMoreOptions } from './CodeSnippetMenu';
 
 import { CodeSnippetContentsService } from './CodeSnippetContentsService';
@@ -127,6 +121,7 @@ const CODE_SNIPPET_MORE_OTPIONS_DOWNLOAD =
   'jp-codeSnippet-more-options-download';
 const CODE_SNIPPET_CREATE_NEW_BTN = 'jp-createSnippetBtn';
 const CODE_SNIPPET_NAME = 'jp-codeSnippet-name';
+const OPTIONS_BODY = 'jp-codeSnippet-options-body';
 
 /**
  * The threshold in pixels to start a drag event.
@@ -695,8 +690,7 @@ export class CodeSnippetDisplay extends React.Component<
   ): Promise<void> {
     const target = event.target as HTMLElement;
 
-    const modelFactory = new ModelFactory();
-    const model = modelFactory.createCodeCell({});
+    const model = new CodeCellModel({});
     model.value.text = codeSnippet.code.join('\n');
     model.metadata;
 
@@ -1295,7 +1289,11 @@ export class CodeSnippetDisplay extends React.Component<
         title: 'Insert, copy, edit, and delete',
         icon: moreOptionsIcon,
         onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>): void => {
-          showMoreOptions({ body: new OptionsHandler(this, codeSnippet) });
+          console.log('three dots clicked');
+          showMoreOptions({
+            body: new OptionsHandler(this, codeSnippet),
+            // buttons: [],
+          });
           this._setOptionsPosition(event);
         },
       },
@@ -1316,7 +1314,10 @@ export class CodeSnippetDisplay extends React.Component<
           event: React.MouseEvent<HTMLElement, MouseEvent>
         ): void => {
           event.preventDefault();
-          showMoreOptions({ body: new OptionsHandler(this, codeSnippet) });
+          showMoreOptions({
+            body: new OptionsHandler(this, codeSnippet),
+            // buttons: [],
+          });
           this._setOptionsPosition(event);
         }}
       >
@@ -1456,11 +1457,10 @@ export class CodeSnippetDisplay extends React.Component<
       title: 'Delete snippet?',
       body: 'Are you sure you want to delete "' + codeSnippet.name + '"? ',
       buttons: [
-        Dialog.okButton({
+        Dialog.cancelButton(),
+        Dialog.warnButton({
           label: 'Delete',
-          displayType: 'warn',
         }),
-        Dialog.cancelButton(),
       ],
     }).then((response: any): void => {
       if (response.button.accept) {
@@ -1533,6 +1533,7 @@ export class CodeSnippetDisplay extends React.Component<
   // create dropdown menu
   public createOptionsNode(codeSnippet: ICodeSnippet): HTMLElement {
     const body = document.createElement('div');
+    body.className = OPTIONS_BODY;
 
     const optionsContainer = document.createElement('div');
     optionsContainer.className = CODE_SNIPPET_MORE_OTPIONS_CONTENT;
@@ -1677,40 +1678,3 @@ class Private {
     return this.createPreviewContent();
   }
 }
-
-/**
- * A content factory for console children.
- */
-export interface IContentFactory extends Cell.IContentFactory {
-  /**
-   * Create a new code cell widget.
-   */
-  createCodeCell(options: CodeCell.IOptions): CodeCell;
-}
-
-/**
- * The default implementation of an `IModelFactory`.
- */
-export class ModelFactory {
-  /**
-   * The factory for output area models.
-   */
-  readonly codeCellContentFactory: CodeCellModel.IContentFactory;
-
-  /**
-   * Create a new code cell.
-   *
-   * @param source - The data to use for the original source data.
-   *
-   * @returns A new code cell. If a source cell is provided, the
-   *   new cell will be initialized with the data from the source.
-   *   If the contentFactory is not provided, the instance
-   *   `codeCellContentFactory` will be used.
-   */
-  createCodeCell(options: CodeCellModel.IOptions): ICodeCellModel {
-    if (!options.contentFactory) {
-      options.contentFactory = this.codeCellContentFactory;
-    }
-    return new CodeCellModel(options);
-  }
-}

src/CodeSnippetEditor.tsx

@@ -32,8 +32,8 @@ import { CodeSnippetService } from './CodeSnippetService';
 import { CodeSnippetWidget } from './CodeSnippetWidget';
 import { SUPPORTED_LANGUAGES } from './CodeSnippetLanguages';
 import { CodeSnippetEditorTags } from './CodeSnippetEditorTags';
-import { saveOverWriteFile } from './CodeSnippetInputDialog';
-import { validateInputs } from './CodeSnippetUtilities';
+import { showMessage } from './CodeSnippetConfirmMessage';
+import { validateInputs, saveOverWriteFile } from './CodeSnippetUtilities';
 
 /**
  * CSS style classes
@@ -393,6 +393,7 @@ export class CodeSnippetEditor extends ReactWidget {
             return false;
           }
         });
+        showMessage();
       }
     }
     // modify existing snippet

src/CodeSnippetEditorTags.tsx

@@ -112,7 +112,7 @@ export class CodeSnippetEditorTags extends React.Component<
   addTagOnKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {
     const inputElement = event.target as HTMLInputElement;
 
-    if (inputElement.value !== '' && event.keyCode === 13) {
+    if (inputElement.value !== '' && event.key === 'Enter') {
       if (this.state.tags.includes(inputElement.value)) {
         alert('Duplicate Tag Name!');
         return;
@@ -190,7 +190,6 @@ export class CodeSnippetEditorTags extends React.Component<
         {hasTags
           ? this.state.tags.map((tag: string, index: number) =>
               ((): JSX.Element => {
-                console.log(this.state.tags);
                 if (!this.state.selectedTags) {
                   return (
                     <ul