Nested wizard example in reagent

main.cljs

;; Create a new project with 
;; lein new liberagent reagent-complex-gui-example
;; and replace main.cljs with this file

(ns reagent-complex-gui-example.main
  (:require-macros [cljs.core.async.macros :refer (go)])
  (:require
   [reagent.core :as reagent :refer [atom]]
   [sablono.core :as html :refer-macros [html]]
   [cljs-http.client :as http]
   [cljs.core.async :refer (<!)]
   [figwheel.client :as fw]
   [weasel.repl :as ws-repl]))

(enable-console-print!)

(defonce init-dev
  ;; we need to defonce this, so it won't be executed again upon code
  ;; reload
  (go (let [body (:body (<! (http/get "/is-dev")))]
        (when (= body true) ;; has to match exactly true and not some string
          (fw/watch-and-reload
           :websocket-url   "ws://localhost:3449/figwheel-ws"
           :jsload-callback
           (fn []
             (println "reloaded")))
          (ws-repl/connect "ws://localhost:9001" :verbose true)))))

;;; re-usable wizard
(defn tab [id text active?]
  [:li (when active?
         {:class "active"})
   [:a {:href "#"} text]])

(defn nav-bar [active-tab component-specs]
  [:ul.nav.nav-pills
   (for [spec component-specs]
     [tab (:id spec) (:title spec) (= active-tab (:id spec))])])

(defn wizard [state & component-specs]
  ;; component-spec :- {:id ..., :title ..., :component ...}
  [:div.container
   [:div.row
    [nav-bar @state component-specs]]
   [:div.row
    [:div.container
     (:component
      (first (filter #(= @state (:id %)) component-specs)))]]])
;;; end re-usable wizard

(defonce menu-state (atom :foo))

(defn foo-panel []
  [:div
   [:p "Foo panel"]
   [:button.btn.btn-primary
    {:id "fooButton"
     :on-click #(reset! menu-state :bar)}
    "Click for next step"]])

(defn bar-panel-modal []
  (let [bar-wizard-state (atom 0)]
    (fn []
      [:div.modal.fade {:id "barModal"
                        :tabIndex "-1"}
       [:div.modal-dialog
        [:div.modal-content
         [:div.modal-body
          [wizard bar-wizard-state
           {:id 0 :title "Panel 1" :component [:p "Panel 1 content"]}
           {:id 1 :title "Panel 2" :component [:p "Panel 2 content"]}]
          [:button.btn.btn-primary {:on-click #(swap! bar-wizard-state
                                                      (fn [v] (mod (inc v) 2)))}
           "Click to switch between steps"]]]]])))

(defn bar-panel []
  [:div
   [:p "Bar panel"]
   [:button.btn.btn-primary
    {:id "barButton"
     :on-click #(reset! menu-state :foo)}
    "Click to go back"]
   [:button.btn.btn-primary {:data-toggle "modal"
                 :data-target "#barModal"
                 :role "dialog"
                 :data-keyboard "true"}
    "Click to toggle modal"]
   [bar-panel-modal]])

(defn screen []
  [:div.container
   [wizard menu-state
    {:id :foo :title "Foo" :component [foo-panel]}
    {:id :bar :title "Bar" :component [bar-panel]}]])

(reagent/render-component [screen]
                          (js/document.getElementById "app"))