Format codes with prettier

Author: jahn96

package.json

@@ -64,7 +64,7 @@
  "eslint-config-prettier": "^6.10.1",
  "eslint-plugin-prettier": "^3.1.2",
  "mkdirp": "^1.0.3",
- "prettier": "1.16.4",
+ "prettier": "^1.16.4",
  "rimraf": "^2.6.1",
  "typescript": "~3.7.3"
  },
@@ -83,5 +83,13 @@
  }
  },
  "extension": true
+ },
+ "husky": {
+ "hooks": {
+ "pre-commit": "lint-staged"
+ }
+ },
+ "lint-staged": {
+ "*.{js,jsx,ts,tsx}": ["eslint --cache --fix", "prettier --write"]
  }
 }

src/CodeSnippetForm.ts

@@ -1,17 +1,16 @@
-
 import { Widget } from '@lumino/widgets';
 import { RequestHandler } from '@elyra/application';
 
 import checkSVGstr from '../style/check.svg';
 import { showMessage } from './ConfirmMessage';
 
-import { Dialog, showDialog} from '@jupyterlab/apputils';
+import { Dialog, showDialog } from '@jupyterlab/apputils';
 
 import { Contents } from '@jupyterlab/services';
 
 import { JSONObject } from '@lumino/coreutils';
 
-import {ICodeSnippet} from './CodeSnippetService'
+import { ICodeSnippet } from './CodeSnippetService';
 
 import { IDocumentManager } from '@jupyterlab/docmanager';
 import { CodeSnippetWidget } from './CodeSnippetWidget';
@@ -41,7 +40,7 @@ export interface IFileContainer extends JSONObject {
 }
 
 /**
- * Save an input with a dialog. This is what actually displays everything. 
+ * Save an input with a dialog. This is what actually displays everything.
  * Result.value is the value retrieved from .getValue(). ---> .getValue() returns an array of inputs.
  */
 export function inputDialog(
@@ -58,32 +57,31 @@ export function inputDialog(
  console.log(result.value);
  if (!result.value) {
  return null;
- }
- else {
+ } else {
  /* TODO: if name is already there call shouldOverwrite and change to a put request*/
  // Workaround: make a get request with result.value[0] to check... but could be slow
- RequestHandler.makePostRequest( //If i use their handler then I can't interrupt any error messages without editing their stuff.
- url,
- JSON.stringify({ 
- display_name: result.value[0],
- metadata: {
- code: [
- inputCode
- ],
+ RequestHandler.makePostRequest(
+ //If i use their handler then I can't interrupt any error messages without editing their stuff.
+ url,
+ JSON.stringify({
+ display_name: result.value[0],
+ metadata: {
+ code: [inputCode],
  description: result.value[1],
- language: result.value[2],
- },
- name: result.value[0].replace(' ','').toLowerCase(),
- schema_name: "code-snippet",
- }),
- false
+ language: result.value[2]
+  },
+  name: result.value[0].replace(' ', '').toLowerCase(),
+  schema_name: 'code-snippet'
+  }),
+  false
  );
  codeSnippet.fetchData().then((codeSnippets: ICodeSnippet[]) => {
- console.log("HELLLO");
- codeSnippet.renderCodeSnippetsSignal.emit(codeSnippets)});
+ console.log('HELLLO');
+ codeSnippet.renderCodeSnippetsSignal.emit(codeSnippets);
+ });
  showMessage({
- body: /*"Saved as Snippet"*/new MessageHandler()
-  });
+ body: /*"Saved as Snippet"*/ new MessageHandler()
+ });
  }
  // if (!isValidFileName(result.value)) {
  // void showErrorMessage(
@@ -161,19 +159,20 @@ class InputHandler extends Widget {
 
  getValue(): string[] {
  let inputs = [];
- inputs.push((this.node.getElementsByTagName('input')[0] as HTMLInputElement).value, 
- (this.node.getElementsByTagName('input')[1] as HTMLInputElement).value,
- (this.node.getElementsByTagName('input')[2] as HTMLInputElement).value);
+ inputs.push(
+ (this.node.getElementsByTagName('input')[0] as HTMLInputElement).value,
+ (this.node.getElementsByTagName('input')[1] as HTMLInputElement).value,
+ (this.node.getElementsByTagName('input')[2] as HTMLInputElement).value
+ );
  return inputs;
  }
 }
 
-
 class MessageHandler extends Widget {
-  constructor() {
-  super({ node: Private.createConfirmMessageNode() });
-  }
- } 
+ constructor() {
+ super({ node: Private.createConfirmMessageNode() });
+ }
+}
 
 /**
  * A namespace for private data.
@@ -189,7 +188,7 @@ namespace Private {
  nameTitle.textContent = 'Snippet Name*';
  nameTitle.className = INPUT_NEWNAME_TITLE_CLASS;
  const name = document.createElement('input');
- 
+
  const descriptionTitle = document.createElement('label');
  descriptionTitle.textContent = 'Description*';
  descriptionTitle.className = INPUT_NEWNAME_TITLE_CLASS;
@@ -217,8 +216,8 @@ namespace Private {
  messageContainer.className = 'jp-confirm-text';
  const message = document.createElement('text');
  message.textContent = 'Saved as Snippet!';
- messageContainer.appendChild(message)
+ messageContainer.appendChild(message);
  body.append(messageContainer);
  return body;
  }
-}
+}

src/ConfirmMessage.tsx

@@ -9,7 +9,6 @@ import { Message, MessageLoop } from '@lumino/messaging';
 import { PromiseDelegate } from '@lumino/coreutils';
 import { ArrayExt } from '@lumino/algorithm';
 
-
 /**
  * The class name for confirmation box
  */
@@ -23,40 +22,39 @@ const CONFIRM_CLASS = 'jp-confirm';
  * @returns A promise that resolves with whether the dialog was accepted.
  */
 export function showMessage<T>(
-  options: Partial<ConfirmMessage.IOptions<T>> = {}
- ): Promise<void> {
-  console.log(options);
-  const confirmMessage = new ConfirmMessage(options);
-  return confirmMessage.launch();
- }
+ options: Partial<ConfirmMessage.IOptions<T>> = {}
+): Promise<void> {
+ console.log(options);
+ const confirmMessage = new ConfirmMessage(options);
+ return confirmMessage.launch();
+}
 
 /**
  * A widget used to show confirmation message.
  */
 export class ConfirmMessage<T> extends Widget {
-
- constructor(options: Partial<ConfirmMessage.IOptions<T>> = {}){
- super();
- this.addClass(CONFIRM_CLASS);
- const renderer = ConfirmMessage.defaultRenderer; 
-
- this._host = options.host || document.body;
- const layout = (this.layout = new PanelLayout());
- const content = new Panel();
- content.addClass('jp-Message-content');
- layout.addWidget(content);
-
- const body = renderer.createBody(options.body || '');
- // body.addClass('jp-Message-body');
- // const icon = renderer.createIcon();
- // content.addWidget(icon);
- content.addWidget(body);
-
- console.log(content);
-
- void ConfirmMessage.tracker.add(this);
- }
- /**
+ constructor(options: Partial<ConfirmMessage.IOptions<T>> = {}) {
+ super();
+ this.addClass(CONFIRM_CLASS);
+ const renderer = ConfirmMessage.defaultRenderer;
+
+ this._host = options.host || document.body;
+ const layout = (this.layout = new PanelLayout());
+ const content = new Panel();
+ content.addClass('jp-Message-content');
+ layout.addWidget(content);
+
+ const body = renderer.createBody(options.body || '');
+ // body.addClass('jp-Message-body');
+ // const icon = renderer.createIcon();
+ // content.addWidget(icon);
+ content.addWidget(body);
+
+ console.log(content);
+
+ void ConfirmMessage.tracker.add(this);
+ }
+ /**
  * Launch the dialog as a modal window.
  *
  * @returns a promise that resolves with the result of the dialog.
@@ -102,7 +100,7 @@ export class ConfirmMessage<T> extends Widget {
  }
  }
 
-  /**
+ /**
  * Handle the `'click'` event for a dialog button.
  *
  * @param event - The DOM event sent to the widget
@@ -240,11 +238,11 @@ export class ConfirmMessage<T> extends Widget {
 }
 
 export namespace ConfirmMessage {
-  /**
+ /**
  * The body input types.
  */
-  export type Body<T> = IBodyWidget<T> | React.ReactElement<any> | string;
-/**
+ export type Body<T> = IBodyWidget<T> | React.ReactElement<any> | string;
+ /**
  * The options used to create a dialog.
  */
  /**
@@ -290,7 +288,7 @@ export namespace ConfirmMessage {
  }
 
  export interface IRenderer {
-  /**
+ /**
  * Create the body of the dialog.
  *
  * @param value - The input value for the body.
@@ -310,24 +308,24 @@ export namespace ConfirmMessage {
  * @returns A widget for the body.
  */
  createBody(value: Body<any>): Widget {
-  let body: Widget;
-  if (typeof value === 'string') {
-  body = new Widget({ node: document.createElement('span') });
-  body.node.textContent = value;
-  } else if (value instanceof Widget) {
-  body = value;
-  } else {
-  body = ReactWidget.create(value);
-  // Immediately update the body even though it has not yet attached in
-  // order to trigger a render of the DOM nodes from the React element.
-  MessageLoop.sendMessage(body, Widget.Msg.UpdateRequest);
-  }
-  // const iconNode = new Widget({ node: document.createElement('div') });
-  // iconNode.title.icon = checkIcon;
-  // body.
-  body.addClass('jp-Message-body');
-  // Styling.styleNode(body.node);
-  return body;
+ let body: Widget;
+ if (typeof value === 'string') {
+ body = new Widget({ node: document.createElement('span') });
+ body.node.textContent = value;
+ } else if (value instanceof Widget) {
+ body = value;
+ } else {
+ body = ReactWidget.create(value);
+ // Immediately update the body even though it has not yet attached in
+ // order to trigger a render of the DOM nodes from the React element.
+ MessageLoop.sendMessage(body, Widget.Msg.UpdateRequest);
+ }
+ // const iconNode = new Widget({ node: document.createElement('div') });
+ // iconNode.title.icon = checkIcon;
+ // body.
+ body.addClass('jp-Message-body');
+ // Styling.styleNode(body.node);
+ return body;
  }
 
  // createIcon(): Widget {
@@ -344,7 +342,7 @@ export namespace ConfirmMessage {
  // return iconWidget
  // }
  }
-  /**
+ /**
  * The default renderer instance.
  */
  export const defaultRenderer = new Renderer();
@@ -353,7 +351,7 @@ export namespace ConfirmMessage {
  * The dialog widget tracker.
  */
  export const tracker = new WidgetTracker<ConfirmMessage<any>>({
-  namespace: '@jupyterlab/code_snippet:ConfirmWidget'
+ namespace: '@jupyterlab/code_snippet:ConfirmWidget'
  });
 }
 
@@ -365,4 +363,4 @@ namespace Private {
  * The queue for launching dialogs.
  */
  export const launchQueue: Promise<void>[] = [];
-}
+}