Make todomvc a little cleaner

examples/todomvc/src/todomvc.cljs

@@ -13,29 +13,30 @@
                  (if-not (empty? v) (on-save v))
                  (stop)))]
     (fn [props]
-      (let [p {:type "text" :value @val :on-blur save
-               :on-change #(reset! val (-> % .-target .-value))
-               :on-key-up #(case (.-which %)
-                             13 (save)
-                             27 (stop)
-                             nil)}]
-        [:input (cloact/merge-props props p)]))))
+      [:input (merge props
+                     {:type "text" :value @val :on-blur save
+                      :on-change #(reset! val (-> % .-target .-value))
+                      :on-key-up #(case (.-which %)
+                                    13 (save)
+                                    27 (stop)
+                                    nil)})])))
 
 (def todo-input (with-meta todo-input-render
                   {:component-did-mount #(.focus (:dom-node %))}))
 
-(defn todo-item [{:keys [todo editing is-editing
-                         on-toggle on-save on-destroy]}]
-  (dbg "rendering item")
-  (let [{:keys [id done title]} todo]
-    [:li {:class (str (if done "completed ") (if is-editing "editing"))}
+(defn todo-item [{:keys [todo on-toggle on-save on-destroy]} this]
+  (dbg "Rendering item")
+  (let [{:keys [id done title]} todo
+        {:keys [editing]} @this]
+    [:li {:class (str (if done "completed ")
+                      (if editing "editing"))}
      [:div.view
       [:input.toggle {:type "checkbox" :checked done :on-change on-toggle}]
-      [:label {:on-double-click #(reset! editing id)} title]
+      [:label {:on-double-click #(swap! this assoc :editing true)} title]
       [:button.destroy {:on-click on-destroy}]]
-     (when is-editing
+     (when editing
        [todo-input {:class "edit" :title title :on-save on-save
-                    :on-stop #(reset! editing nil)}])]))
+                    :on-stop #(swap! this assoc :editing false)}])]))
 
 (defn todo-stats [{:keys [filter clear]}]
   (let [props-for (fn [name]
@@ -67,14 +68,13 @@
 (defn complete-all [todos v] (swap! todos mod-map map #(assoc-in % [1 :done] v)))
 (defn clear-done [todos] (swap! todos mod-map remove #(get-in % [1 :done])))
 
-(defn todo-main [props]
+(defn todo-app [props]
   (let [todos (or (:todos props)
                   (let [t (atom (sorted-map))]
                     (dotimes [x 5]
                       (add-todo t (str "Some todo " x)))
                     t))
-        filt (atom :all)
-        editing (atom nil)]
+        filt (atom :all)]
     (fn []
       (let [items (vals @todos)
             done (->> items (filter :done) count)
@@ -82,9 +82,8 @@
             pred (case @filt
                      :active (complement :done)
                      :done :done
-                     :all identity)
-            curedit @editing]
-        (dbg "rendering main")
+                     :all identity)]
+        (dbg "Rendering main")
         [:section#todoapp
          [:header#header
           [:h1 "todos"]
@@ -97,8 +96,7 @@
           [:label {:for "toggle-all"} "Mark all as complete"]
           [:ul#todo-list
            (for [{id :id :as todo} (filter pred items)]
-             [todo-item {:key id :todo todo :editing editing 
-                         :is-editing (= curedit id)
+             [todo-item {:key id :todo todo
                          :on-save (partial save todos id)
                          :on-toggle (partial toggle todos id)
                          :on-destroy (partial delete todos id)}])]]
@@ -108,8 +106,5 @@
          [:footer#info
           [:p "Double-click to edit a todo"]]]))))
 
-(defn todo-app []
-  [todo-main])
-
 (defn ^:export run []
   (cloact/render-component [todo-app] (.-body js/document)))