compassus example with query param attempt

route_params.cljs

(ns route-params.core
  (:require
   [goog.dom :as gdom]
   [om.dom :as dom]
   [om.next :as om :refer-macros [defui ui]]
   [compassus.core :as compassus]
   [bidi.bidi :as bidi]
   [pushy.core :as pushy]))

(enable-console-print!)


(defui Home
  static om/IQuery
  (query [this]
    [:a :b])
  Object
  (render [this]
    (println "render Home" (om/props this))
    (let [props (om/props this)]
      (dom/div nil
        (dom/h1 nil "Home Page")
        (dom/p nil (:a props))
        (dom/p nil (:b props))))))

(defui About
  static om/IQuery
  (query [this]
    [:c :d])
  Object
  (render [this]
    (println "render About")
    (let [props (om/props this)]
      (dom/div nil
        (dom/h1 nil "About Page")
        (dom/p nil (:c props))
        (dom/p nil (:d props))))))

(declare history)

(def bidi-routes
  ["/" {"" :home
        "about" :about
        "item/" {[:item-id] :item}}])

(defui Item
  static om/IQueryParams
  (params [this]
    {:item-id "2"})
  static om/IQuery
  (query [this]
    [{[:item/by-id '?item-id] [:item/name]}])
  Object
  (componentDidMount [this]
    (println "componentDidMount" (bidi/match-route bidi-routes (pushy/get-token history)))
    (om/set-query! this {:params (:route-params (bidi/match-route bidi-routes (pushy/get-token history)))}))
  (componentDidUpdate [this prev-props prev-state]
    (println "componentDidMount" prev-props prev-state))
  (render [this]
    (let [props (om/props this)]
      (println "render Item" props)
      (dom/div nil
        (dom/h1 nil "Item")
           (dom/p nil (str "Item: " (-> props first second :item/name)))))))

(defmulti temp-read om/dispatch)

(defmethod temp-read :default
  [{:keys [query state]} k params]
  (println "reading " k @state query)
  (let [st @state]
    {:value (om/db->tree query st st)}))

(def routes
  {:home (compassus/index-route Home)
   :about About
   :item Item})

(defn wrapper [{:keys [owner factory props]}]
  (dom/div nil
    (factory props)
    (apply dom/ul nil
           (map (fn [path]
                  (dom/li nil
                          (dom/a #js {:href "#" :onClick #(pushy/set-token! history path)} path))) ["/" "/about" "/item/42" "/item/2"]))))

(declare app)

(def history
  (pushy/pushy #(compassus/set-route! app (:handler %)) (partial bidi/match-route bidi-routes)))

;; My wish would be for something like:
#_ (def history
  (pushy/pushy #(compassus/set-route! app (:handler %) {:params (:route-params %)}) (partial bidi/match-route bidi-routes)))
;; And compassus would call om/set-query! on the routed component with those passed params

(def app (compassus/application {:routes routes
                                 :wrapper wrapper
                                 :history {:setup #(pushy/start! history)
                                           :teardown #(pushy/stop! history)}
                                 :reconciler-opts {:state (atom {:a "a" :b "b" :c "c" :d "d" :item/by-id {"2" {:item/name "item 2!!"}
                                                                                                          "42" {:item/name "item 42!!"}}})
                                                   :parser (om/parser {:read temp-read})} }))

(compassus/mount! app (gdom/getElement "app"))

(comment
 (compassus/set-route! app :home)
 (compassus/set-route! app :about)
 (pushy/set-token! history "/")
 (pushy/set-token! history "/about")
 (pushy/set-token! history "/item/42")
 (pushy/set-token! history "/item/2")

 (pushy/get-token history))