Fork me on GitHub
#fulcro
<
2018-02-26
>
pithyless10:02:01

@tony.kay I followed the new UI routing guide today; it was clear and easy to understand. Thanks! :thumbsup:

pithyless10:02:35

Do I understand correctly that in a defsc, this should give me a reference to the dom node? :componentDidMount (fn [] (js/console.log (fulcro.client.dom/node this))) Because all I’m seeing is undefined

wilkerlucio13:02:16

@pithyless you can try (js/ReactDOM.findDOMNode this), I think that works

pithyless13:02:41

@wilkerlucio weird; ok, so both dom/node and findDOMNode work; but the problem was my root node was a material-ui-next component I was mounting. When I switched to a plain dom/div everything worked fine.

pithyless13:02:04

For reference, I’m using the components via:

(defn react-factory [cls]
  (fn [props & children]
    (apply react/createElement cls props children)))

wilkerlucio13:02:45

a good recommendation is to use ref to point to things

wilkerlucio13:02:29

(my-element {:ref #(gobj/set this "element" %)})

currentoor18:02:05

Is :ref a react ref?

wilkerlucio18:02:16

so, dom stuff you need to use #js {:ref ...} and on factory things {:react-ref ...}

wilkerlucio13:02:41

this way you can be sure you are targeting the correct thing

pithyless13:02:45

good to know, thanks

magra14:02:29

Hi, I am trying to figure out routing. I based my setup on the Routing Video and the corresponding code and the chapters in the book. My goal is to have a route like with a list of postal addresses that can be added to. Showing them works fine, but adding one via an input field clears all data from the ui. The actual processing of the added address works fine, tempid, server and all. In the example there are static pages which get routet to from the routing tree as [:home-page :single]. Then there are dynamic pages that get routet to as [:report/by-id :param/id]. The former shows up in the db root. The latter does not, since it uses the normalized entities. When I put an input field at the top of the list on one of the static routes to add an item it works and the ui updates. In my case that is the person list. When I put an input field at the top of a dynamic page adding an item adds it to the db, the server with the tempid and all, but the page looses its data. In my case that is the person page with the addresses. On the person/20 page there should be some information on the person and some addresses. Does this really call for two nested routers? But when I try to do it with one router, how do I pass the :param/id from the url to the router. When I put in the static keyword for the pages all routes work but the :param/id is not passed. When I put in the :param/id I do not get the router to work, except when nested as in the example. How do I build a TopRouter that can pass :param/id to one of the otherwise static pages?

claudiu16:02:48

@magra Not exactly sure I understand everything. But have you tried just adding the url params where you need them by mutation ?

magra16:02:36

(def routing-tree
  (r/routing-tree
--- more top-router routes. ---
   ((r/make-route :person-page [(r/router-instruction :top-router [:person-page :top])
                                (r/router-instruction :person-router [:person/by-id :param/id])])))
In the person router I can use the :param/id. If I try to use only one router, where would that go in the :top-router?

magra16:02:44

I need the :top and the :param/id how would I do both on the same level?

magra16:02:00

@U3LP7DWPR are you suggesting to put them someplace else?

donmullen14:02:32

@pithyless how do you like material-ui-next - are you pulling in via shadow-cljs or cljsjs? I believe https://github.com/madvas/cljs-react-material-ui has an issue to pull in material-ui-next.

pithyless14:02:10

@donmullen so far so good, but I have not yet tried to do something crazy where my customizations will break everything. ;] I am running the latest 1.0.0-beta.34 via shadow-cljs (which has been a joy to work with) and have integrated several react-virtualized based components without a problem. The only issues I’ve seen so far are breaking changes (read the changelog before bumping versions) and partially integrated ThemeProvider (so you have to sometimes set custom styles for components, where you would think it should just pick them up).

tony.kay18:02:23

@magra Frustrating...I don't see anything off-hand

tony.kay18:02:54

any console errors?

tony.kay18:02:09

ident could be the problem if your router's ident function isn't consistent with the component idents

tony.kay18:02:38

Refresh of a component works as follows: The component you transact on is queued for refresh. It's ident is used to create a query for JUST that component [{[ident of component] [query of component]}], and then Fulcro refreshes just that component (subtree). If the ident is wrong, then this query returns empty data, which will cause the component to clear

tony.kay18:02:05

Oh, and that is your problem

tony.kay18:02:15

you're using :id instead of :db/id in your ident

magra18:02:40

@tony.kay Wow! Thanx! That solved it. I did that because I confused it with param/id.

tony.kay18:02:43

"Refresh going blank" is almost certainly an ident problem every time 🙂

tony.kay18:02:03

I need to add something in that gives an additional warning at least in dev mode

tony.kay19:02:37

@magra The defsc macro is build to help warn you of that, but you "fixed the warning" by adding :id to the query instead of fixing the ident 😜

tony.kay19:02:19

on reflection I realized I did give you a warning for that case: if your query doesn't ask for something in the ident...but if you fix it by asking for the "wrong thing", then it doesn't help 🙂

tony.kay19:02:39

Your query says [:id :db/id ...]

tony.kay19:02:53

seems to me when you messed up the ident it told you :id wasn't in your query, but was used in the ident...I'm guessing your "fix" was to add it to the query

tony.kay19:02:56

Perhaps I can clarify the error message

wilkerlucio19:02:25

@tony.kay on that, when I was trying to write a union component using defsc, the error message about the query was confusing, it just said something like unexpected [], I had to spend a good time to figure I had to make my :query a fn to use union queries there

tony.kay19:02:47

Yes, that should be improved too

tony.kay19:02:54

the docs say it, but error message should be better

magra19:02:44

@tony.kay I have the id plus :db/id in the query because I am still not to clear where the :param/id that bidi passes into the routing tree becomes the :db/id in the component called by the router.

tony.kay19:02:35

So, :param/id is just a placeholder that is replaced by the routing instructions based on the values in the routing-parameters map. Nothing at all to do with query or component

tony.kay19:02:49

Did you read the updated routing section in dev guide? It’s much clearer now

magra19:02:10

I have and thank you for the work you put not only into the libraries but also into the documentation. I will have to work through that a few more times 😉

tony.kay20:02:30

You’re welcome.

ordnungswidrig20:02:20

When I pass data to a defcard-fulcro does it need to be denormalized or will it automatically denormalized?

tony.kay20:02:38

how are you passing it?

tony.kay20:02:04

(defcard-fulcro card-name Root {...here...})

ordnungswidrig20:02:08

As the initial state, yes.

tony.kay20:02:39

normalized. Devcards puts that in an atom, and when Fulcro gets an atom it wants it normalized…why not using initialstate of the Root , though?

tony.kay20:02:05

The card will auto-pull :initial-state from Root if that map is empty

ordnungswidrig20:02:18

I wanted to test the root component with different states. Maybe I’m doint something stupid

tony.kay20:02:40

so, you can do that…just generate a tree, then run through through tree->db

tony.kay20:02:57

or hand-generate normalized…but that’s tedious

tony.kay20:02:20

If you want to test with different state for UI verification, use a static normal defcard

tony.kay20:02:49

that way you’re not making a whole app…you’re just passing a single set of props.

tony.kay20:02:23

Initial state is really something that is a starting point…the started callback is where you would typically respond to the environment and modify how the app behaves once started

tony.kay20:02:39

e.g. via loads, merge-component!, etc.

ordnungswidrig20:02:31

When I use a static defcard, I cannot use mutations, right?

tony.kay20:02:27

correct, but initial state is just initial state

tony.kay20:02:40

so I thought you were wanting to just “see” what it looked like

tony.kay20:02:44

static card is great for that

ordnungswidrig20:02:12

But I think I get it, for static, a simple defcard is the easiest

tony.kay20:02:12

So, how do you plan to trigger these different initial states?

tony.kay20:02:21

in the real world

ordnungswidrig20:02:06

Yes, in the real world the come from the app state / queries. I wonder what is the advantage of defcard-fulcro over having the application running then

ordnungswidrig20:02:01

Maybe a more concrete example would help? For a “person list” I want a defcard for the empty list, so I can see, and test the behaviour of adding a new person. I want also a defcard for a “person list” that is already populated with data. It’s well possible I’m doing something unusual or silly.

ordnungswidrig20:02:12

When I have a bigger application that has many of these components, person list, a organization list and other components, I thought it might be usefull to be able to test each component in isolation but including the mutations.

tony.kay20:02:32

Sure, that is very common. Use the started callback, though

tony.kay20:02:53

have an initial state that is the “true” initial state. Then in each card run transations and state merges that move you to the desired state

tony.kay20:02:22

Things are relocatable, so you could even write “alternate” roots for the cards that embed portions of your app

tony.kay20:02:33

e.g. a Root that just works with the person list stuff

tony.kay20:02:47

that Root could have it’s own initial state that makes sense for that particular card

tony.kay20:02:52

much easier to code

tony.kay20:02:15

(by relocatable, I mean that idents enable your mutations to not care where in the UI things are at)

tony.kay20:02:33

The Workflow part 1 video on YouTube demonstrates this I think?

tony.kay20:02:38

I don’t remember exactly

ordnungswidrig20:02:05

I’ve seen all the videos, which are great! It’s hard, though, to remember everything at once as fulcro offers so many features 🙂

ordnungswidrig20:02:27

(I’m thinking about doing a series of videos for liberator now, so you inspired me)

ordnungswidrig20:02:52

So, in the decard-fulcro expression I can use mutations and only the last expression must return a component?

tony.kay20:02:14

Here’s a useful trick for cards:

(defsc CardRoot [this props]
  {:query [{:test-users User} ...]
   :initial-state (fn [p] {:test-users [...users...]})}
  ...)

tony.kay20:02:30

placing something in the root that isn’t really used by the root can still get you normalization

tony.kay20:02:46

this is a cheat way to put those users into the db table during startup

tony.kay20:02:08

you still need to link them into the UI, so perhaps it is just better to use :started-callback with merge-component!

ordnungswidrig20:02:38

That’s the last map of the defcard-fulcro call then?

tony.kay20:02:50

yes, the last map is card options:

ordnungswidrig20:02:59

(defcard-fulcro xxx root/Root {} {:started-callback ...})

tony.kay20:02:04

{:fulcro {:started-callback (fn [app] ...)}}

tony.kay20:02:15

just need the :fulcro key

ordnungswidrig20:02:27

Oh, if CIDER had shown me the docstring I would have known

ordnungswidrig20:02:55

Let me try that, and thanks for the help.

tony.kay20:02:20

defexample is just a macro, similar to defcard

tony.kay20:02:23

but for the book

tony.kay20:02:26

same concept

maridonkers20:02:08

With Fulcro version changed to [fulcrologic/fulcro "2.2.1"] in Fulcro Sample Application -- https://github.com/fulcrologic/fulcro-template *SSR* reports Cannot route: Unknown Screen in rendered HTML output for main page (normally redirects to login page). Only with Server Side Rendering; client side works and overrides when ClojureScript loaded.

tony.kay20:02:38

Hm. I didn’t think I did anything to break.

tony.kay20:02:57

I forgot to test routing changes against SSR 😞

tony.kay20:02:04

could you report an issue please?

maridonkers20:02:57

Maybe the sample application is just out of date? Report issue on the sample application?

tony.kay20:02:23

no, to Fulcro. Routing changes affect SSR on template application.

tony.kay20:02:35

it should be a transparent change…nothing should break

tony.kay20:02:47

if something breaks and all you did was a version bump, then I consider that a Fulcro regression

maridonkers20:02:30

Did a git pull on the sample application and version bump. Not sure if I did a lein clean though; will try first.

maridonkers20:02:56

Will report issue.

tony.kay21:02:29

confirmed problem

tony.kay22:02:15

2.2.2-SNAPSHOT should fix it.

maridonkers22:02:42

That's fast! Thanks, will try snapshot first thing tomorrow morning.

tony.kay22:02:42

It’s worrisome. The “fix” should have had no effect. So, I’m still puzzled. And I don’t like unsolved puzzles.

tony.kay22:02:39

Found it. The API wasn’t clear for getting the ident, and I was actually mis-using it.

maridonkers22:02:43

Couldn't sleep without having tried fix. 🙂 Confirmed fix in 2.2.2-SNAPSHOT. It now indeed works fine!

tony.kay22:02:32

@maridonkers still have to figure out why that change caused a problem…it hsould have been ok 🙂

tony.kay22:02:43

thanks for the report

tony.kay23:02:38

2.2.2 on clojars

donmullen23:02:40

@tony.kay One thing I’m unclear on in the “wire from leaf to root” is what happens at the Route level. In moving some code from devcard over to main/ui and putting the component within router controlled page - I have somehow wired up the components so that I’m getting a Assert failed: get-ident invoked on component with nil props — within a component that has initial-state set and shown in the inspect-data graph. Assert happens in the call (prim/transact! this [(load-grid {:pgrid-id id :grid-id grid})])` Code currently uses the bootstrap routing example. My Root queries the MainRouter -- should the Root also query and potentially get-initial-state for each of the screens referenced by the MainRouter? Currently my naive first-cut was for Root to reference a container component which is within one of the router-controlled screens.

tony.kay23:02:21

Hey Don. Chances are you’ve pointed an ident somewhere in your state at an entry that doesn’t exist….thus you’re getting empty props on UI refresh, and that leads to this message.

tony.kay23:02:55

Root should compose in the state of the main router. The router composes in state for all subscreens it controls (not Root…it is a tree). ALl of those screens must have initial state as well

tony.kay23:02:43

Also, your ident functions must be consistent. This could also happen (as it did this morning for @magra) if your ident function returns the wrong thing.

tony.kay23:02:47

I’m trying to think of something that can help with this issue more. It’s usually data consistency, but to be honest I got bit by it one or two days ago as well. It’s a nuance that is easy to screw up, and is so small it is hard to see.

tony.kay23:02:54

So, a more explicit answer to your specific initial “unclear”: The generated component from defrouter: - Compose the queries for all subscreens - Compose the initial state for all subscreens - Uses your supplied ident at the union ident function, which must match (in functionality) all of the screens under control

tony.kay23:02:28

and the router is just below that. That’s all defrouter does

tony.kay23:02:40

emits those two components

tony.kay23:02:54

(you know the bottom one by the name you supply, the top one is sorta hidden)

donmullen23:02:38

Thanks @tony.kay. Breaking for dinner (on EST time) - and I’ll take a closer look. I forgot to mention - I am getting the warning PropertyContainer's ident ([:prop-container/by-id nil]) has a nil second element. on PropertyContainer and two other components, so somewhere there is an ident that is off!

tony.kay23:02:11

more likely the state of the component doesn’t have the data that the ident function is trying to pull