Trying to put a Reforms component into re-frame

views.cljs

(ns training.views
    (:require [re-frame.core :as re-frame]
              [re-com.core :as re-com]
              [reforms.reagent :include-macros true :as f]
              [training.utils :as u]))

(def h-box                      re-com/h-box)
(def v-box                      re-com/v-box)
(def box                        re-com/box)
(def gap                        re-com/gap)
(def button                     re-com/button)

(defn map-tag [tag xs]
  (map (fn [x] [tag x]) xs))

;; --------------------
(defn home-title []
  (fn []
    [re-com/title
     :label (str "This is the Home Page.")
     :level :level1]))

(defn link-to-shed-page []
  [re-com/hyperlink-href
   :label "go to Shed Page"
   :href "#/shed"])

(defn home-panel []
  [re-com/v-box
   :gap "1em"
   :children [[home-title] [link-to-shed-page]]])

;; --------------------
(defn shed-title []
  [re-com/title
   :label "This is the Shed Page."
   :level :level1])

(defn simple-title [txt]
  [re-com/title
   :label txt
   :level :level1])

(defn simple-button [txt id]
  [button
   :label txt
   :on-click #(re-frame/dispatch [:set-active-panel id])])

(defn link-to-home-page []
  [re-com/hyperlink-href
   :label "go to Home Page"
   :href "#/"])  

(defn shed-panel []
  [v-box
   :gap "1em"
   :children [[shed-title] [link-to-home-page]]])

(defn real-simple-example-table []
  (list [:h1 "Schedule"]
        [:hr]
        [:table {
                 :style [:border 10 :width 1]
                 ;(u/style :border 10 :width 1)
                 }
         [:tr (map-tag :th ["Name" "Mon" "Tue" "Wed" "Thu" "Fri" "Sat" "Sun"])]
         ]))

;;
;; Uncaught Error: No protocol method IDeref.-deref defined for type
;; Then (when enclose it in a function):
;; Cannot read property 'unmountComponent' of undefined
;;
(defn simple-view []
  (fn []
    ;(f/form
    ;  (f/text "Your name")
    (f/button "Some button name" #(js/alert "Hi"))
    ;(f/form-buttons
    ;  )
    ;)
    ))

(defn trending-panel []
  [v-box
   :gap "1em"
   :children [[simple-view]]])

;; --------------------
(defmulti panels identity)
(defmethod panels :home [] [home-panel])
(defmethod panels :shed [] [shed-panel])
(defmethod panels :trending [] [trending-panel])
(defmethod panels :default [] [:div])

(defn main-panel []
    (let [active-panel (re-frame/subscribe [:active-panel])]
      (fn []
        [v-box
         :height "100%"
         :children [[h-box
                     :children [[simple-title "Should see right at top of page (works)"]]]
                    [h-box
                     :height "250px"
                     ;:child ""
                     :children [(panels @active-panel)]
                     ]
                    [h-box
                     :gap "1em"
                     ;;Put this line back and get rid of h-box above to test again
                     ;:align-self :end ;; Interprets as right end which is not desired
                     :children [[simple-button "Home" :home] [simple-button "Shed" :shed] [simple-button "Trending" :trending]]]]])))

I think I am trying to put the Reforms component where plain hiccup should go. I can see real-simple-example-table in the browser window - that is how it is setup now. But if in :children of trending-panel I instead put the Reforms component simple-view, then depending on the number of parens I can get the two error messages mentioned above the simple-view function.

I know I'll be happy when I can see a Reforms component come up in the browser window. I changed to displaying just a button but still no luck.

I'll keep going here until I can get re-frame, Reforms and re-com are all working nicely together.

Works fine now. Seems like a simple matter of square brackets did the trick.