From 92fbba1717d2b2b209873b526973eab1688f95aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ho=C3=A0ng=20Minh=20Th=E1=BA=AFng?= Date: Wed, 9 May 2018 16:31:46 +0700 Subject: [PATCH] implement routing tree --- dev/src/conduit/intro.cljs | 95 +++++++++++++++++++++++++++++++++++--- 1 file changed, 88 insertions(+), 7 deletions(-) diff --git a/dev/src/conduit/intro.cljs b/dev/src/conduit/intro.cljs index 44eaaf5..9ea4885 100644 --- a/dev/src/conduit/intro.cljs +++ b/dev/src/conduit/intro.cljs @@ -1,5 +1,7 @@ (ns conduit.intro (:require [devcards.core :as dc :refer-macros [defcard]] + [fulcro.client.data-fetch :as df] + [fulcro.client.routing :as r] [conduit.handler.mutations :as mutations] [fulcro.client.data-fetch :as df] [fulcro.client.network :as net] @@ -8,10 +10,84 @@ [conduit.ui.components :as comp] [fulcro.client.dom :as dom])) -(defsc Me [this props] - {:query [{:user/whoami (prim/get-query comp/Profile)} +(defsc OwnedArticles [this {screen :screen user-id :user-id}] + {:initial-state (fn [params] + {:screen :screen.profile/owned-articles + :user-id 3}) + :ident (fn [] [screen user-id]) + :query [:screen :user-id]} + (dom/div {} (str "Owned articles for user #" user-id))) + +(defsc LikedArticles [this {screen :screen user-id :user-id}] + {:initial-state (fn [params] + {:screen :screen.profile/liked-articles + :user-id 3}) + :ident (fn [] [screen user-id]) + :query [:screen :user-id]} + (dom/div {} (str "Liked articles by user #" user-id))) + +(r/defrouter ProfileRouter :router/profile + [:screen :user-id] + :screen.profile/owned-articles OwnedArticles + :screen.profile/liked-articles LikedArticles) + +(def ui-profile-router (prim/factory ProfileRouter)) + +(defsc ProfileMain [this {router :router/profile}] + {:initial-state (fn [params] {:screen :screen/profile + :screen-id :top + :router/profile (prim/get-initial-state ProfileRouter {})}) + :query [:screen :screen-id {:router/profile (prim/get-query ProfileRouter)}]} + (dom/div {} + "Profile main" + (ui-profile-router router))) + +(r/defrouter TopRouter :router/top + (fn [this props] [(:screen props) :top]) + :screen/home comp/Home + :screen/profile ProfileMain) + +(def ui-top (prim/factory TopRouter)) + +(def routing-tree + (r/routing-tree + (r/make-route :screen/home + [(r/router-instruction :router/top [:screen/home :top])]) + (r/make-route :screen.feed/global + [(r/router-instruction :router/top [:screen/home :top]) + (r/router-instruction :router/feeds [:screen.feed/global :top])]) + (r/make-route :screen.feed/personal + [(r/router-instruction :router/top [:screen/home :top]) + (r/router-instruction :router/feeds [:screen.feed/personal :top])]) + + (r/make-route :screen.profile/owned-articles + [(r/router-instruction :router/top [:screen/profile :top]) + (r/router-instruction :router/profile [:screen.profile/owned-articles :param/user-id])]) + (r/make-route :screen.profile/liked-articles + [(r/router-instruction :router/top [:screen/profile :top]) + (r/router-instruction :router/profile [:screen.profile/liked-articles :param/user-id])]))) + +(defn go-to-home [this] + (prim/transact! this `[(r/route-to {:handler :screen/home})])) + +(defsc Root [this {router :router/top :as props}] + {:initial-state (fn [params] (merge routing-tree + {:screen.profile/owned-articles {2 {:screen :screen.profile/owned-articles :user-id 2}} + :screen.profile/liked-articles {2 {:screen :screen.profile/liked-articles :user-id 2}}} + {:router/top (prim/get-initial-state TopRouter {})})) + :query [{:router/top (prim/get-query TopRouter {})} + {:user/whoami (prim/get-query comp/Profile)} {[:root/article-editor :article-to-edit] (prim/get-query comp/ArticleEditor)}]} (let [user (get props :user/whoami)] + (dom/div {} + (dom/div {} + (dom/a {:onClick #(go-to-home this)} "Main") + (dom/a {:onClick #(prim/transact! this `[(r/route-to {:handler :screen.profile/liked-articles + :route-params {:user-id 2}})])} "Liked") + (dom/a {:onClick #(prim/transact! this `[(r/route-to {:handler :screen.profile/owned-articles + :route-params {:user-id 2}})])} "Owned")) + (ui-top router)) + #_ (dom/div {} (dom/div {:onClick #(prim/transact! this `[(mutations/login {:email "foobar@yep.com" :password "foobar"})])} "Login") (dom/div {:onClick #(df/load this :user/whoami comp/Profile)} "Update me") @@ -31,11 +107,16 @@ (assoc-in req [:headers "Authorization"] @token-store)) (defcard-fulcro yolo - Me + Root {} ; initial state. Leave empty to use :initial-state from root component {:inspect-data true - :fulcro {:networking {:remote (net/fulcro-http-remote {:url "/api" - :response-middleware (net/wrap-fulcro-response wrap-remember-token) - :request-middleware (net/wrap-fulcro-request wrap-with-token) - })}}}) + :fulcro {:started-callback + (fn [app] + (df/load app :articles/all comp/ArticlePreview) + (df/load app :articles/feed comp/ArticlePreview) + (df/load app :tags/all comp/Tag)) + :networking {:remote (net/fulcro-http-remote + {:url "/api" + :response-middleware (net/wrap-fulcro-response wrap-remember-token) + :request-middleware (net/wrap-fulcro-request wrap-with-token)})}}}) (dc/start-devcard-ui!)