From 32384224125606671cdb14b2b8faf5d53451dbaf Mon Sep 17 00:00:00 2001
From: Roman Vishnevskii <roman.vishnevsky@xored.com>
Date: Sat, 22 Apr 2017 13:01:05 +0700
Subject: [PATCH 1/3] Add local storage for todoapp

---
 examples/todoapp/todoapp.nim | 118 ++++++++++++++++++++++++-----------
 1 file changed, 80 insertions(+), 38 deletions(-)

diff --git a/examples/todoapp/todoapp.nim b/examples/todoapp/todoapp.nim
index 9027603..051b6ed 100644
--- a/examples/todoapp/todoapp.nim
+++ b/examples/todoapp/todoapp.nim
@@ -1,21 +1,52 @@
 
-import vdom, karax, karaxdsl, jstrutils
+import vdom, karax, karaxdsl, jstrutils, components
 
 type
   Filter = enum
     all, active, completed
 
 var
-  entries: seq[(cstring, bool)]
   selectedEntry = -1
   filter: Filter
+  entriesSize: int
+
+proc getItem(key : cstring ): cstring {.importc: "localStorage.getItem"}
+proc setItem(key, value : cstring ) {.importc: "localStorage.setItem"}
+proc clearEntries() {.importc: "localStorage.clear"}
+
+proc getEntryCstring(pos : int): cstring =
+    result = getItem(cstring($pos & "cstring"))
+    if result == cstring"null":
+      result = nil
+
+proc getEntryBool(pos : int): bool =
+    var value = getItem(cstring($pos & "bool"))
+    result = value == cstring"true"
+
+proc setEntryCstring(pos : int, value : cstring) =
+    setItem(cstring($pos & "cstring"), value)
+
+proc setEntryBool(pos : int, value  : bool) =
+    var val = cstring"true"
+    if not value:
+        val = cstring"false"
+    setItem(cstring($pos & "bool"), val)
+
+proc addEntry(str : cstring, bval : bool) =
+  setEntryCstring(entriesSize, str)
+  setEntryBool(entriesSize, bval)
+  inc entriesSize
+
+proc setEntry(pos : int, str : cstring, bval : bool) =
+  setEntryCstring(pos, str)
+  setEntryBool(pos, bval)
 
 proc onTodoEnter(ev: Event; n: VNode) =
-  entries.add((n.value, false))
+  addEntry(n.value, false)
   n.value = ""
 
 proc removeHandler(ev: Event; n: VNode) =
-  entries[n.key] = (cstring(nil), false)
+  setEntry(n.key, cstring(nil), false)
 
 proc editHandler(ev: Event; n: VNode) =
   selectedEntry = n.key
@@ -23,20 +54,20 @@ proc editHandler(ev: Event; n: VNode) =
 proc focusLost(ev: Event; n: VNode) = selectedEntry = -1
 
 proc editEntry(ev: Event; n: VNode) =
-  entries[n.key][0] = n.value
+  setEntryCstring(n.key, n.value)
   selectedEntry = -1
 
 proc toggleEntry(ev: Event; n: VNode) =
   let id = n.key
-  entries[id][1] = not entries[id][1]
+  setEntryBool(id, not getEntryBool(id))
 
 proc onAllDone(ev: Event; n: VNode) =
-  entries = @[]
+  clearEntries()
   selectedEntry = -1
 
 proc clearCompleted(ev: Event, n: VNode) =
-  for i in 0..<entries.len:
-    if entries[i][1]: entries[i][0] = nil
+  for i in 0..<entriesSize:
+    if getEntryBool(i): setEntryCstring(i, nil)
 
 proc toClass(completed: bool): cstring =
   (if completed: cstring"completed" else: cstring(nil))
@@ -47,7 +78,7 @@ proc toChecked(checked: bool): cstring =
 proc selected(v: Filter): cstring =
   (if filter == v: cstring"selected" else: cstring(nil))
 
-proc createEntry(id: int; d: cstring; completed, selected: bool): VNode =
+proc createEntry(id: int; d: cstring; completed, selected: bool): VNode {.component.} =
   result = buildHtml(tr):
     li(class=toClass(completed)):
       if not selected:
@@ -62,14 +93,36 @@ proc createEntry(id: int; d: cstring; completed, selected: bool): VNode =
           onblur = focusLost,
           onkeyupenter = editEntry, value = d, setFocus)
 
+proc makeFooter(entriesCount, completedCount: int): VNode {.component.} =
+  result = buildHtml(footer(class = "footer")):
+    span(class = "todo-count"):
+      strong:
+        text(&entriesCount)
+      text cstring" item" & &(if entriesCount != 1: "s left" else: " left")
+    ul(class = "filters"):
+      li:
+        a(class = selected(all), href = "#/"):
+          text "All"
+      li:
+        a(class = selected(active), href = "#/active"):
+          text "Active"
+      li:
+        a(class = selected(completed), href = "#/completed"):
+          text "Completed"
+    button(class = "clear-completed", onclick = clearCompleted):
+      text "Clear completed (" & &completedCount & ")"
+
+proc makeHeader(): VNode {.component.} =
+  result = buildHtml(header(class = "header")):
+    h1:
+      text "todos"
+    input(class = "new-todo", placeholder="What needs to be done?", name = "newTodo",
+          onkeyupenter = onTodoEnter, setFocus)
+
 proc createDom(): VNode =
   result = buildHtml(tdiv(class="todomvc-wrapper")):
     section(class = "todoapp"):
-      header(class = "header"):
-        h1:
-          text "todos"
-        input(class = "new-todo", placeholder="What needs to be done?", name = "newTodo",
-              onkeyupenter = onTodoEnter, setFocus)
+      makeHeader()
       section(class = "main"):
         input(class = "toggle-all", `type` = "checkbox", name = "toggle")
         label(`for` = "toggle-all", onclick = onAllDone):
@@ -77,37 +130,26 @@ proc createDom(): VNode =
         var entriesCount = 0
         var completedCount = 0
         ul(class = "todo-list"):
-          for i, d in pairs(entries):
-            if d[0] != nil:
+          #for i, d in pairs(entries):
+          for i in 0..entriesSize-1:
+  
+            var d0 = getEntryCstring(i)
+            var d1 = getEntryBool(i)
+            if d0 != nil:
               let b = case filter
                       of all: true
-                      of active: not d[1]
-                      of completed: d[1]
+                      of active: not d1
+                      of completed: d1
               if b:
-                createEntry(i, d[0], d[1], i == selectedEntry)
-              inc completedCount, ord(d[1])
+                createEntry(i, d0, d1, i == selectedEntry)
+              inc completedCount, ord(d1)
               inc entriesCount
-      footer(class = "footer"):
-        span(class = "todo-count"):
-          strong:
-            text(&entriesCount)
-          text cstring" item" & &(if entriesCount != 1: "s left" else: " left")
-        ul(class = "filters"):
-          li:
-            a(class = selected(all), href = "#/"):
-              text "All"
-          li:
-            a(class = selected(active), href = "#/active"):
-              text "Active"
-          li:
-            a(class = selected(completed), href = "#/completed"):
-              text "Completed"
-        button(class = "clear-completed", onclick = clearCompleted):
-          text "Clear completed (" & &completedCount & ")"
+      makeFooter(entriesCount, completedCount)
 
 setOnHashChange(proc(hash: cstring) =
   if hash == "#/": filter = all
   elif hash == "#/completed": filter = completed
   elif hash == "#/active": filter = active
 )
+entriesSize = 0
 setRenderer createDom

From 459d696128078b8dd8d3bf1305e166f7fc4d8520 Mon Sep 17 00:00:00 2001
From: Roman Vishnevskii <roman.vishnevsky@xored.com>
Date: Sat, 22 Apr 2017 13:29:24 +0700
Subject: [PATCH 2/3] Codestyle fixes

---
 examples/todoapp/todoapp.nim | 46 ++++++++++++++++++------------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/examples/todoapp/todoapp.nim b/examples/todoapp/todoapp.nim
index 051b6ed..81d03f9 100644
--- a/examples/todoapp/todoapp.nim
+++ b/examples/todoapp/todoapp.nim
@@ -8,36 +8,36 @@ type
 var
   selectedEntry = -1
   filter: Filter
-  entriesSize: int
+  entriesLen: int
 
 proc getItem(key : cstring ): cstring {.importc: "localStorage.getItem"}
 proc setItem(key, value : cstring ) {.importc: "localStorage.setItem"}
 proc clearEntries() {.importc: "localStorage.clear"}
 
-proc getEntryCstring(pos : int): cstring =
-    result = getItem(cstring($pos & "cstring"))
-    if result == cstring"null":
-      result = nil
+proc getEntryCstring(pos: int): cstring =
+  result = getItem(cstring($pos & "cstring"))
+  if result == cstring"null":
+    result = nil
 
-proc getEntryBool(pos : int): bool =
-    var value = getItem(cstring($pos & "bool"))
-    result = value == cstring"true"
+proc getEntryBool(pos: int): bool =
+  var value = getItem(cstring($pos & "bool"))
+  result = value == cstring"true"
 
-proc setEntryCstring(pos : int, value : cstring) =
-    setItem(cstring($pos & "cstring"), value)
+proc setEntryCstring(pos: int, value: cstring) =
+  setItem(cstring($pos & "cstring"), value)
 
-proc setEntryBool(pos : int, value  : bool) =
-    var val = cstring"true"
-    if not value:
-        val = cstring"false"
-    setItem(cstring($pos & "bool"), val)
+proc setEntryBool(pos: int, value : bool) =
+  var val = cstring"true"
+  if not value:
+    val = cstring"false"
+  setItem(cstring($pos & "bool"), val)
 
-proc addEntry(str : cstring, bval : bool) =
-  setEntryCstring(entriesSize, str)
-  setEntryBool(entriesSize, bval)
-  inc entriesSize
+proc addEntry(str: cstring, bval : bool) =
+  setEntryCstring(entriesLen, str)
+  setEntryBool(entriesLen, bval)
+  inc entriesLen
 
-proc setEntry(pos : int, str : cstring, bval : bool) =
+proc setEntry(pos: int, str: cstring, bval: bool) =
   setEntryCstring(pos, str)
   setEntryBool(pos, bval)
 
@@ -66,7 +66,7 @@ proc onAllDone(ev: Event; n: VNode) =
   selectedEntry = -1
 
 proc clearCompleted(ev: Event, n: VNode) =
-  for i in 0..<entriesSize:
+  for i in 0..<entriesLen:
     if getEntryBool(i): setEntryCstring(i, nil)
 
 proc toClass(completed: bool): cstring =
@@ -131,7 +131,7 @@ proc createDom(): VNode =
         var completedCount = 0
         ul(class = "todo-list"):
           #for i, d in pairs(entries):
-          for i in 0..entriesSize-1:
+          for i in 0..entriesLen-1:
   
             var d0 = getEntryCstring(i)
             var d1 = getEntryBool(i)
@@ -151,5 +151,5 @@ setOnHashChange(proc(hash: cstring) =
   elif hash == "#/completed": filter = completed
   elif hash == "#/active": filter = active
 )
-entriesSize = 0
+entriesLen = 0
 setRenderer createDom

From 479db8c2cc2bf9f2bd88d9bb06a5bf9a49d6faf9 Mon Sep 17 00:00:00 2001
From: Roman Vishnevskii <roman.vishnevsky@xored.com>
Date: Sat, 22 Apr 2017 13:33:20 +0700
Subject: [PATCH 3/3] Codestyle fixes

---
 examples/todoapp/todoapp.nim | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/examples/todoapp/todoapp.nim b/examples/todoapp/todoapp.nim
index 81d03f9..1ba06a6 100644
--- a/examples/todoapp/todoapp.nim
+++ b/examples/todoapp/todoapp.nim
@@ -15,18 +15,18 @@ proc setItem(key, value : cstring ) {.importc: "localStorage.setItem"}
 proc clearEntries() {.importc: "localStorage.clear"}
 
 proc getEntryCstring(pos: int): cstring =
-  result = getItem(cstring($pos & "cstring"))
+  result = getItem(&pos & cstring"cstring")
   if result == cstring"null":
     result = nil
 
-proc getEntryBool(pos: int): bool =
+proc isCompleted(pos: int): bool =
   var value = getItem(cstring($pos & "bool"))
   result = value == cstring"true"
 
 proc setEntryCstring(pos: int, value: cstring) =
   setItem(cstring($pos & "cstring"), value)
 
-proc setEntryBool(pos: int, value : bool) =
+proc markAsCompleted(pos: int, value : bool) =
   var val = cstring"true"
   if not value:
     val = cstring"false"
@@ -34,19 +34,19 @@ proc setEntryBool(pos: int, value : bool) =
 
 proc addEntry(str: cstring, bval : bool) =
   setEntryCstring(entriesLen, str)
-  setEntryBool(entriesLen, bval)
+  markAsCompleted(entriesLen, bval)
   inc entriesLen
 
-proc setEntry(pos: int, str: cstring, bval: bool) =
+proc updateEntry(pos: int, str: cstring, bval: bool) =
   setEntryCstring(pos, str)
-  setEntryBool(pos, bval)
+  markAsCompleted(pos, bval)
 
 proc onTodoEnter(ev: Event; n: VNode) =
   addEntry(n.value, false)
   n.value = ""
 
 proc removeHandler(ev: Event; n: VNode) =
-  setEntry(n.key, cstring(nil), false)
+  updateEntry(n.key, cstring(nil), false)
 
 proc editHandler(ev: Event; n: VNode) =
   selectedEntry = n.key
@@ -59,7 +59,7 @@ proc editEntry(ev: Event; n: VNode) =
 
 proc toggleEntry(ev: Event; n: VNode) =
   let id = n.key
-  setEntryBool(id, not getEntryBool(id))
+  markAsCompleted(id, not isCompleted(id))
 
 proc onAllDone(ev: Event; n: VNode) =
   clearEntries()
@@ -67,7 +67,7 @@ proc onAllDone(ev: Event; n: VNode) =
 
 proc clearCompleted(ev: Event, n: VNode) =
   for i in 0..<entriesLen:
-    if getEntryBool(i): setEntryCstring(i, nil)
+    if isCompleted(i): setEntryCstring(i, nil)
 
 proc toClass(completed: bool): cstring =
   (if completed: cstring"completed" else: cstring(nil))
@@ -134,7 +134,7 @@ proc createDom(): VNode =
           for i in 0..entriesLen-1:
   
             var d0 = getEntryCstring(i)
-            var d1 = getEntryBool(i)
+            var d1 = isCompleted(i)
             if d0 != nil:
               let b = case filter
                       of all: true