@U3MRWH35M could you please make a github gist out of this instead?

no offense, i just don’t want to download random files strangers post on the internet

@U09FEH8GN none taken 🙂 Done 🙂

thanks

ok so there’s a lot to do on this code

- the actual UI root component cannot have an ident (work spaces will make a wrapper root for you if you have ::f.portal/wrap-root? true, which you do not)

- initial state needs to compose to the root and be setup the correct way

there are a lot of new concepts involved in fulcro, once you understand them it’s really powerful stuff, but there is definitely a learning curve

have you read the book?

that’s a good place to start

http://book.fulcrologic.com/

these videos are helpful too https://www.youtube.com/playlist?list=PLVi9lDx-4C_Rwb8LUwW4AdjAu-39PHgEE

if you work your way through those two resources you should have a much better grasp on what normalized app state means and when to use idents and when idents don’t make sense

Thank you @U09FEH8GN I have been following clojure since 2013, but never got to use it in real world. Now I have decided to actually build something on my spare time using fulcro to get into it. I have gone through the book and the videos above (actually multiple times) but I have still not figured out a lot of things.

perhaps it’s better to understand things conceptually first

Do you know where can i find more details on "idents" and "queries"? I have read the fulcro book, which is amazing, but still unsure about these

the devcard based tutorial is pretty good

a little dated but most of it is still very relevant

I have setup the project using the fulcro lein template (which sets up the shadow-cljs based project), and now want to try it in my local

oh wait no the tutorial is too out of date

does the devcard based tutorial still work with the new template?

no it doesn’t

the book has plenty of actual code examples

I have setup the workspace (this root component was in a quick scratch workspace i setup to try it out)

all the demos in the book are in the source of the main fulcro repo

you could study those

Do you know why that dropdown does not let me select the value? I have updated the gist to correct the ident/queries and separate root component from actual

https://gist.github.com/neupsh/6b7c95cf0d87c40cf36dcb49c7c7cdf0

@U09FEH8GN ^^^

well it depends on the implementation of mui/TextField

my guess you need to pass in a on-change handler or some other prop

oops i should have been more clear

https://material-ui.com/demos/text-fields/

mui/TextField is react component

i realize that

you need to read it’s docs

it takes in a onChange prop

use that to transact a mutation and update the value you’re passing in

hmm looks like i needed to actually keep the state as well for the component I was thinking the "select" part will be handled by the component

@U0BR5D7A6 Don't think so. Think computed is just cool for when you're doing transact with the component this so that on refresh those don't get lost. When I don't need query or react life-cycle stuff I just write them as defn

Yeah, that’s what I figured. I wrote a higher-order component that maintains some local state (because react lib interop) and I realized I don’t really use prim/computed for these things.

@U0BR5D7A6 correct there is not difference in that case

when a component has a query, props have to come from app state (which should only have serializable data, i.e. not stuff like callbacks)

typically you pass callback props in as computed

but you can also pass in other data that is not queried for but still relevant in some way

thanks for the clarification, @U09FEH8GN 🙂

@U380J7PAQ do you mind sharing more of the source of this component?

mine? sure

yes

also was wondering if this: is causing the probelm http://book.fulcrologic.com/#_the_render_method

what about render?

the :classes key that exists for dom, etc compoments

well that depends on the definition of mui/drawer

have you tried with (mui/drawer (cljs->js {...}) ?

what component-factory are you using?

you mentioned it was in the incubator?

(defsc PageContent [this props _ {:keys [drawer drawer-paper]}]
  {:query []
   :css [[:.drawer {:width      "240px"
                    :flex-shrink 0}]
         [:.drawer-paper {:width "240px"}]]}
  (let [tst    (m.utils/class :drawerPaper props)
        tst-js (clj->js tst)]
    (log/debug "cl obj" (.-paper (clj->js {:paper drawer-paper})))
    (mui/drawer {:className drawer 
                 :variant   :permanent
                 :classes   {:paper drawer-paper}}
      (log/debug "drawer" (m.utils/class :drawer props))
      (log/debug "dp" (m.utils/class :drawerPaper props))

      (div {:className (m.utils/class :toolbar props)})
      (mui/list-mui
        (mui/list-item {:button true
                        :key    "Text"}
          (mui/list-item-icon (m.icons/menu))
          (mui/list-item-text {:primary "Text"}))))))

yeah I’m using the non-localized one at the moment

e.g. (def drawer (uc/component-factory Drawer))

right, sorry i meant what namespace is uc?

ah i found it

ah sorry lol [fulcro.incubator.ui.core :as uc]

yes unfortunately that will re-write :classes

ugh well at least we know what it is lol

yeah you’re best bet is to write your own component factory method

for JS interop i prefer a very light weight version

(defn factory-apply
  [class]
  (fn [props & children]
    (apply js/React.createElement
      class
      (clj->js props)
      children)))

for situations like this where fulcro’s stuff collides with the JS lib

Yeah, I’ll pop that in for now, then ping wilker about preferred ways ways to get around it in the lib

:thumbsup:

ah yeah, i think i see it now. since the incubator stuff is ultimately delegating to the fulcro client dom stuff

the :classes stuff is added there

yup that’s what happens when keys don’t have namespaces…

thx a mil

lol exactly

but no one wants to type ::prim/classes everytime even though it’s probably the better thing to do

happy to help

my teams give me a hard time about my “naming rants”

I’ve taken to just not helping if their code has unqualified keywords lol ’fix that, then get back to me: lol