Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
compassus example with query param attempt
(ns route-params.core
[goog.dom :as gdom]
[om.dom :as dom]
[ :as om :refer-macros [defui ui]]
[compassus.core :as compassus]
[bidi.bidi :as bidi]
[pushy.core :as pushy]))
(defui Home
static om/IQuery
(query [this]
[:a :b])
(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])
(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]}])
(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"))
(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))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment