As a newbie in Clojure I'm trying my first re-frame app. It is a wizard containing sections. Each of the sections can contain one or more components. Each component could be a text-block, numeric input, ...
But if I change a value of a component in REPL, by dispatching the set-component-value event, the html doesn't get rerendered to show the updated value. However I do see in re-frisk debugger that the db gets updated.
(re-frame/dispatch [:wiz-ev/set-component-value 0 0 "TEST"])
I probably made some beginner mistake but I can't see where the problem is.
Below is a stripped down version (that compiles) that reproduces the issue.
(ns wizard.core
(:require
[reagent.dom :as rdom]
[day8.re-frame.tracing :refer-macros [fn-traced]]
[re-frame.core :as re-frame]
))
;;
;; config
;;
(def debug?
^boolean goog.DEBUG)
;;
;; DB
;;
(def default-db
{:wizard-config {
:title "title of wizard"
:sections[{:title "first section"
:components [{:title "first comp"}]}
{:title "second section"
:components[{:title "comp A"} {:title "comp B"}{:title "comp C"}]}
]
}
})
(defn create-empty-section-data
"create a vector as placeholder for component data. For each component we add a nil"
[section]
(reduce #(conj %1 nil) [] (:components section)));;
(defn add-wizard-data [db]
"add a vector :wizard-data in db. For each section a new vector end for each component a nil in the vector"
(let [sections (get-in db [:wizard-config :sections])
data (reduce #(conj %1 (create-empty-section-data %2)) [] sections)]
(assoc db :wizard-data data) ))
;;
;; events
;;
(re-frame/reg-event-db
:wiz-ev/initialize-db
(fn-traced [_ _]
( add-wizard-data default-db)))
(re-frame/reg-event-db
:wiz-ev/set-component-value
(fn-traced [db [_ section-number component-number new-value]]
(let [old-wiz-data (:wizard-data db)
new-wiz-data (assoc-in old-wiz-data [section-number component-number] new-value)]
(js/console.log "---:wiz-ev/set-component-value-------------------------------")
(js/console.log new-value)
(assoc db :wizard-data new-wiz-data))))
;;
;; subs
;;
(re-frame/reg-sub
:wiz/config
(fn[db] (:wizard-config db)) )
(re-frame/reg-sub
:wiz/section-config
(fn [_](re-frame/subscribe [:wiz/config]))
(fn [wizard-config [_ section-number]] ((:sections wizard-config) section-number) ))
(re-frame/reg-sub
:wiz/title
(fn [_] (re-frame/subscribe [:wiz/config]))
(fn [config _] (:title config)))
(re-frame/reg-sub
:wiz/section-count
(fn [_](re-frame/subscribe [:wiz/config]))
(fn [config _] (count (:sections config))))
(re-frame/reg-sub
:wiz/section-data
(fn [db [_ section-number]] ((:wizard-data db) section-number)))
(re-frame/reg-sub
:wiz/section-title
(fn [[_ section-number]] (re-frame/subscribe [:wiz/section-config section-number]) )
(fn [section-config] (:title section-config) ))
(re-frame/reg-sub
:wiz/section-components
(fn [[_ section-number]] (re-frame/subscribe [:wiz/section-config section-number]))
(fn [section-config _] (:components section-config)) )
(re-frame/reg-sub
:wiz/component-data
(fn [[_ section-number]]
(js/console.log "----[:wiz/component-data] section " (str section-number))
(re-frame/subscribe [:wiz/section-data section-number]) )
(fn [section_data [_ _ component-number]]
;;(fn [section_data [_ _ par2]]
;;(fn [par2]
(js/console.log "----[:wiz/component-data] comp funct, component=" (str component-number))
;;(js/console.log "----[:wiz/component-data] component " component-number " from section " sect-nbr)
;; (section_data component-number)
)
)
;;
;; view
;;
(defn render-component
[component component-number section-number]
(let [
value @(re-frame/subscribe [:wiz/component-data section-number component-number])]
;;(case (:type component)
;; :text (render-component-text component component-number section-number)
;; :memo (render-component-memo component component-number section-number)
;; (render-component-default component)
;; )
[:div "The VALUE for component " component-number " (section" section-number") is : " value]
)
)
(defn render-section
[section-number]
(let [title @(re-frame/subscribe [:wiz/section-title section-number])
components @(re-frame/subscribe [:wiz/section-components section-number])]
[:div
[:h2 title]
(into [:div] (map-indexed #(render-component %2 % section-number) components))]))
(defn main-panel []
(let [wizard-title @(re-frame/subscribe [:wiz/title])
section-count @(re-frame/subscribe [:wiz/section-count])
]
[:div
[:h1 wizard-title]
(into [:<>] (map #(vector render-section %) (range section-count)))
]))
;;
;;core
;;
(defn dev-setup []
(when debug?
(println "*** dev mode ***")))
(defn ^:dev/after-load mount-root []
(re-frame/clear-subscription-cache!)
(let [root-el (.getElementById js/document "app")]
(rdom/unmount-component-at-node root-el)
(rdom/render [main-panel] root-el)))
(defn init []
(re-frame/dispatch-sync [:wiz-ev/initialize-db])
(dev-setup)
(mount-root) ; render to element 'app' the view main-panel
)
Solved,
1st, I commented out a bit too much while debugging the component-data subscription
2nd, the function parameter of component-data was not right
(re-frame/reg-sub
:wiz/component-data
(fn [[_ section-number _]] ;; ---- FIX NBR 2
(js/console.log "----[:wiz/component-data] section " (str section-number))
(re-frame/subscribe [:wiz/section-data section-number]) )
(fn [section-data [_ _ component-number]]
(js/console.log "----[:wiz/component-data]" )
(js/console.log "component=" (str component-number))
(js/console.log "data " (str section-data))
(section-data component-number) ;; ---- FIX NBR 1
)
)