todos.cljs

(require '[reagent.core :as reagent])
(require '[cljs.core.async :as async :refer [<! >!]])
(require-macros '[cljs.core.async.macros :refer [go go-loop]])

(def state 
  (reagent/atom 
    {:todos [{:text "Learn Clojure" :done true} 
             {:text "Try Clojurescript" :done true}
             {:text "Make an App"}]
     :todo-input ""}))

(defn update-todo-input! [text]
  (swap! state assoc-in [:todo-input] text))

(defn add-todo! [text]
  (swap! state update-in [:todos] conj {:text text})
  (update-todo-input! ""))

(defn toggle-todo [pos]
  (swap! state update-in [:todos pos :done] not))

(defn new-todo-input []
  [:p
   [:input {:value (:todo-input @state) 
           :type "text" 
           :onChange #(update-todo-input! (.-target.value %))}]
   [:button {:onClick #(add-todo! (:todo-input @state))} 
   	  "Add"]])

(defn todos []
  [:div
   (for [[idx todo] (map-indexed vector (:todos @state))]
     [:div 
      [:label 
       [:input {:type "checkbox" 
                :checked (:done todo) 
                :onChange #(toggle-todo idx)}]
       (:text todo)]])
   [new-todo-input]
   [:p (count (remove :done (:todos @state))) " left to do"]])


(reagent/render [todos] js/klipse-container)