gistfile1.cljs

(defmutation ensure-person-id [{:keys [person/id]}]
  (action [{:keys [state]}]
          (swap! state assoc-in [:person :top :person] [:person/by-id id])))


(defsc Person [this {:keys [db/id person/name person/age]}]
  {:query         [:db/id :person/name :person/age]         ; (2)
   :ident         [:person/by-id :db/id]                    ; (1)
   :initial-state (fn [{:keys [id name age]}] {:db/id id :person/name name :person/age age})} ; (3)
  (dom/li
   (dom/h5 (str name " (age: " age ")") (dom/button {:onClick (fn []
                                                                (prim/transact! this `[(ensure-person-id {:person/id ~id}) (r/route-to {:handler :person}) :top-router])
                                                                )}
                                                    "view details")))) ; (4)

(def ui-person (prim/factory Person {:keyfn :person/name}))

(defsc PersonList [this {:keys [db/id person-list/label person-list/people]}]
  {:query         [:db/id :person-list/label {:person-list/people (prim/get-query Person)}]
   :ident         [:person-list/by-id :db/id]               ; (5)
   :initial-state (fn [{:keys [id label]}]
                    {:db/id              id
                     :person-list/label  label
                     :person-list/people [(prim/get-initial-state Person {:id 1 :name "Sally" :age 32})
                                          (prim/get-initial-state Person {:id 2 :name "Joe" :age 22})]})}
  (dom/div
   (dom/h4 label)
   (dom/ul
    (map (fn [p] (ui-person p)) people))))

(def ui-person-list (prim/factory PersonList))


(defsc PersonDisplay [this {:keys [db/id person/name person/age]}]
  {:query [:db/id :person/name :person/age]                 ; (2)
   :ident [:person/by-id :db/id]}
  (dom/h3 (str name " (age: " age ")")))                    ; (4)


(def ui-person-display (prim/factory PersonDisplay))

(defsc PersonPage [this {:keys [label person]}]
  {:initial-state {:page  :person
                   :label "Person"}
   :query         [:page :label :id {:person (prim/get-query PersonDisplay)}]}
  (dom/div
   label
   (ui-person-display person)
   ))


(defsc PersonListPage [this {:keys [label friends]}]
  {:initial-state (fn [pamas] {:page    :person-list :label "Person List"
                               :friends (prim/get-initial-state PersonList {:id :friends :label "Friends"})
                               })
   :query         [:page :label {:friends (prim/get-query PersonList)}]}
  (dom/div
   label
   (ui-person-list friends)
   ))


(defsc Main [this {:keys [label]}]
  {:initial-state {:page :main :label "MAIN"}
   :query         [:page :label]}
  (dom/div {:style {:backgroundColor "red"}}
           label))

(defsc Login [this {:keys [label]}]
  {:initial-state {:page :login :label "LOGIN"}
   :query         [:page :label]}
  (dom/div {:style {:backgroundColor "green"}}
           label))

(defsc NewUser [this {:keys [label]}]
  {:initial-state {:page :new-user :label "New User"}
   :query         [:page :label]}
  (dom/div {:style {:backgroundColor "skyblue"}}
           label))



(defrouter TopRouter :top-router
           (fn [this props] [(:page props) :top])
           :main Main
           :login Login
           :person-list PersonListPage
           :person PersonPage
           :new-user NewUser
           )

(def ui-top (prim/factory TopRouter))

(def routing-tree
  (r/routing-tree
   (r/make-route :main [(r/router-instruction :top-router [:main :top])])
   (r/make-route :login [(r/router-instruction :top-router [:login :top])])
   (r/make-route :new-user [(r/router-instruction :top-router [:new-user :top])])
   (r/make-route :person-list [(r/router-instruction :top-router [:person-list :top])])
   (r/make-route :person [(r/router-instruction :top-router [:person :top])])

   ))

(defsc Root [this {:keys [top-router]}]
  ; r/routing-tree-key implies the alias of fulcro.client.routing as r.
  {:initial-state (fn [params] (merge routing-tree
                                      {:top-router (prim/get-initial-state TopRouter {})}))
   :query         [{:top-router (prim/get-query TopRouter)}]}
  (dom/div
   ; Sample nav mutations
   (dom/a {:onClick #(prim/transact! this `[(r/route-to {:handler :main})])} "Main") " | "
   (dom/a {:onClick #(prim/transact! this `[(r/route-to {:handler :new-user})])} "New User") " | "
   (dom/a {:onClick #(prim/transact! this `[(r/route-to {:handler :login})])} "Login") " | "
   (dom/a {:onClick #(prim/transact! this `[(r/route-to {:handler :person-list})])} "Person List") " | "
   (ui-top top-router)))