Fork me on GitHub
#fulcro
<
2023-01-28
>
zhuxun219:01:05

How do I have a child stated component that has the same ident as the parent? Let's say I want the component PersonDetail to be a child of the component Person, both having the ident :person/id, am I supposed to do the following?

(defsc PersonDetail [_ props] {:ident :person/id, :query [:person/id :person/name]}
  (div "DETAILS!!!"))

(def fPersonDetail (comp/factory PersonDetail))

(defsc Person [_ props}] {:ident :person/id, :query [:person/id :person/name]}
  (div
    "HELLO!"
    (fPersonDetail props)))

zhuxun219:01:25

The above seems to work. However, if I have multiple versions of PersonDetails and would like to have a router to choose between them, the below does not seem to work:

(defsc PersonDetail1 [_ props] {:ident :person/id, :query [:person/id :person/name], route-segment ["one"]}
  (div "DETAILS11111"))

(defsc PersonDetail2 [_ props] {:ident :person/id, :query [:person/id :person/name], route-segment ["two"]}
  (div "DETAILS22222"))

(defrouter PersonRouter [_ _] {:router-targets [PersonDetail1 PersonDetail2]}

(def fPersonRouter (comp/factory PersonRouter))

(defsc Person [_ props}] {:ident :person/id, :query [:person/id :person/name]}
  (div
    "HELLO!"
    (fPersonRouter props)))

zhuxun219:01:04

PersonDetail1 or PersonDetail2 will end up receiving empty props

zhuxun219:01:38

Basically, this is what I wanted to achieve

zhuxun219:01:37

How would you structure your components to get something like the above (with working routing)?

zhuxun217:01:33

@U0522TWDA I can't seem to make it work with dynamic routers. The PersonDetail component always receives [:person/id nil] as the ident.

Jakub Holý (HolyJak)22:01:37

What does the data coming from pathom look like? What does client DB look like? They're seems to be a missing connection somewhere - where?

Jakub Holý (HolyJak)22:01:35

BTW, to simplify , can you get it working without the router, with all the Details just next to each other?

zhuxun202:01:43

Without using routers, it works as expected. Pathom returned the correct response and the component is getting the correct ident.

zhuxun202:01:51

With router, I cannot directly send in the person ident [:person/id #uuid "xxxx"]

zhuxun202:01:57

because I would have to say :query [... {:>/person-details1 (comp/get-query PersonTabRouter)}], but unlike (comp/get-query PersonDetails1) which will get the correct person id from the Pathom response, (comp/get-query PersonTabRouter) will receive an empty response (`{}`) from Pathom. This resulted in PersonDetails1 getting an empty person id.

zhuxun204:01:46

And after reading your conversation with @U0CKQ19AQ, I'm not even sure if I should use dynamic router for my use case https://clojurians-log.clojureverse.org/fulcro/2021-09-18

❤️ 2
zhuxun204:01:59

"Dynamic Routing is not always the only or best solution. Sometimes it is simpler to implement "routing" manually..."

zhuxun204:01:15

My question now is if I were to handle the details tab routing manually, how can I get the details1 from the URL without breaking the existing dynamic routing I have set up for /person/17?

zhuxun205:01:46

I know you can get the parsed route segment from (get-in state [::uism/asm-id ::MyRouter ::uism/local-storage :path-segment]), but how to retrieve the residual url that are yet to be parsed?

Jakub Holý (HolyJak)10:01:37

Nice! Yes, I was thinking routers might be an overkill here. And it is great to see me writing (both in the Book and elsewhere :)) is helping people. Regarding your last question, could the route-segment of the parent entity be st. like ["person" :person/id :detail] so that it consumes the whole url? I am not sure it works but it could… If it does then I’d change its :will-enter to extract the detail information and, instead of triggering dr/target-ready after the df/load!, trigger a custom mutation that does trigger df/target ready and also stores the :detail value in the component, i.e. (swap! state (assoc-in (conj <ident> :ui/detail) <the detail>)) and then this component can query for :ui/detail .