klipse-re-frame.cljs

(ns simple.core
  (:require [reagent.core :as r]
            [re-frame.core :as rf]))

(rf/reg-event-db            
  :initialize                 
  (fn [_ _]                   
    {:loading? true})) 

(rf/reg-event-db
  :toggle-loading
  (fn [db _]
    (println "toggle")
    (update db :loading? not)))

(rf/reg-sub
  :loading?
  (fn [db _]   
    (-> db
        :loading?)))

(defn report-iframe
  [loading?]
  (r/create-class 
    {:reagent-render (fn [loading?]
                       [:div 
                        [:iframe {:src "http://app.klipse.tech/?container&cljs_in.gist=viebel/cea0ff0067879e488d62b599bf0faca8"
                                  :style {:display (if loading? "none" "block")
                                          :width "100%"
                                          :height "500px"}
                                  }]
                        ])
     :component-did-mount #(println "report-iframe-did-mount")}))

(defn report [loading?]
  [:div
   ;; Note that when the surrounding div below is removed, the iframe component is mounted multiple times...
   [:div (when loading?
     [:div "Loading..."])]
   [report-iframe loading?]])

(defn ui
  []
  (let [loading? (rf/subscribe [:loading?])]
    [:div
     [:button {:on-click #(rf/dispatch [:toggle-loading])}
      "Click me"]
     [report @loading?]]))

;; -- Entry Point -------------------------------------------------------------

(defn ^:export run
  []
  (rf/dispatch-sync [:initialize])
  (r/render [ui]
            js/klipse-container))


(run)