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

            [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


(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]
         (vec (concat (om/get-query TodoListUI)
                      (om/get-query NewTodoItemUI))))
  Object
  (render [this]
          (let [props (om/props this)]
            (dom/div nil
                     (todo-list-ui props)
                     (new-todo-item-ui props)))))

(defmulti read om/dispatch)
(defmulti mutate om/dispatch)
