2014-02-22 07:21:21 +00:00
|
|
|
|
(ns reagentdemo.news.undodemo
|
2014-02-03 13:50:35 +00:00
|
|
|
|
(:require [reagent.core :as reagent :refer [atom]]
|
2014-11-29 17:30:24 +00:00
|
|
|
|
[reagent.interop :refer-macros [.' .!]]
|
2014-02-03 13:50:35 +00:00
|
|
|
|
[reagent.debug :refer-macros [dbg println]]
|
|
|
|
|
[reagentdemo.syntax :refer-macros [get-source]]
|
2014-11-29 18:51:45 +00:00
|
|
|
|
[sitetools :as tools :refer [link]]
|
2014-02-03 13:50:35 +00:00
|
|
|
|
[reagentdemo.common :as common :refer [demo-component]]
|
|
|
|
|
[todomvc :as todomvc]))
|
|
|
|
|
|
2014-11-29 17:30:24 +00:00
|
|
|
|
(def url "news/cloact-reagent-undo-demo.html")
|
2014-11-29 18:51:45 +00:00
|
|
|
|
(def title "Cloact becomes Reagent: Undo is trivial")
|
2014-11-29 17:30:24 +00:00
|
|
|
|
|
2014-02-22 07:21:21 +00:00
|
|
|
|
(def funmap (-> ::this get-source common/fun-map))
|
2014-02-03 13:50:35 +00:00
|
|
|
|
(def src-for (partial common/src-for funmap))
|
|
|
|
|
|
|
|
|
|
(def state todomvc/todos)
|
|
|
|
|
|
|
|
|
|
(def undo-list (atom nil))
|
|
|
|
|
|
|
|
|
|
(defn undo []
|
|
|
|
|
(let [undos @undo-list]
|
|
|
|
|
(when-let [old (first undos)]
|
|
|
|
|
(reset! state old)
|
|
|
|
|
(reset! undo-list (rest undos)))))
|
|
|
|
|
|
|
|
|
|
(defn undo-button []
|
|
|
|
|
(let [n (count @undo-list)]
|
|
|
|
|
[:input {:type "button" :on-click undo
|
|
|
|
|
:disabled (zero? n)
|
|
|
|
|
:value (str "Undo (" n ")")}]))
|
|
|
|
|
|
|
|
|
|
(defn todomvc-with-undo []
|
|
|
|
|
(add-watch state ::undo-watcher
|
|
|
|
|
(fn [_ _ old-state _]
|
|
|
|
|
(swap! undo-list conj old-state)))
|
|
|
|
|
[:div
|
|
|
|
|
[undo-button]
|
|
|
|
|
[todomvc/todo-app]])
|
|
|
|
|
|
|
|
|
|
(defn undo-demo []
|
|
|
|
|
[demo-component {:comp todomvc-with-undo
|
|
|
|
|
:src (src-for [:state :undo-list :undo :save-state
|
|
|
|
|
:undo-button :todomvc-with-undo])}])
|
|
|
|
|
|
|
|
|
|
(def undo-demo-cleanup
|
|
|
|
|
(with-meta undo-demo {:component-will-unmount
|
|
|
|
|
(fn []
|
|
|
|
|
(reset! undo-list nil)
|
|
|
|
|
(remove-watch state ::undo-watcher))}))
|
|
|
|
|
|
|
|
|
|
(defn main [{:keys [summary]}]
|
2014-11-29 18:51:45 +00:00
|
|
|
|
(let [head title]
|
2014-02-03 13:50:35 +00:00
|
|
|
|
[:div.reagent-demo
|
2014-11-29 17:30:24 +00:00
|
|
|
|
[:h1 [link {:href url} head]]
|
2014-02-03 13:50:35 +00:00
|
|
|
|
[:div.demo-text
|
|
|
|
|
[:h2 "(reset! cloact-name \"Reagent\")"]
|
2014-04-01 17:50:28 +00:00
|
|
|
|
|
2014-02-03 13:50:35 +00:00
|
|
|
|
[:p "It turns out that ”Cloact” was a really, really bad
|
|
|
|
|
name. It made some people think about birds’ behinds, in
|
|
|
|
|
possibly unhealthy ways, which even Google suggested they
|
|
|
|
|
should."]
|
|
|
|
|
|
|
|
|
|
[:p "The new name is " [:strong "Reagent"] ", which hopefully
|
|
|
|
|
doesn’t bring with it the same disgusting connotations."]
|
|
|
|
|
|
|
|
|
|
[:p "The API is otherwise unchanged, so a simple
|
|
|
|
|
search-and-replace should suffice."]
|
|
|
|
|
|
|
|
|
|
(if summary
|
2014-11-29 17:30:24 +00:00
|
|
|
|
[link {:href url
|
2014-02-03 13:50:35 +00:00
|
|
|
|
:class 'news-read-more} "Read more"]
|
|
|
|
|
[:div.demo-text
|
|
|
|
|
|
|
|
|
|
[:h2 "Undo the easy way"]
|
|
|
|
|
|
|
|
|
|
[:p "To celebrate the undoing of the apparently disgusting
|
|
|
|
|
name, here is an example of how easy it is to add undo
|
|
|
|
|
functionality to Reagent components."]
|
|
|
|
|
|
|
|
|
|
[:p "It simply saves the old state whenever it changes, and
|
|
|
|
|
restores it when the button is clicked."]
|
|
|
|
|
|
|
|
|
|
[:p "The really nice thing about ClojureScript is that not
|
|
|
|
|
only is this easy and safe to do, courtesy of immutable data
|
|
|
|
|
structures, it is also efficient. ClojureScript figures out
|
|
|
|
|
how to represent ”changes” to maps and vectors efficiently,
|
|
|
|
|
so that you won’t have to."]
|
|
|
|
|
|
|
|
|
|
[undo-demo-cleanup]])]]))
|
|
|
|
|
|
2014-11-29 18:51:45 +00:00
|
|
|
|
(tools/register-page url (fn [] [main]) title)
|