Add path and query params to frontend example

examples/frontend/project.clj

@@ -13,7 +13,9 @@
                  [org.clojure/clojurescript "1.10.339" :scope "provided"]
                  [metosin/reitit "0.1.4-SNAPSHOT"]
                  [metosin/reitit-schema "0.1.4-SNAPSHOT"]
-                 [metosin/reitit-frontend "0.1.4-SNAPSHOT"]]
+                 [metosin/reitit-frontend "0.1.4-SNAPSHOT"]
+                 ;; Just for pretty printting the match
+                 [fipp "0.6.12"]]
 
   :plugins [[lein-cljsbuild "1.1.7"]]
 

examples/frontend/src/frontend/core.cljs

@@ -1,40 +1,62 @@
 (ns frontend.core
     (:require [reagent.core :as r]
-              [reitit.core :as rc]
+              [reitit.core :as re]
               [reitit.frontend :as rf]
               [reitit.frontend.history :as rfh]
-              [reitit.coercion.schema :as rs]))
+              [reitit.coercion :as rc]
+              [reitit.coercion.schema :as rsc]
+              [schema.core :as s]
+              [fipp.edn :as fedn]))
 
 (def router (atom nil))
 
 (defn home-page []
   [:div
-   [:h2 "Welcome to frontend"]
-   [:div [:a {:href (rfh/href @router ::about)} "go to about page"]]])
+   [:h2 "Welcome to frontend"]])
 
 (defn about-page []
   [:div
    [:h2 "About frontend"]
-   [:a {:href "http://google.com"} "external link"]
-   [:div [:a {:href (rfh/href @router ::frontpage)} "go to the home page"]]])
+   [:a {:href "http://google.com"} "external link"]])
+
+(defn item-page [match]
+  (let [{:keys [path query]} (:parameters match)
+        {:keys [id]} path]
+    [:div
+     [:h2 "Selected item " id]
+     (if (:foo query)
+       [:p "Optional foo query param: " (:foo query)])]))
 
 (defonce match (r/atom nil))
 
 (defn current-page []
   [:div
+   [:ul
+    [:li [:a {:href (rfh/href @router ::frontpage)} "Frontpage"]]
+    [:li [:a {:href (rfh/href @router ::about)} "About"]]
+    [:li [:a {:href (rfh/href @router ::item {:id 1})} "Item 1"]]
+    [:li [:a {:href (rfh/href @router ::item {:id 2} {:foo "bar"})} "Item 2"]]]
    (if @match
-     [:div [(:view (:data @match))]])
-   (pr-str @match)])
+     (let [view (:view (:data @match))]
+       [view @match]))
+   [:pre (with-out-str (fedn/pprint @match))]])
 
 (def routes
-  (rc/router
+  (re/router
     ["/"
      [""
       {:name ::frontpage
        :view home-page}]
      ["about"
       {:name ::about
-       :view about-page}]]))
+       :view about-page}]
+     ["item/:id"
+      {:name ::item
+       :view item-page
+       :parameters {:path {:id s/Int}
+                    :query {(s/optional-key :foo) s/Keyword}}}]]
+    {:compile rc/compile-request-coercers
+     :data {:coercion rsc/coercion}}))
 
 (defn init! []
   (reset! router (rfh/start! routes

test/cljs/reitit/frontend/core_test.cljs

@@ -2,9 +2,9 @@
   (:require [clojure.test :refer [deftest testing is are]]
             [reitit.core :as r]
             [reitit.frontend :as rf]
-            [reitit.coercion :as coercion]
+            [reitit.coercion :as rc]
             [schema.core :as s]
-            [reitit.coercion.schema :as schema-coercion]))
+            [reitit.coercion.schema :as rsc]))
 
 (defn m [x]
   (assoc x :data nil :result nil))
@@ -45,8 +45,8 @@
                             [":id" {:name ::foo
                                     :parameters {:path {:id s/Int}
                                                  :query {(s/optional-key :mode) s/Keyword}}}]]
-                           {:compile coercion/compile-request-coercers
-                            :data {:coercion schema-coercion/coercion}})]
+                           {:compile rc/compile-request-coercers
+                            :data {:coercion rsc/coercion}})]
       (is (= (r/map->Match
                {:template "/:id"
                 :path-params {:id "5"}