Refactoring: for v2 reap all the low hanging fruit

Implement improvements from GH https://github.com/MithrilJS/mithril.js/issues/2499#issuecomment-521182524.
space88man · Aug 14, 2019 · a31eca6 · a31eca6
1 parent 8f48822
commit a31eca6
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 105 deletions.
diff --git a/js/app.js b/js/app.js
@@ -5,6 +5,6 @@
 import {MainView} from './views/main-view';
 
 m.route(document.querySelector('.todoapp'), '/', {
-	'/': MainView,
-	'/:filter': MainView
+  '/': MainView,
+  '/:filter': MainView
 });
diff --git a/js/models/Data.js b/js/models/Data.js
@@ -4,18 +4,18 @@ import Storage from './storage'
 import Todo from './todo'
 
 var Data = {
-  newTitle: '',
+  newTitle: '', // placeholder to receive new Todo
   list: [],
   load: function() {
     Data.list = Storage.get();
   },
 
-  visible: function(attrs) {
-    if (!('filter' in attrs)) {
+  visible: function(filter) {
+    if (!filter) {
       return Data.list;
     } else {
       return Data.list.filter(function(item) {
-	if (attrs.filter === 'completed') {
+	if (filter === 'completed') {
 	  return item.completed;
 	}
 	else {

diff --git a/js/views/footer-view.js b/js/views/footer-view.js
@@ -1,40 +1,45 @@
 // js/views/footer-view.js
+import Data from '../models/Data';
 
-function Footer(data, filter) {
-    var amountCompleted = data.amountCompleted();
-    var amountActive = data.amountActive();
+function Footer(initialVnode) {
 
-    return m('footer.footer',
-	     [
+  return {
+    view: vnode => {
+      var filter = vnode.attrs.filter;
+      var amountActive = Data.amountActive();
+
+      return m('footer.footer',
+	       [
 		 m('span.todo-count', [
-		     m('strong', amountActive), ' item' + (amountActive !== 1 ? 's' : '') + ' left'
+		   m('strong', amountActive), ' item' + (amountActive !== 1 ? 's' : '') + ' left'
 		 ]),
 		 m('ul.filters', [
-		     m('li', [
-			 m(m.route.Link, {
-			     href: "/",
-			     class: filter === '' ? 'selected' : ''
-			 }, 'All')
-		     ]),
-		     m('li', [
-			 m(m.route.Link, {
-			     // config: m.route,
-			     href: "/active",
-			     class: filter === 'active' ? 'selected' : ''
-			 }, 'Active')
-		     ]),
-		     m('li', [
-			 m(m.route.Link, {
-			     href: "/completed",
-			     class: filter === 'completed' ? 'selected' : ''
-			 }, 'Completed')
-		     ])
+		   m('li', [
+		     m(m.route.Link, {
+		       href: "/",
+		       class: filter === '' ? 'selected' : ''
+		     }, 'All')
+		   ]),
+		   m('li', [
+		     m(m.route.Link, {
+		       // config: m.route,
+		       href: "/active",
+		       class: filter === 'active' ? 'selected' : ''
+		     }, 'Active')
+		   ]),
+		   m('li', [
+		     m(m.route.Link, {
+		       href: "/completed",
+		       class: filter === 'completed' ? 'selected' : ''
+		     }, 'Completed')
+		   ])
 		 ]),
 		 m('button.clear-completed', {
-		     onclick: () => data.clearCompleted(),
+		   onclick: () => Data.clearCompleted(),
 		 }, 'Clear completed')
-	     ]
-	    );
+	       ])
+    },
+  }
 };
 
 export default Footer;
diff --git a/js/views/main-view.js b/js/views/main-view.js
@@ -21,91 +21,70 @@ function watchInput(onenter, onescape) {
 };
 
 
-export var MainView = (function() {
-  var focused = false;
+export function MainView() {
+  Data.load();
 
   return {
 
-    oninit: () => {Data.load();},
-
     view: function (vnode) {
 
       return [
-        m('header.header',
+	m('header.header',
           [
             m('h1', 'todos'),
-            m('input.new-todo[placeholder="What needs to be done?"]',
+            m('input.new-todo[placeholder="What needs to be done?"][autofocus]',
 	      {
 		onkeyup: watchInput(Data.add, Data.clearTitle),
-
-		oncreate: v => {
-                  if (!focused) {
-                    v.dom.focus();
-                    focused = true;
-                  }
-		},
-
 		oninput: (e) => {Data.newTitle = e.target.value;},
 		value: Data.newTitle,
               })
           ]),
-        m('section.main',
-          {
-            style: {
-              display: Data.isEmpty() ? 'none': '',
-            }
-          },
-          [
-            m('input#toggle-all.toggle-all[type=checkbox]',
-              {
-                checked: Data.allCompleted(),
-                onclick: () => Data.completeAll(),
-              }),
-            m('label', {
-              for: 'toggle-all'
-            }),
-            m('ul.todo-list', (function() {
-
-              return Data.visible(vnode.attrs).map(function(task, index) {
-                return m('li', {
-                  class: (function () {
-                    var classes = '';
-                    classes += task.completed ? 'completed' : '';
-                    classes += task.editing ? ' editing' : '';
-                    return classes;
-                  })(),
-                  key: task.key
-                }, [
-                  m('.view', [
-                    m('input.toggle[type=checkbox]', {
-                      checked: task.completed,
-                      onclick: () => Data.complete(task),
-                    }),
-                    m('label', {
-                      ondblclick: () => {Data.edit(task);},
-                    }, task.title),
-                    m('button', {class: 'destroy',
-                                 onclick: () => {Data.remove(index)},
-                                }),
-                  ]),
-                  m('input.edit', {
-                    value: task.title,
-                    onupdate: v => {
-                      if (task.editing)
-                        v.dom.focus();
-                    },
-                    oninput: e => { task.title = e.target.value; },
-                    onkeyup: watchInput(
-                      () => Data.doneEditing(task, index),
-                      () => Data.cancelEditing(task)
-                    ),
-                    onblur: () => Data.doneEditing(task, index),
-                  })
-                ]);
-              })})()
-             ),
-          ]), Data.isEmpty() ? '' : Footer(Data, vnode.attrs.filter || '')
+	!Data.isEmpty() && m('section.main',
+			     [
+			       m('input#toggle-all.toggle-all[type=checkbox]',
+				 {
+				   checked: Data.allCompleted(),
+				   onclick: () => Data.completeAll(),
+				 }),
+			       m('label', {
+				 for: 'toggle-all'
+			       }),
+			       m('ul.todo-list', Data.visible(vnode.attrs.filter || '').map(function(task, index) {
+				 return m('li', {
+				   class: '' + (task.completed ? 'completed' : '') + (task.editing ? ' editing' : ''),
+				   key: task.key
+				 }, [
+				   m('.view', [
+				     m('input.toggle[type=checkbox]', {
+				       checked: task.completed,
+				       onclick: () => Data.complete(task),
+				     }),
+				     m('label', {
+				       ondblclick: () => {Data.edit(task);},
+				     }, task.title),
+				     m('button.destroy', {
+				       onclick: () => {Data.remove(index)},
+				     }),
+				   ]),
+				   m('input.edit', {
+				     value: task.title,
+				     onupdate: v => {
+				       if (task.editing)
+					 v.dom.focus();
+				     },
+				     oninput: e => { task.title = e.target.value; },
+				     onkeyup: watchInput(
+				       () => Data.doneEditing(task, index),
+				       () => Data.cancelEditing(task)
+				     ),
+				     onblur: () => Data.doneEditing(task, index),
+				   })
+				 ]);
+			       }))
+			     ]),
+	Data.isEmpty() ? '' : m(Footer, {filter: vnode.attrs.filter || ''}),
       ];
     },
   }
-})();
+}
+