Added Front end with Routing Example

_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-cayman

modules/examples-and-use-cases/pages/index.adoc

@@ -0,0 +1,235 @@
+= Examples and Use Cases
+:toc:
+:toc-placement!:
+:toclevels: 2
+:description: Examples of Simple Use cases
+
+Author: https://holyjak.cz/[Jakub Holý] & contributors
+
+toc::[]
+
+== Front End with data table
+
+.Front End with data table
+====
+```clojure
+
+(ns app.client
+  (:require
+   [com.fulcrologic.fulcro.algorithms.merge :as merge]
+   [com.fulcrologic.fulcro.application :as app]
+   [com.fulcrologic.fulcro.components :as comp :refer [defsc]]
+   [com.fulcrologic.fulcro.dom :as dom]))
+
+; ------------------------------------------------------------------------------
+(defsc Person [_this {:person/keys  [name city state] :as _props}]
+  {:query   [:person/id 
+             :person/name 
+             :person/city 
+             :person/state]
+   :ident    :person/id}
+  (dom/div (str "Name: " name ", City: " city ", State: " state)))
+
+(def ui-person (comp/factory Person {:keyfn :person/id}))
+
+; ------------------------------------------------------------------------------
+(defsc People [_this {:keys [people] :as _props}]
+  {:ident (fn [] [:component/id ::People])
+   :query [{:people (comp/get-query Person)}]
+   :route-segment ["people"]
+   :initial-state {}}
+  (dom/div {}
+   (dom/h1 "People:") 
+   (dom/ul (map ui-person people))))
+
+(def ui-people (comp/factory People))
+
+; ------------------------------------------------------------------------------
+(defsc Root [_this {:keys [root]}] 
+  {:query [{:root (comp/get-query People)}]
+   :initial-state {}}
+  (dom/div 
+    (ui-people root)))
+
+; ------------------------------------------------------------------------------
+(defonce SPA (app/fulcro-app))
+
+(defn ^:export init []
+  (app/mount! SPA Root "app")
+  (merge/merge-component! SPA Person {:person/id    1
+                                      :person/name  "John Doe"
+                                      :person/city  "New York"
+                                      :person/state "New York"}
+                        :append [:root :people])
+  (merge/merge-component! SPA Person {:person/id    2
+                                      :person/name  "Ken Smith"
+                                      :person/city  "Los Angelos"
+                                      :person/state "California"}
+                        :append [:root :people])
+  (merge/merge-component! SPA Person {:person/id    2})
+  (merge/merge-component! SPA Person {:person/id    3
+                                      :person/name  "Kate Middleton"
+                                      :person/city  "London"
+                                      :person/state "England"}
+                        :append [:root :people]))
+```
+
+image::front-end-with-data-table-fi-db.png[Fulcro Inspect Database View]
+
+== Front End with Routing to Each item
+
+.Front End with Routing to each item
+====
+```clojure
+(ns app.client
+  (:require
+   [com.fulcrologic.fulcro.algorithms.merge :as merge]
+   [com.fulcrologic.fulcro.application :as app]
+   [com.fulcrologic.fulcro.components :as comp :refer [defsc]]
+   [com.fulcrologic.fulcro.dom :as dom]
+   [com.fulcrologic.fulcro.routing.dynamic-routing :as dr]))
+
+(defsc AllPeople [_ {:keys [all-people]}]
+  {:ident (fn [] [:component/id ::AllPeople])
+   :query [{:all-people [:person/id :person/name]}]  ;
+   :initial-state {}                                 ;
+   :route-segment ["all"]}                           ;
+  (dom/div
+    (dom/h3 "All People")
+    (dom/ul
+      (mapv (fn [{:person/keys [id name]}] (dom/li {:key id} name))
+        all-people))))
+
+(defsc Person [_ {:person/keys [id name biography]}]
+  {:ident :person/id
+   :query [:person/id :person/name :person/biography]  ;
+   :initial-state {}                                   ;
+   :route-segment ["person" :person-id]                ;
+   :will-enter (fn [_app route-params]                  ;
+                 (dr/route-immediate
+                   [:person/id
+                    (js/parseInt (:person-id route-params))]))}
+  (dom/p (str "Person #" id ": ") (dom/strong name) " - " biography))
+
+(dr/defrouter MyRouter [_ _] {:router-targets [AllPeople Person]}) ;
+
+; ------------------------------------------------------------------------------
+(defonce SPA (app/fulcro-app))
+
+(def ui-my-router (comp/factory MyRouter))
+
+(defsc Root [this {:ui/keys [router]}]
+  {:query [{:ui/router (comp/get-query MyRouter)}]           ; 
+   :initial-state {:ui/router {}}}                           ; 
+  (dom/div
+    (dom/p (dom/button {:onClick #(dr/change-route! this ["all"])} "All") ; 
+           (dom/button {:onClick #(dr/change-route! this ["person" "123"])} "Person 123")
+           (dom/button {:onClick #(dr/change-route! this ["person" "100"])} "Person 100"))
+    (ui-my-router router))) ;))
+
+(defn ^:export init []
+  ;; Avoid startup async timing issues by pre-initializing things before mount
+  (app/set-root! SPA Root {:initialize-state? true})
+  (dr/initialize! SPA)                                         ; 
+  (run! #(merge/merge-component! SPA Person %
+           :append (conj (comp/get-ident AllPeople {}) :all-people))
+    [#:person{:id 100 :name "Kamča" :biography "Bio of person 100"}
+     #:person{:id 123 :name "Doubravka" :biography "Bio of person 123"}])
+  (dr/change-route! SPA ["person" "123"])                       ; 
+  (app/mount! SPA Root "app" {:initialize-state? false}))
+```
+
+image::front-end-with-routing-to-each-item.png[Fulcro Inspect Database View]
+
+== Front End with routing
+
+.Front End with routing
+====
+```clojure
+(ns app.client
+  (:require
+   [com.fulcrologic.fulcro.algorithms.merge :as merge]
+   [com.fulcrologic.fulcro.application :as app]
+   [com.fulcrologic.fulcro.components :as comp :refer [defsc]]
+   [com.fulcrologic.fulcro.dom :as dom]
+   [com.fulcrologic.fulcro.routing.dynamic-routing :as dr :refer [defrouter]]))
+
+; ------------------------------------------------------------------------------
+(defsc Person [this {:person/keys  [name city state] :as props}]
+  {:query   [:person/id 
+             :person/name 
+             :person/city 
+             :person/state]
+   :ident    :person/id}
+  (dom/div (str "Name: " name ", City: " city ", State: " state)))
+
+(def ui-person (comp/factory Person {:keyfn :person/id}))
+
+; ------------------------------------------------------------------------------
+(defsc People [_this {:keys [people] :as _props}]
+  {:ident (fn [] [:component/id ::People])
+   :query [{:people (comp/get-query Person)}]
+   :route-segment ["people"]
+   :initial-state {}}
+  (dom/div {}
+   (dom/h1 "People:") 
+   (dom/ul (map ui-person people))))
+
+; ------------------------------------------------------------------------------
+(defsc Main [_this _props]
+  {:ident         (fn [] [:component/id ::main])
+   :query         [:main]
+   :initial-state {:main "stuff"}
+   :route-segment ["main"]}
+  (dom/div (dom/h1 "Main")
+           (dom/p "This is the main pages")))
+
+; ------------------------------------------------------------------------------
+(defrouter TopRouter [_this {:keys [current-state _pending-path-segment]}]
+  {:router-targets [Main People]}
+  (case current-state
+    :pending (dom/div "Loading...")
+    :failed (dom/div "Loading seems to have failed. Try another route.")
+    (dom/div "Unknown route")))
+
+(def ui-top-router (comp/factory TopRouter))
+
+; ------------------------------------------------------------------------------
+(defsc Root [this {:root/keys [router]}]
+  {:query         [{:root/router (comp/get-query TopRouter)}]
+   :initial-state {:root/router {}}}
+  (dom/div
+    (dom/button {:onClick #(dr/change-route this ["main"])} "Home")
+    (dom/button {:onClick #(dr/change-route this ["people"])} "People")
+    (ui-top-router router)))
+
+; ------------------------------------------------------------------------------
+(defonce SPA (app/fulcro-app))
+
+(defn ^:export init []
+  (app/set-root! SPA Root {:initialize-state? true})
+  (dr/change-route SPA ["main"])
+  (app/mount! SPA Root "app" {:initialize-state? false})
+
+  (merge/merge-component! SPA Person {:person/id    1
+                                      :person/name  "John Doe"
+                                      :person/city  "New York"
+                                      :person/state "New York"}
+                        :append [:component/id ::People :people])
+  (merge/merge-component! SPA Person {:person/id    2
+                                      :person/name  "Ken Smith"
+                                      :person/city  "Los Angelos"
+                                      :person/state "California"}
+                        :append [:component/id ::People :people])
+  (merge/merge-component! SPA Person {:person/id    2})
+  (merge/merge-component! SPA Person {:person/id    3
+                                      :person/name  "Kate Middleton"
+                                      :person/city  "London"
+                                      :person/state "England"}
+                        :append [:component/id ::People :people]))
+
+```
+====
+
+image::front-end-with-routing-fi-db.png[Fulcro Inspect Database View]
+