reitit routing clojurescript

reitit-routing.cljs

(ns ^:figwheel-hooks reitit-routing
  (:require
    [reagent.core         :as r]
    [reagent.dom          :as r.dom]
    [reitit.frontend      :as rf]
    [reitit.frontend.easy :as rfe]
    [reitit.coercion.spec :as rss]
    [fipp.edn             :as fedn]))

;; State
;; -----------------------------------------------------------------------------

(defonce match (r/atom nil))

(def about-screen-state (r/atom 0))

(defn increment-click!
  [state]
  (swap! state inc))


;; Components
;; -----------------------------------------------------------------------------

(defn screen-clicks
  [click-count]
  [:p (str "page count: " click-count)])


(defn home-page []
  (let [state (r/atom 0)]
    (fn []
      [:div
       [:h1 "Homepage"]

       (println        {:hello "hi"})
       (js/console.log {:hello "hi"})

       [:button
        {:type "button"
         :on-click #(rfe/push-state ::about)}
        "About"]

       [:div
         [:p "Welcome to the home page"]
         [screen-clicks @state]
         [:button
           {:on-click #(increment-click! state)}
           "Count for Glory!"]]])))

(defn about-page []
  (let []
    (fn []
      [:div
       [:h1 "About"]

       [:button
        {:type "button"
         :on-click #(rfe/push-state ::homepage)}
        "Homepage"]

       [:div]
       [:p "Welcome to the about page"]
       [screen-clicks @about-screen-state]
       [:button
         {:on-click #(increment-click! about-screen-state)}
         "Count for Glory!"]])))

(defn current-page []
  [:div
   [:ul
    [:li [:a {:href (rfe/href ::homepage)} "Homepage"]]
    [:li [:a {:href (rfe/href ::about)} "About"]]]
   (if @match
     (let [view (:view (:data @match))]
       [view @match]))])

;; Router
;; -----------------------------------------------------------------------------

(def routes
  [["/"
    {:name ::homepage
     :view home-page}]

   ["/about"
    {:name ::about
     :view about-page}]])

(defn init! []
  (rfe/start!
    (rf/router routes {:data {:coercion rss/coercion}})
    (fn [m] (reset! match m))
    ;; set to false to enable HistoryAPI
    {:use-fragment true})
  (r.dom/render [current-page] (.getElementById js/document "root")))

(init!)