Create separate class for NoteManager, remove unused packages

Author: thecodeholic

package-lock.json

@@ -17,10 +17,8 @@
     "babel-minify-webpack-plugin": "^0.3.1",
     "clean-webpack-plugin": "^1.0.0",
     "css-loader": "^2.1.0",
-    "file-loader": "^3.0.1",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^4.0.0-beta.5",
-    "image-webpack-loader": "^4.6.0",
     "mini-css-extract-plugin": "^0.5.0",
     "node-sass": "^4.11.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
@@ -30,8 +28,5 @@
     "webpack-cli": "^3.2.0",
     "webpack-dev-server": "^3.1.14",
     "tar": ">=2.2.2"
-  },
-  "dependencies": {
-    "bootstrap": "^4.3.1"
   }
 }

package.json

@@ -1,46 +1,4 @@
-export class NoteManager {
-  constructor({el, notes}) {
-    this.el = el;
-    this.notesEl = null;
-    this.notes = notes.map(note => new Note(note, this));
-
-    this.onNoteChange = () => {};
-    this.createNotesWrapper();
-    this.renderNotes();
-  }
-
-  addNote(note) {
-    this.notes.push(new Note(note, this));
-    this.renderNotes();
-  }
-
-  prependNote(note) {
-    this.notes.unshift(new Note(note, this));
-    this.renderNotes();
-  }
-
-  removeNote(note) {
-    this.notes.splice(this.notes.indexOf(note), 1);
-    this.renderNotes();
-  }
-
-  createNotesWrapper(){
-    this.notesEl = document.createElement('div');
-    this.notesEl.className = 'tc-notes';
-    this.el.appendChild(this.notesEl);
-  }
-
-  renderNotes() {
-    this.notesEl.innerHTML = '';
-    this.notes.forEach(note => this.renderNote(note));
-  }
-
-  renderNote(note) {
-    this.notesEl.appendChild(note.createNoteEl())
-  }
-}
-
-export class Note {
+export default class Note {
 
   constructor({title, body}, noteManager) {
     this.el = null;

src/Note.js

@@ -0,0 +1,44 @@
+import Note from './Note';
+
+export default class NoteManager {
+  constructor({el, notes}) {
+    this.el = el;
+    this.notesEl = null;
+    this.notes = notes.map(note => new Note(note, this));
+
+    this.onNoteChange = () => {
+    };
+    this.createNotesWrapper();
+    this.renderNotes();
+  }
+
+  addNote(note) {
+    this.notes.push(new Note(note, this));
+    this.renderNotes();
+  }
+
+  prependNote(note) {
+    this.notes.unshift(new Note(note, this));
+    this.renderNotes();
+  }
+
+  removeNote(note) {
+    this.notes.splice(this.notes.indexOf(note), 1);
+    this.renderNotes();
+  }
+
+  createNotesWrapper() {
+    this.notesEl = document.createElement('div');
+    this.notesEl.className = 'tc-notes';
+    this.el.appendChild(this.notesEl);
+  }
+
+  renderNotes() {
+    this.notesEl.innerHTML = '';
+    this.notes.forEach(note => this.renderNote(note));
+  }
+
+  renderNote(note) {
+    this.notesEl.appendChild(note.createNoteEl())
+  }
+}

src/NoteManager.js

@@ -1,30 +1,40 @@
 import './scss/style.scss';
-import {Note, NoteManager} from './Note';
+import NoteManager from './NoteManager';
 
 const noteManager = new NoteManager({
   el: document.getElementById('notesWrapper'),
   notes: [
     {
-      title: 'This is a demo note',
-      body: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi corrupti officiis alias tenetur, tenetur iste maxime laudantium?'
+      title: 'sunt aut facere repellat',
+      body: 'uia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto'
     },
     {
-      title: 'This is a demo note',
-      body: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi corrupti officiis alias tenetur, tenetur iste maxime laudantium?'
+      title: 'qui est esse',
+      body: 'est rerum tempore vitae<br>nsequi sint nihil reprehenderit dolor beatae ea dolores neque <br>fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis<br>qui aperiam non debitis possimus qui neque nisi nulla'
     },
     {
-      title: 'This is a demo note',
-      body: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi corrupti officiis alias tenetur, tenetur iste maxime laudantium?'
+      title: 'nesciunt quas odio',
+      body: 'repudiandae veniam quaerat sunt sed alias aut fugiat sit autem sed est'
     },
     {
       title: 'This is a demo note',
       body: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi corrupti officiis alias tenetur, tenetur iste maxime laudantium?'
     },
+    {
+      title: 'qui est esse',
+      body: 'est rerum tempore vitae<br>nsequi sint nihil reprehenderit dolor beatae ea dolores neque <br>fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis<br>qui aperiam non debitis possimus qui neque nisi nulla'
+    },
   ]
 });
 
+noteManager.onNoteAdd = (note) => {
+  console.log("Note added", note);
+};
 noteManager.onNoteChange = (note) => {
-  console.log(note);
+  console.log("Note changed", note);
+};
+noteManager.onNoteRemove = (note) => {
+  console.log("Note removed ", note);
 };
 
 const newNoteBtn = document.querySelector('.new-note-btn');

src/app.js

@@ -53,7 +53,6 @@ body {
     .tc-note-header {
       padding: 10px 16px 0;
 
-      .tc-note-add,
       .tc-note-close {
         display: inline-block;
         width: 24px;
@@ -85,6 +84,7 @@ body {
     .tc-note-title {
       font-size: 24px;
       padding: 10px 16px;
+      font-weight: bold;
     }
 
     .tc-note-body {

src/scss/app/main.scss

@@ -27,7 +27,6 @@ module.exports = function(){
     },
     plugins: [
       new HtmlWebpackPlugin({
-        title: 'Webpack starter project',
         template: path.resolve('./src/index.html')
       }),
       new webpack.HotModuleReplacementPlugin()
@@ -52,30 +51,6 @@ module.exports = function(){
             }
           }
         },
-        {
-          test: /\.(pdf|doc|docx|xls|xlsx|txt|csv|tsv)$/,
-          use: [
-            {
-              loader: "file-loader",
-              options: {
-                outputPath: './files',
-                name: "[name].[ext]",
-              },
-            }
-          ]
-        },
-        {
-          test: /\.(jpg|jpeg|gif|png|svg|webp)$/,
-          use: [
-            {
-              loader: "file-loader",
-              options: {
-                outputPath: './images',
-                name: "[name].[ext]",
-              },
-            },
-          ]
-        },
         {
           test: /\.(woff(2)?|ttf|otf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
           use: [
@@ -100,4 +75,4 @@ module.exports = function(){
       ]
     }
   };
-}
+}