todo.cljc

;; Display a single todo item
(defui todo-item [ & {:keys [todo]}]
  (horizontal-layout
   (translate 5 5
              (on
               :mouse-down
               (fn [[mx my]]
                 [[:delete $todo]])
               (delete-X)))
   (translate 10 4
              (basic/checkbox :checked? (:complete? todo)))
   (spacer 10 0)
   (basic/textarea :text (:description todo))))
(comment
  (run-ui #'todo-item {:todo
                       {:complete? false
                        :description "fix me"}}))
(defeffect ::add-todo [$todos next-todo-text]
  (dispatch! :update $todos #(conj % {:description next-todo-text
                                      :complete? false})))
;; Display a list of `todo-item`s stacked vertically
;; Add 5px of spacing between `todo-item`s
(defui todo-list [ & {:keys [todos next-todo-text]}]
  (apply
   vertical-layout
   (horizontal-layout
    (basic/button :text "Add Todo"
                  :on-click (fn []
                              [[::add-todo $todos next-todo-text]
                               [:set $next-todo-text ""]]))
    (translate 10 10
               (basic/textarea :text next-todo-text)))
   (interpose
    (spacer 0 5)
    (for [todo todos]
      (todo-item :todo todo)))))
(comment
  (run-ui #'todo-list {:todos
                       [{:complete? false
                         :description "first"}
                        {:complete? false
                         :description "second"}
                        {:complete? true
                         :description "third"}]}))