This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2015-09-02
Channels
- # admin-announcements (21)
- # announcements (1)
- # boot (128)
- # cider (18)
- # cljs-dev (10)
- # clojure (112)
- # clojure-brasil (2)
- # clojure-italy (4)
- # clojure-japan (12)
- # clojure-russia (38)
- # clojurescript (241)
- # clojutre (1)
- # datascript (2)
- # datomic (3)
- # events (1)
- # hoplon (38)
- # jobs (1)
- # ldnclj (5)
- # melbourne (8)
- # off-topic (2)
- # om (9)
- # re-frame (13)
- # reagent (43)
- # sneer-br (24)
- # sydney (3)
I am trying to add undo to a re-frame component. Are there any examples on how to do this?
@paulb no good examples, I'm embarrassed to say
But I'll jot down some notes here ...
The whole thing is really a two step process:
1. On each event handler which performs undoable work, you add undoable
middleware
2. When you want to undo (eg when the user clicks on the undo button) you simply (dispatch [:undo])
For example ... looking at the todomvc example ....
In handlers.cljs (https://github.com/Day8/re-frame/blob/master/examples/todomvc/src/todomvc/handlers.cljs) I'd add to the requires in the ns
....
[re-frame.core :refer [register-handler path trim-v undoable after]]
; <-- added undoable
Then I might decide to add undoable-ness to the :add-todo
event handler ... making it ...
(register-handler
:add-todo
[todo-middleware (undoable "added totdo")] ;; <----- added middleware
(fn [todos [text]]
(let [id (allocate-next-id todos)]
(assoc todos id {:id id :title text :done false}))))
I could then add a button to the GUI ... which was labelled "undo" and, when it was clicked, it could (dispatch [:undo])
Finally, this button should only be enabled when there really is something to undo. So the component would subscribe to know that.
(subscribe [:undos?])
which would deliver a boolean signal saying if there is any state to undo (when you first come into an app there is nothing to undo, so that undo button of yours should be disabled).