refactor view and update functions to accomodate multiple counters for …

…#40
dwyl · Jun 15, 2018 · 4a543ca · 4a543ca
1 parent 781772f
commit 4a543ca
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 29 deletions.
diff --git a/examples/multiple-counters/counter.js b/examples/multiple-counters/counter.js
@@ -4,34 +4,41 @@ var Dec = 'dec';                     // decrement the counter
 var Res = 'reset';                   // reset counter: git.io/v9KJk
 
 function update(model, action) {     // Update function takes the current state
-  console.log('update', model, action);
-  var i = 0; // 
-  switch(action) {                   // and an action (String) runs a switch
+  // console.log('update', model, action);
+  var parts = action.split('-'); // e.g: inc-0 where 0 is the counter "id"
+  var act = parts[0];
+  var index = parts[1];
+  console.log('action:', action, '| act:', act, '| index:', index,
+    '| value:', model.counters[index])
+  var new_model = JSON.parse(JSON.stringify(model)) // "clone"
+  switch(act) {                   // and an action (String) runs a switch
     case Inc:
-      var new_model = JSON.parse(JSON.stringify(model)) // "clone"
-      new_model.counters[i] = model.counters[i] + 1;
-      console.log('model:', model, 'new_model:', new_model);
-      return new_model; // subtract 1 from model
+      new_model.counters[index] = model.counters[index] + 1;
+      break;
     case Dec:
-      var new_model = JSON.parse(JSON.stringify(model)) // "clone"
-      new_model.counters[i] = model.counters[i] - 1;
-      console.log('model:', model, 'new_model:', new_model);
-      return new_model;
-    case Res: // use ES6 magic to create a new array with all values set to 0:
-      return { counters: new Array(model.counters.length).fill(0) }; // reset
-    default: return model;           // if no action, return curent state.
-  }                                  // (default action always returns current)
+      new_model.counters[index] = model.counters[index] - 1;
+      break;
+    case Res: // use ES6 Array.fill to create a new array with values set to 0:
+      new_model.counters[index] = 0;
+      break;
+    default: return model; // if action not defined, return curent state.
+  }
+  return new_model;
 }
 
 function view(signal, model, root) {
-  var i = 0;
-  empty(root);                                 // clear root element before
-  [                                            // Store DOM nodes in an array
-    button('+', signal, Inc),                  // then iterate to append them
-    div('count', model.counters[i]),        // create div with stat as text
-    button('-', signal, Dec),                  // decrement counter
-    button('Reset', signal, Res)               // reset counter
-  ].forEach(function (el) { root.appendChild(el) }); // forEach is ES5 so IE9+
+
+  empty(root); // clear root element before re-rendering the App (DOM).
+  model.counters.map(function(item, index) {
+    return container(index, [                // wrap DOM nodes in an "container"
+      button('+', signal, Inc + '-' + index),    // append index to action
+      div('count', model.counters[index]),       // create div w/ count as text
+      button('-', signal, Dec + '-' + index),    // decrement counter
+      button('Reset', signal, Res + '-' + index) // reset counter
+    ]);
+  }).forEach(function (el) { root.appendChild(el) }); // forEach is ES5 so IE9+
+
+
 } // yes, for loop is "faster" than forEach, but readability trumps "perf" here!
 
 // Mount Function receives all MUV and mounts the app in the "root" DOM Element
@@ -53,15 +60,24 @@ function mount(model, update, view, root_element_id) {
 // empty the contents of a given DOM element "node" (before re-rendering)
 function empty(node) {
   while (node.firstChild) {
-      node.removeChild(node.firstChild);
+    node.removeChild(node.firstChild);
   }
 } // Inspired by: stackoverflow.com/a/3955238/1148249
 
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section
+function container(index, elements) {
+  var con = document.createElement('section');
+  con.id = index;
+  con.className = 'counter';
+  elements.forEach(function(el) { con.appendChild(el) });
+  return con;
+}
+
 function button(text, signal, action) {
   var button = document.createElement('button');
   var text = document.createTextNode(text);    // human-readable button text
   button.appendChild(text);                    // text goes *inside* not attrib
-  button.className = action;                   // use action as CSS class
+  button.className = action.split('-')[0];                   // use action as CSS class
   button.id = action;
   // console.log(signal, ' action:', action)
   button.onclick = signal(action);             // onclick tells how to process
@@ -97,4 +113,4 @@ if (typeof module !== 'undefined' && module.exports) {
   }
 } else { init(document); }
 
-mount({counters:[0]}, update, view, 'app');
+mount({counters:[0, 1, 2]}, update, view, 'app');
diff --git a/examples/multiple-counters/index.html b/examples/multiple-counters/index.html
@@ -13,9 +13,6 @@
 <body>
   <div id="app"></div>
   <script src="counter.js" data-cover></script> <!-- load counter  -->
-  <script>
-  // Initialise the app by "mounting" it passing in MUV Object & "root" DOM node
-  </script>
 
   <!-- Below this point is all related to the Tests for the App -->
   <div id="test-app"></div> <!-- Create a test-app div to mount the app -->