Fork me on GitHub
#fulcro
<
2018-08-30
>
veddha03:08:18

I don't know where i wrong, i use fulcro 2.6.0

veddha03:08:44

The class is working, just style doesn't working, Thanks.

veddha03:08:44

The class is working, just style doesn't working, Thanks.

cjmurphy05:08:07

@veddha.riady Try using [fulcro.client.localized-dom :as dom].

cjmurphy05:08:39

Also there needs to be queries.

veddha05:08:06

i've tried both of them, still not working:(

cjmurphy06:08:11

Instead of the classes version there you can just have :.textHeader. I couldn't get className to work at all.

cjmurphy06:08:05

Notice that Header is queried by Root and that Header has a query, even though it doesn't need a query.

šŸ‘ 4
cjmurphy06:08:14

Generating the css follows the path of the query. So the query tree (upside down tree) has to go all the way to where you want the css.

exit216:08:38

hi all, Iā€™m still trying to figure out why my component seems to refreshing to its default state, Iā€™ve reworked my mutation as follows using df/load but it still seems to flip everything back to default:

cjmurphy16:08:39

If you are doing a df/load it should be outside a mutation. df/load-action is for inside.

exit216:08:04

fwiw, removing the target prevents the refresh, but the data obviously loads in the wrong place

exit216:08:30

I was trying df/load-action before, had the same issues

exit216:08:36

perhaps I can flip it back w/ the target stuff

cjmurphy16:08:30

Good to concentrate just on the data. To not have to think about refresh issues: :reconciler-options {:render-mode :keyframe}.

exit216:08:03

@cjmurphy is that something I can pass in the options next to :params, etc?

cjmurphy16:08:32

No it is right at the start of the app.

cjmurphy16:08:48

new-fulcro-client.

cjmurphy16:08:59

Can you show the defsc for [:space-details :global]? Does it have a join in it called :calendar-events, that joins to some other component?

exit216:08:53

its a defui right now, from the old world

cjmurphy16:08:06

I'm a bit confused actually. Normally I think you would just want to target a table - the table that has all the calendar events in it. In which case you would not need a :target.

exit216:08:54

So on initial load, I populated the :calendar-events, the mutation is when the user clicks on the next month and I fetch more data for that month

exit217:08:15

the data comes in, looks fine - but the UI switches back to the previous month (or default in this case which is new Date()

cjmurphy17:08:31

The UI is a product of the state, so good to know what state change is happening to cause that.

tony.kay17:08:07

We need to see the component and the invocation pointā€¦sharing a bit more code would be helpful @njj

exit217:08:11

the data location is [:space-details :global :calendar-events], so I did the same for the :target

exit217:08:16

[ 39.556s] [fulcro.client.primitives] Component [object Object] threw an exception while rendering Error: No protocol method IMap.-dissoc defined for type cljs.core/PersistentVector: [:space-details :global]

exit217:08:24

but it says it canā€™t find it :thinking_face:

cjmurphy17:08:42

I expected to see a join there. Is there a defui for CalendarEvents? Is there a thing called a calendar event in your app?

exit217:08:50

:calendar-events is the key for the data

exit217:08:05

that gist, I pass the props down to a child ā€œdumbā€ component

cjmurphy17:08:14

The load needs to put a bunch of idents there.

cjmurphy17:08:40

That refer to an actual table, where the data itself is.

exit217:08:17

Iā€™ve switched it back to a load-action per your recommendation

cjmurphy17:08:09

And having the same key for the join and the load is a bit confusing. I know it is like that in the docs for the simplest case.

exit217:08:04

I mean, I could call it whatever in the load-action :fetch-calendar-events

exit217:08:28

(defmethod api-read :fetch-calendar-events [env _ {:keys [space-id calendar-params]}] etc..

cjmurphy17:08:37

Yes better, just to keep us clear minded.

exit217:08:40

w/o :target or :refresh in the mutation, it causes the default state of the calendar component

exit217:08:53

I think it some combination of getting those correct

cjmurphy17:08:15

The error message is looking at an ident when it expects a map.

cjmurphy17:08:51

And I suspect it is because you have not got a join there.

cjmurphy17:08:30

There :name-in-use is just returning true or false.

cjmurphy17:08:20

So :ui/name-status would be nothing special, no join needed.

exit217:08:41

ok so this is odd

exit217:08:56

(defmethod m/mutation 'space-details/fetch-calendar [{:keys [reconciler] :as env} _ {:keys [space-id calendar-params]}]
  {:remote (m/remote-load env)
   :action (fn []
             (df/load-action env :fetch-calendar-events nil {:params {:space-id space-id
                                                                      :calendar-params calendar-params}
                                                             :target [:space-details :global :some-random-key]
                                                             :marker false}))})

exit217:08:14

this will populate the data into :some-random-key, not causing a UI hard refresh

exit217:08:35

once I change that to :calendar-events, it clears out the current calendar events (as expected), then flips the UI

cjmurphy17:08:11

I think it might work if the :calendar-events that was returned was just a string "I am calendar events".

exit217:08:31

not sure if I follow

exit217:08:42

the shape of the data is exactly the same

cjmurphy17:08:21

Just saying there needs to be a join to another another component at :calendar-events.

cjmurphy17:08:17

Anything that is not 'scalar', so is a thing, needs a component with an ident.

cjmurphy17:08:04

Things have their own tables (thing/by-id) and other things point to them via idents.

exit217:08:45

this is rather frustrating haha šŸ˜„

cjmurphy17:08:29

Yes it can be. Not much in the way of error messages to help when you go 'off piste'. šŸŽæ

cjmurphy18:08:10

Much head scratching sometimes, but it is so good when you realise all the pain means you will always be able to reason locally about your app, not matter how huge it gets.

tony.kay19:08:54

@njj your gist isnā€™t working for me

tony.kay19:08:46

I have to see the exact definition of the UI components involved, or I cannot help.

tony.kay19:08:39

But the commentary about load/load-action still doesnā€™t seem to have been understood. You should replace the UI call to (transact! this '[(space-details/fetch-calendar ...)]) to a call to (load this :fetch-calendar-events ...). Thatā€™s what I meant about not using load-actionā€¦what I meant was: itā€™s a loadā€¦so use load, not transact.

tony.kay19:08:58

but that is not your overall issue

tony.kay19:08:10

just a clarification that youā€™re adding mutation overhead where it isnā€™t needed

exit219:08:24

Iā€™ve come up with a short term solution, the react calendar component was storing the selected month in its component local state. It has an option to pass a prop of the selected month, so Iā€™m doing that now and tracking the data and the state of the month in my clojure app

tony.kay19:08:53

So, if youā€™re using component-local state, all sorts of zany things can happen with load: You see, React can unmount/mount a component if it looks to be a ā€œdifferent instanceā€ā€¦and that can lose component-local state (which goes away on unmount). Chances are that was your problem, and not load at all.

exit219:08:22

its the component local state of the javascript library

exit219:08:32

it keeps track of the month, but on the reload was flipping back to default

tony.kay19:08:59

Rightā€¦ok. That is the right solution then

tony.kay19:08:10

make it a controlled component, which is what you did

exit219:08:20

at least I can have control of its state

exit219:08:27

Iā€™m glad that allowed that prop to be passed šŸ™‚

tony.kay19:08:46

yeah, the React community is getting wise to the ā€œall input-like things should be controllableā€

tony.kay19:08:30

Just so you know: your earlier description of it going back in time was a good clue, but the reason it confused me is that Fulcro patches props for refresh, and 2.5.x had time-based logic to prevent odd cases that could happen of state looking like it went backwards. 2.6 no longer has this, but it hadnā€™t shown any bugsā€¦but anyway, I was wondering if you had found a bug and needed to see more, but glad it turned out to be c.l. state. For such a simple use-case I would have expected a bug to have appeared long ago.

šŸ‘ 4