 
 (def todo-list-ui (om/factory TodoListUI))
 
+(defn on-change-cb [c-or-r callback]
+  (fn [e]
+    (let [target (.-target e)
+          value (.-value target)]
+      (callback c-or-r value))))
+
+(defn task-title-change [c-or-r text]
+  (om/transact! c-or-r `[(tudu.item.editing/set-title {:value ~text})
+                            :tudu.item/editing]))
+
+(defn create-task [c-or-r task]
+  (om/transact! c-or-r `[(tudu.item/create {:task ~task})
+                            :tudu.item/editing :tudu/items]))
+
+(defui NewTodoItemUI
+  static om/IQuery
+  (query [this]
+         [:tudu.item/editing])
+  Object
+  (render [this]
+          (let [{:keys [tudu.item/editing]} (om/props this)
+                {:keys [title]} editing
+                on-change (on-change-cb reconciler task-title-change)]
+            (dom/div #js {:className "new-todo-item-form"}
+                      (dom/div #js {:className "form-group"}
+                               (dom/label nil "Task")
+                               (dom/input #js {:value title
+                                               :onChange on-change}))
+                      ; NOTE: I have to pass the reconciler here and not the
+                      ; component otherwise I get:
+                      ; Error: No queries exist for component path (tudu.ui/UI tudu.ui/NewTodoItemUI)
+                      (dom/button #js {:onClick #(create-task reconciler editing)}
+                                  "Create")))))
+
+(def new-todo-item-ui (om/factory NewTodoItemUI))
+
 (defui UI
   static om/IQuery
   (query [this]
-         ; if I just return (om/get-query TodoListUI) I get
-         ; Error: Assert failed: Query violation
-         (vec (concat (om/get-query TodoListUI))))
+         (vec (concat (om/get-query TodoListUI)
+                      (om/get-query NewTodoItemUI))))
   Object
   (render [this]
           (let [props (om/props this)]
-            (todo-list-ui props))))
+            (dom/div nil
+                     (todo-list-ui props)
+                     (new-todo-item-ui props)))))
 
 (defmulti read om/dispatch)
 (defmulti mutate om/dispatch)

            [om.dom :as dom]))

(enable-console-print!)

(def initial-state {:tudu/items
                    [{:id 1 :status :close :title "Implement this Step"}
                     {:id 2 :status :open :title "Buy Food"}
                     {:id 3 :status :open :title "Implement next Step"}]})

(defn close-item [component id]
  (om/transact! component `[(tudu.item/close {:id ~id}) :tudu/items]))

(defui TodoItemUI
  static om/IQuery

            (dom/div #js {:className "todo-list-item" :key (str "todo-item-" id)}
                     (dom/input #js {:type "checkbox" :disabled closed?
                                     :checked closed?
                                     :onClick #(close-item reconciler id)})

                     (dom/span #js {:className class-name} title)))))

