From 28c2acc9238a42a26014739f42d58d38190deddf Mon Sep 17 00:00:00 2001 From: Dan Holmsand Date: Mon, 3 Feb 2014 14:50:35 +0100 Subject: [PATCH] Factor out undo-demo into its own namespace --- demo/reagentdemo/news.cljs | 87 +-------------------------- demo/reagentdemo/news/undo-demo.cljs | 89 ++++++++++++++++++++++++++++ 2 files changed, 91 insertions(+), 85 deletions(-) create mode 100644 demo/reagentdemo/news/undo-demo.cljs diff --git a/demo/reagentdemo/news.cljs b/demo/reagentdemo/news.cljs index ad729df..b4b66fc 100644 --- a/demo/reagentdemo/news.cljs +++ b/demo/reagentdemo/news.cljs @@ -1,95 +1,12 @@ (ns reagentdemo.news (:require [reagent.core :as reagent :refer [atom]] [reagent.debug :refer-macros [dbg println]] - [reagentdemo.syntax :refer-macros [get-source]] [reagentdemo.page :refer [title link page-map]] [reagentdemo.common :as common :refer [demo-component]] [reagentdemo.news.async :as async] - [todomvc :as todomvc])) - -(def funmap (-> "reagentdemo/news.cljs" get-source common/fun-map)) -(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 undo-example [{:keys [summary]}] - (let [head "Cloact becomes Reagent: Undo is trivial"] - [:div.reagent-demo - [:h1 [link {:href undo-example} head]] - [title head] - [:div.demo-text - [:h2 "(reset! cloact-name \"Reagent\")"] - - [: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 - [link {:href undo-example - :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]])]])) + [reagentdemo.news.undo-demo :as undo-demo])) (defn main [] [:div [async/main {:summary true}] - [undo-example {:summary true}]]) - -(swap! page-map assoc - "news/cloact-reagent-undo-demo.html" undo-example) + [undo-demo/main {:summary true}]]) diff --git a/demo/reagentdemo/news/undo-demo.cljs b/demo/reagentdemo/news/undo-demo.cljs new file mode 100644 index 0000000..8d51918 --- /dev/null +++ b/demo/reagentdemo/news/undo-demo.cljs @@ -0,0 +1,89 @@ +(ns reagentdemo.news.undo-demo + (:require [reagent.core :as reagent :refer [atom]] + [reagent.debug :refer-macros [dbg println]] + [reagentdemo.syntax :refer-macros [get-source]] + [reagentdemo.page :refer [title link page-map]] + [reagentdemo.common :as common :refer [demo-component]] + [todomvc :as todomvc])) + +(def funmap (-> "reagentdemo/news/undo-demo.cljs" get-source common/fun-map)) +(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]}] + (let [head "Cloact becomes Reagent: Undo is trivial"] + [:div.reagent-demo + [:h1 [link {:href main} head]] + [title head] + [:div.demo-text + [:h2 "(reset! cloact-name \"Reagent\")"] + + [: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 + [link {:href main + :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]])]])) + +(swap! page-map assoc + "news/cloact-reagent-undo-demo.html" main)