From 58cbb2dff376bf583fedceafac2bbd8851f06046 Mon Sep 17 00:00:00 2001
From: Lay Mui <mui_ume@hotmail.com>
Date: Sat, 27 Jun 2020 21:25:58 +0800
Subject: [PATCH] @autobind decorator

replace bind(this) with autobind decorator
---
 README.md     |   6 +-
 app.css       |   1 -
 index.html    |   6 +-
 src/app.ts    | 363 ++++----------------------------------------------
 tsconfig.json |  29 ++--
 5 files changed, 47 insertions(+), 358 deletions(-)

diff --git a/README.md b/README.md
index 4e6f568..08ccf18 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,4 @@
-## Learning Typescript
 ## To get started
-
 Run 
 ```
 npm i
@@ -8,8 +6,10 @@ tsc -w
 npm start 
 ```
 
+# To run typescript compilation in watch mode
+# to rebuild the JS 
+tsc -w 
 
-tsc -w :To run typescript compilation in watch mode to rebuild the JS 
 
 ### Using decorators for validation
 
diff --git a/app.css b/app.css
index 8aa73fc..c831cfc 100644
--- a/app.css
+++ b/app.css
@@ -91,7 +91,6 @@ button:active {
   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.26);
   padding: 1rem;
   margin: 1rem;
-  background: white;
 }
 
 .projects li h2 {
diff --git a/index.html b/index.html
index a0fcc35..645b51c 100644
--- a/index.html
+++ b/index.html
@@ -27,11 +27,7 @@
       </form>
     </template>
     <template id="single-project">
-      <li draggable="true">
-        <h2></h2>
-        <h3></h3>
-        <p></p>
-      </li>
+      <li></li>
     </template>
     <template id="project-list">
       <section class="projects">
diff --git a/src/app.ts b/src/app.ts
index a802396..1569300 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -1,133 +1,9 @@
-// Drag & Drop Interfaces
-interface Draggable {
-  dragStartHandler(event: DragEvent): void;
-  dragEndHandler(event: DragEvent): void;
-}
-
-interface DragTarget {
-  dragOverHandler(event: DragEvent): void;
-  dropHandler(event: DragEvent): void;
-  dragLeaveHandler(event: DragEvent): void;
-}
-
-// Project Type
-enum ProjectStatus {
-  Active,
-  Finished
-}
-
-class Project {
-  constructor(
-    public id: string,
-    public title: string,
-    public description: string,
-    public people: number,
-    public status: ProjectStatus
-  ) {}
-}
-
-// Project State Management
-type Listener<T> = (items: T[]) => void;
-
-class State<T> {
-  protected listeners: Listener<T>[] = [];
-
-  addListener(listenerFn: Listener<T>) {
-    this.listeners.push(listenerFn);
-  }
-}
-
-class ProjectState extends State<Project> {
-  private projects: Project[] = [];
-  private static instance: ProjectState;
-
-  private constructor() {
-    super();
-  }
-
-  static getInstance() {
-    if (this.instance) {
-      return this.instance;
-    }
-    this.instance = new ProjectState();
-    return this.instance;
-  }
-
-  addProject(title: string, description: string, numOfPeople: number) {
-    const newProject = new Project(
-      Math.random().toString(),
-      title,
-      description,
-      numOfPeople,
-      ProjectStatus.Active
-    );
-    this.projects.push(newProject);
-    this.updateListeners();
-  }
-
-  moveProject(projectId: string, newStatus: ProjectStatus) {
-    const project = this.projects.find(prj => prj.id === projectId);
-    if (project && project.status !== newStatus) {
-      project.status = newStatus;
-      this.updateListeners();
-    }
-  }
-
-  private updateListeners() {
-    for (const listenerFn of this.listeners) {
-      listenerFn(this.projects.slice());
-    }
-  }
-}
-
-const projectState = ProjectState.getInstance();
-
-// Validation
-interface Validatable {
-  value: string | number;
-  required?: boolean;
-  minLength?: number;
-  maxLength?: number;
-  min?: number;
-  max?: number;
-}
-
-function validate(validatableInput: Validatable) {
-  let isValid = true;
-  if (validatableInput.required) {
-    isValid = isValid && validatableInput.value.toString().trim().length !== 0;
-  }
-  if (
-    validatableInput.minLength != null &&
-    typeof validatableInput.value === 'string'
-  ) {
-    isValid =
-      isValid && validatableInput.value.length >= validatableInput.minLength;
-  }
-  if (
-    validatableInput.maxLength != null &&
-    typeof validatableInput.value === 'string'
-  ) {
-    isValid =
-      isValid && validatableInput.value.length <= validatableInput.maxLength;
-  }
-  if (
-    validatableInput.min != null &&
-    typeof validatableInput.value === 'number'
-  ) {
-    isValid = isValid && validatableInput.value >= validatableInput.min;
-  }
-  if (
-    validatableInput.max != null &&
-    typeof validatableInput.value === 'number'
-  ) {
-    isValid = isValid && validatableInput.value <= validatableInput.max;
-  }
-  return isValid;
-}
-
 // autobind decorator
-function autobind(_: any, _2: string, descriptor: PropertyDescriptor) {
+function autobind(
+  target: any,
+  methodName: string,
+  descriptor: PropertyDescriptor
+) {
   const originalMethod = descriptor.value;
   const adjDescriptor: PropertyDescriptor = {
     configurable: true,
@@ -139,169 +15,28 @@ function autobind(_: any, _2: string, descriptor: PropertyDescriptor) {
   return adjDescriptor;
 }
 
-// Component Base Class
-abstract class Component<T extends HTMLElement, U extends HTMLElement> {
+// ProjectInput Class
+class ProjectInput {
   templateElement: HTMLTemplateElement;
-  hostElement: T;
-  element: U;
+  hostElement: HTMLDivElement;
+  element: HTMLFormElement;
+  titleInputElement: HTMLInputElement;
+  descriptionInputElement: HTMLInputElement;
+  peopleInputElement: HTMLInputElement;
 
-  constructor(
-    templateId: string,
-    hostElementId: string,
-    insertAtStart: boolean,
-    newElementId?: string
-  ) {
+  constructor() {
     this.templateElement = document.getElementById(
-      templateId
+      'project-input'
     )! as HTMLTemplateElement;
-    this.hostElement = document.getElementById(hostElementId)! as T;
+    this.hostElement = document.getElementById('app')! as HTMLDivElement;
 
     const importedNode = document.importNode(
       this.templateElement.content,
       true
     );
-    this.element = importedNode.firstElementChild as U;
-    if (newElementId) {
-      this.element.id = newElementId;
-    }
+    this.element = importedNode.firstElementChild as HTMLFormElement;
+    this.element.id = 'user-input';
 
-    this.attach(insertAtStart);
-  }
-
-  private attach(insertAtBeginning: boolean) {
-    this.hostElement.insertAdjacentElement(
-      insertAtBeginning ? 'afterbegin' : 'beforeend',
-      this.element
-    );
-  }
-
-  abstract configure(): void;
-  abstract renderContent(): void;
-}
-
-// ProjectItem Class
-class ProjectItem extends Component<HTMLUListElement, HTMLLIElement>
-  implements Draggable {
-  private project: Project;
-
-  get persons() {
-    if (this.project.people === 1) {
-      return '1 person';
-    } else {
-      return `${this.project.people} persons`;
-    }
-  }
-
-  constructor(hostId: string, project: Project) {
-    super('single-project', hostId, false, project.id);
-    this.project = project;
-
-    this.configure();
-    this.renderContent();
-  }
-
-  @autobind
-  dragStartHandler(event: DragEvent) {
-    event.dataTransfer!.setData('text/plain', this.project.id);
-    event.dataTransfer!.effectAllowed = 'move';
-  }
-
-  dragEndHandler(_: DragEvent) {
-    console.log('DragEnd');
-  }
-
-  configure() {
-    this.element.addEventListener('dragstart', this.dragStartHandler);
-    this.element.addEventListener('dragend', this.dragEndHandler);
-  }
-
-  renderContent() {
-    this.element.querySelector('h2')!.textContent = this.project.title;
-    this.element.querySelector('h3')!.textContent = this.persons + ' assigned';
-    this.element.querySelector('p')!.textContent = this.project.description;
-  }
-}
-
-// ProjectList Class
-class ProjectList extends Component<HTMLDivElement, HTMLElement>
-  implements DragTarget {
-  assignedProjects: Project[];
-
-  constructor(private type: 'active' | 'finished') {
-    super('project-list', 'app', false, `${type}-projects`);
-    this.assignedProjects = [];
-
-    this.configure();
-    this.renderContent();
-  }
-
-  @autobind
-  dragOverHandler(event: DragEvent) {
-    if (event.dataTransfer && event.dataTransfer.types[0] === 'text/plain') {
-      event.preventDefault();
-      const listEl = this.element.querySelector('ul')!;
-      listEl.classList.add('droppable');
-    }
-  }
-
-  @autobind
-  dropHandler(event: DragEvent) {
-    const prjId = event.dataTransfer!.getData('text/plain');
-    projectState.moveProject(
-      prjId,
-      this.type === 'active' ? ProjectStatus.Active : ProjectStatus.Finished
-    );
-  }
-
-  @autobind
-  dragLeaveHandler(_: DragEvent) {
-    const listEl = this.element.querySelector('ul')!;
-    listEl.classList.remove('droppable');
-  }
-
-  configure() {
-    this.element.addEventListener('dragover', this.dragOverHandler);
-    this.element.addEventListener('dragleave', this.dragLeaveHandler);
-    this.element.addEventListener('drop', this.dropHandler);
-
-    projectState.addListener((projects: Project[]) => {
-      const relevantProjects = projects.filter(prj => {
-        if (this.type === 'active') {
-          return prj.status === ProjectStatus.Active;
-        }
-        return prj.status === ProjectStatus.Finished;
-      });
-      this.assignedProjects = relevantProjects;
-      this.renderProjects();
-    });
-  }
-
-  renderContent() {
-    const listId = `${this.type}-projects-list`;
-    this.element.querySelector('ul')!.id = listId;
-    this.element.querySelector('h2')!.textContent =
-      this.type.toUpperCase() + ' PROJECTS';
-  }
-
-  private renderProjects() {
-    const listEl = document.getElementById(
-      `${this.type}-projects-list`
-    )! as HTMLUListElement;
-    listEl.innerHTML = '';
-    for (const prjItem of this.assignedProjects) {
-      new ProjectItem(this.element.querySelector('ul')!.id, prjItem);
-    }
-  }
-}
-
-// ProjectInput Class
-class ProjectInput extends Component<HTMLDivElement, HTMLFormElement> {
-  titleInputElement: HTMLInputElement;
-  descriptionInputElement: HTMLInputElement;
-  peopleInputElement: HTMLInputElement;
-
-  constructor() {
-    super('project-input', 'app', true, 'user-input');
     this.titleInputElement = this.element.querySelector(
       '#title'
     ) as HTMLInputElement;
@@ -311,66 +46,24 @@ class ProjectInput extends Component<HTMLDivElement, HTMLFormElement> {
     this.peopleInputElement = this.element.querySelector(
       '#people'
     ) as HTMLInputElement;
-    this.configure();
-  }
 
-  configure() {
-    this.element.addEventListener('submit', this.submitHandler);
+    this.configure();
+    this.attach();
   }
 
-  renderContent() {}
-
-  private gatherUserInput(): [string, string, number] | void {
-    const enteredTitle = this.titleInputElement.value;
-    const enteredDescription = this.descriptionInputElement.value;
-    const enteredPeople = this.peopleInputElement.value;
-
-    const titleValidatable: Validatable = {
-      value: enteredTitle,
-      required: true
-    };
-    const descriptionValidatable: Validatable = {
-      value: enteredDescription,
-      required: true,
-      minLength: 5
-    };
-    const peopleValidatable: Validatable = {
-      value: +enteredPeople,
-      required: true,
-      min: 1,
-      max: 5
-    };
-
-    if (
-      !validate(titleValidatable) ||
-      !validate(descriptionValidatable) ||
-      !validate(peopleValidatable)
-    ) {
-      alert('Invalid input, please try again!');
-      return;
-    } else {
-      return [enteredTitle, enteredDescription, +enteredPeople];
-    }
+  @autobind
+  private submitHandler(event: Event) {
+    event.preventDefault();
+    console.log(this.titleInputElement.value);
   }
 
-  private clearInputs() {
-    this.titleInputElement.value = '';
-    this.descriptionInputElement.value = '';
-    this.peopleInputElement.value = '';
+  private configure() {
+    this.element.addEventListener('submit', this.submitHandler);
   }
 
-  @autobind
-  private submitHandler(event: Event) {
-    event.preventDefault();
-    const userInput = this.gatherUserInput();
-    if (Array.isArray(userInput)) {
-      const [title, desc, people] = userInput;
-      projectState.addProject(title, desc, people);
-      this.clearInputs();
-    }
+  private attach() {
+    this.hostElement.insertAdjacentElement('afterbegin', this.element);
   }
 }
 
-const prjInput = new ProjectInput();
-const activePrjList = new ProjectList('active');
-const finishedPrjList = new ProjectList('finished');
+const projectInput = new ProjectInput();
diff --git a/tsconfig.json b/tsconfig.json
index 299c8e8..b554cda 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,25 +1,26 @@
 {
   "compilerOptions": {
+    "experimentalDecorators": true,
     /* Basic Options */
-    "target": "es6" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
-    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
+    "target": "es6",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
     "lib": [
       "dom",
       "es6",
       "dom.iterable",
       "scripthost"
-    ] /* Specify library files to be included in the compilation. */,
+    ],                             /* Specify library files to be included in the compilation. */
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */
     // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
     // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
     // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
-    "sourceMap": true /* Generates corresponding '.map' file. */,
+    "sourceMap": true,                     /* Generates corresponding '.map' file. */
     // "outFile": "./",                       /* Concatenate and emit output to single file. */
-    "outDir": "./dist" /* Redirect output structure to the directory. */,
-    "rootDir": "./src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
+    "outDir": "./dist",                        /* Redirect output structure to the directory. */
+    "rootDir": "./src",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
     // "composite": true,                     /* Enable project compilation */
-    "removeComments": true /* Do not emit comments to output. */,
+    "removeComments": true,                /* Do not emit comments to output. */
     // "noEmit": true,                        /* Do not emit outputs. */
     // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
     // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
@@ -27,7 +28,7 @@
     "noEmitOnError": true,
 
     /* Strict Type-Checking Options */
-    "strict": true /* Enable all strict type-checking options. */,
+    "strict": true,                           /* Enable all strict type-checking options. */
     // "noImplicitAny": false,                 /* Raise error on expressions and declarations with an implied 'any' type. */
     // "strictNullChecks": true,              /* Enable strict null checks. */
     // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
@@ -37,9 +38,9 @@
     // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
 
     /* Additional Checks */
-    "noUnusedLocals": true /* Report errors on unused locals. */,
-    "noUnusedParameters": true /* Report errors on unused parameters. */,
-    "noImplicitReturns": true /* Report error when not all code paths in function return a value. */,
+    "noUnusedLocals": true,                /* Report errors on unused locals. */
+    "noUnusedParameters": false,            /* Report errors on unused parameters. */
+    "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
     // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
 
     /* Module Resolution Options */
@@ -50,7 +51,7 @@
     // "typeRoots": [],                       /* List of folders to include type definitions from. */
     // "types": [],                           /* Type declaration files to be included in compilation. */
     // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
     // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
 
     /* Source Map Options */
@@ -60,10 +61,10 @@
     // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
 
     /* Experimental Options */
-    "experimentalDecorators": true /* Enables experimental support for ES7 decorators. */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
   },
   "exclude": [
     "node_modules" // would be the default
   ]
-}
+}
\ No newline at end of file