Fork me on GitHub
#fulcro
<
2022-06-11
>
stagmoose11:06:12

I store data in xtdb and I can get all todos in the Fulcro Inspect's EQL tab like the output and image below (I follow the same format in the fulcro book):

{:todo/id
 {#uuid "d83fdfb9-5cc5-49b8-a23e-e7550dd213fb"
  {:todo/id #uuid "d83fdfb9-5cc5-49b8-a23e-e7550dd213fb"},
  #uuid "9d818b41-5e49-4354-9e89-323c79ecd1b5"
  {:todo/id #uuid "9d818b41-5e49-4354-9e89-323c79ecd1b5"},
  #uuid "26591b2e-dab0-4755-b7ea-2a502b586925"
  {:todo/id #uuid "26591b2e-dab0-4755-b7ea-2a502b586925"},
  #uuid "2b67d7a4-8abd-4adf-9b6b-ee0199af4800"
  {:todo/id #uuid "2b67d7a4-8abd-4adf-9b6b-ee0199af4800"},
  #uuid "0da56509-2782-47a2-8df7-dc349b8ee7d0"
  {:todo/id #uuid "0da56509-2782-47a2-8df7-dc349b8ee7d0"}}}
And I use the following code to generate UI, My UI code:
(defsc Single-Todo [this {todo-id :todo/id}]
  (div todo-id))

(def ui-single-todo (comp/factory Single-Todo))


(defsc Todos [this {all-todos :todo/id}]
  {:query [:todo/id]
   :ident (fn [] [:component/id :todos])
   :route-segment ["todos"]}
  (div :.ui.container.segment (map ui-single-todo (vals (:all-todos all-todos))))) 
but having errors saying Props passed to app.ui.root/Todos are of the type cljs.core/PersistentVector instead of a map. Perhaps you meant to map the component over the props? Additionally, I am confused by the restriction of not having a vector in props. To be more specific, in the last image the var people is a vector props by the definition of the second image. Is there something I am missing? (last two images from fulcro books 4.13)

sheluchin12:06:23

The first image there shows how the list-table, a mock backend database, is converted into a vector of idents by the resolver. That's how a to-many join is represented in Fulcro. You are not returning a vector of idents. Also, if Todos is your root node, it should not have an ident, and its props and query should pick out a top-level key like :all-todos while composing Single-Todo's query into it. https://fulcro-community.github.io/guides/tutorial-minimalist-fulcro/#_zooming_in_on_components_and_mutations this whole page is a helpful to wrap your head around core concepts. Particularly the Figure 3. Components, query, and data: UI → query → data → UI image.

❤️ 1
Jakub Holý (HolyJak)13:06:08

That is a key question: is Todos your root component? If yes than @UPWHQK562's points apply. If not then show the root one. > the restriction of not having a vector in props. you can have vector as the value of a prop but props itself must be a map. So you can get props like {:all-todos [...]} and then, as suggested above, (map ui-single-todo (:all-todos props))

🙏 1
sheluchin13:06:07

A way of thinking about it that I've found useful is that a component's options (ident and query) are used together to do something like:

(-> client-db            
    (get-in ident)       
    (select-keys query)) 
So if you think about it that way, it makes no sense for the props to be anything other than a map. This is a bit of a simplification, but that's the gist of it. David Nolen talks about this idea in this talk from 2015 on Om Next, which provided some of the inspiration for Fulcro's design https://youtu.be/ByNs9TG30E8?t=1032

❤️ 1
🙏 1
stagmoose13:06:15

Thanks for you guy's replies. It might took me some time to make sense of all of these.

stagmoose14:06:19

@U0522TWDA my [:todo/id] in the first image give me :

{:todo/id
 {#uuid "d83fdfb9-5cc5-49b8-a23e-e7550dd213fb"
  {:todo/id #uuid "d83fdfb9-5cc5-49b8-a23e-e7550dd213fb"},
  #uuid "9d818b41-5e49-4354-9e89-323c79ecd1b5"
  {:todo/id #uuid "9d818b41-5e49-4354-9e89-323c79ecd1b5"},
  #uuid "26591b2e-dab0-4755-b7ea-2a502b586925"
  {:todo/id #uuid "26591b2e-dab0-4755-b7ea-2a502b586925"},
  #uuid "2b67d7a4-8abd-4adf-9b6b-ee0199af4800"
  {:todo/id #uuid "2b67d7a4-8abd-4adf-9b6b-ee0199af4800"},
  #uuid "0da56509-2782-47a2-8df7-dc349b8ee7d0"
  {:todo/id #uuid "0da56509-2782-47a2-8df7-dc349b8ee7d0"}}}
so my query in Todos component should have props the same as above. Am I right? If I am right, why did the error complain Props passed to app.ui.root/Todos are of the type cljs.core/PersistentVector instead of a map (btw, my code was mimicking the fulcro template, just trying to add a new tab. https://github.com/fulcrologic/fulcro-template/blob/master/src/main/app/ui/root.cljs)

Jakub Holý (HolyJak)15:06:45

What does the parent component of Todos look like?

stagmoose15:06:54

(defsc TopChrome [this {:root/keys [router current-session login]}]
  {:query         [{:root/router (comp/get-query TopRouter)}
                   {:root/current-session (comp/get-query Session)}
                   [::uism/asm-id ::TopRouter]
                   {:root/login (comp/get-query Login)}]
   :ident         (fn [] [:component/id :top-chrome])
   :initial-state {:root/router          {}
                   :root/login           {}
                   :root/current-session {}}}
  (let [current-tab (some-> (dr/current-route this this) first keyword)]
    (div :.ui.container
         (div :.
              (dom/a :.item {:classes [(when (= :main current-tab) "active")]
                             :onClick (fn [] (dr/change-route this ["main"]))} "Main")
              (dom/a :.item {:classes [(when (= :settings current-tab) "active")]
                             :onClick (fn [] (dr/change-route this ["settings"]))} "Settings")
              (dom/a :.item {:classes [(when (= :todos current-tab) "active")]
                             :onClick (fn [] (dr/change-route this ["todos"]))} "Todos")
              (div :.
                   (ui-login login)))
         (div :.ui.grid
              (div :.ui.row
                   (ui-top-router router))))))

(def ui-top-chrome (comp/factory TopChrome))

(defsc Root [this {:root/keys [top-chrome]}]
  {:query         [{:root/top-chrome (comp/get-query TopChrome)}]
   :initial-state {:root/top-chrome {}}}
  (ui-top-chrome top-chrome))
I guess it would be TopChrome

Jakub Holý (HolyJak)15:06:13

Sorry, this is to complicated to read on the phone.

Jakub Holý (HolyJak)15:06:45

If you struggle getting it to work, perhaps simplify it first? A simple Root that directly renders Todos?

👌 1
stagmoose16:06:38

No worries! I'll try to fix it. Thanks for your replies!

Jakub Holý (HolyJak)16:06:22

👍 The error tells me you pass props to Todos incorrectly.

stagmoose16:06:09

Okay. I'll try!

Klay14:06:57

I just picked up Fulcro yesterday and I’m in the process of learning it, but noticed this in the best practices section of the book: > You should consider Fulcro RAD early in your application development. The attribute-centric focus brings a lot of extensibility/flexibility to your application, and the overall design and internals might help you understand more advanced usage of Fulcro itself. Since I’m new to Fulcro and RAD has its own dedicated book, what would be the best way to learn the two? Should I invest in regular Fulcro first, then try learning RAD later, or learn them concurrently?

tony.kay23:06:14

Yeah, sorry if that sentence is a bit misleading. You have to learn the basics of Fulcro first. The sentence says “early in your application development”, nor “learning” 😄 I know it’s a fine point, but I don’t recommend learning by writing your target application. Learn by doing small exercises and understanding the bits in isolation. Think of RAD as some helpers for making quick headway on a real application, but understand that those use all of the Fulcro bits underneath, and chances are you’ll have to dig in and understand those internals if you use it.

🙂 1