Merge pull request #186 from jahn96/codeRefactor

Refactor and clean codebase

Author: kpinnipa

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';
@@ -98,6 +92,7 @@ import {
   sasIcon,
 } from './CodeSnippetLanguages';
 import { ICodeSnippetEditorMetadata } from './CodeSnippetEditor';
+import { showMessage } from './CodeSnippetMessage';
 
 /**
  * The CSS class added to code snippet widget.
@@ -127,6 +122,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 +691,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 +1290,9 @@ 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) });
+          showMoreOptions({
+            body: new OptionsHandler(this, codeSnippet),
+          });
           this._setOptionsPosition(event);
         },
       },
@@ -1316,7 +1313,9 @@ 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),
+          });
           this._setOptionsPosition(event);
         }}
       >
@@ -1456,11 +1455,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) {
@@ -1518,6 +1516,7 @@ export class CodeSnippetDisplay extends React.Component<
           format: 'text',
           content: JSON.stringify(codeSnippet),
         });
+        showMessage('download');
       }
     });
   }
@@ -1533,6 +1532,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;
@@ -1548,7 +1548,7 @@ export class CodeSnippetDisplay extends React.Component<
     copySnip.textContent = 'Copy snippet to clipboard';
     copySnip.onclick = (): void => {
       Clipboard.copyToSystem(codeSnippet.code.join('\n'));
-      alert('saved to clipboard');
+      showMessage('copy');
       this.removeOptionsNode();
     };
     const editSnip = document.createElement('div');
@@ -1677,40 +1677,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,7 +32,8 @@ import { CodeSnippetService } from './CodeSnippetService';
 import { CodeSnippetWidget } from './CodeSnippetWidget';
 import { SUPPORTED_LANGUAGES } from './CodeSnippetLanguages';
 import { CodeSnippetEditorTags } from './CodeSnippetEditorTags';
-import { saveOverWriteFile } from './CodeSnippetInputDialog';
+import { showMessage } from './CodeSnippetMessage';
+import { validateInputs, saveOverWriteFile } from './CodeSnippetUtilities';
 
 /**
  * CSS style classes
@@ -266,7 +267,7 @@ export class CodeSnippetEditor extends ReactWidget {
               `.${CODE_SNIPPET_EDITOR}-${this._codeSnippetEditorMetaData.id} .${CODE_SNIPPET_EDITOR_LANG_INPUT}`
             ) as HTMLSelectElement).value;
 
-            const validity = this.validateInputs(name, description, language);
+            const validity = validateInputs(name, description, language);
             if (validity) {
               this.updateSnippet().then((value) => {
                 if (value) {
@@ -342,37 +343,12 @@ export class CodeSnippetEditor extends ReactWidget {
       `.${CODE_SNIPPET_EDITOR}-${this._codeSnippetEditorMetaData.id} .${CODE_SNIPPET_EDITOR_LANG_INPUT}`
     ) as HTMLSelectElement).value;
 
-    const validity = this.validateInputs(name, description, language);
+    const validity = validateInputs(name, description, language);
     if (validity) {
       this.updateSnippet();
     }
   }
 
-  private validateInputs(
-    name: string,
-    description: string,
-    language: string
-  ): boolean {
-    let status = true;
-    let message = '';
-    if (name === '') {
-      message += 'Name must be filled out\n';
-      status = false;
-    }
-    if (language === '') {
-      message += 'Language must be filled out';
-      status = false;
-    }
-    if (!SUPPORTED_LANGUAGES.includes(language)) {
-      message += 'Language must be one of the options';
-      status = false;
-    }
-    if (status === false) {
-      alert(message);
-    }
-    return status;
-  }
-
   async updateSnippet(): Promise<boolean> {
     const name = (document.querySelector(
       `.${CODE_SNIPPET_EDITOR}-${this._codeSnippetEditorMetaData.id} .${CODE_SNIPPET_EDITOR_NAME_INPUT}`
@@ -417,6 +393,7 @@ export class CodeSnippetEditor extends ReactWidget {
             return false;
           }
         });
+        showMessage('confirm');
       }
     }
     // 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