Unfortunately I think this is related to https://reactpatterns.com/#function-as-children, not https://reactpatterns.com/#higher-order-component. The former works with actual component instances and the latter is wrapping component classes, not instances. Maybe I need to write Fulco version of the GoogleApiWrapper…

HOC is just function composition, so if you pass a component in as a prop, you’re essentially apssing in a function…and in that case if you try to use a fulcro component you will have the binding problem that that function solves.

I’m sorry if I misunderstood - do you mean that I should use prim/with-parent-context in my ui-my-map? (https://github.com/pbzdyl/fulcro-google-maps-react-issue/blob/master/src/main/nes/ui/components.cljc#L46-L48)

If yes, then what should be passed as the first argument (context)?

I don’t know the code, so it is a guess on my part. with-parent-context takes a parent component, so your ui-my-map would need to become a function that gets passed this from the calling component.

actually, you’re not using fulcro components inside of the thing, are you? If it doesn’t have children, then I’m leading you down a bad path 😕

Ah, I see someone else helped you. Sorry, I was a bit busy and was throwing a guess at you without looking very deeply

Actually, someone else helped me with something else 🙂 I didn’t know how to use GoogleAPIWrapper.

Now I’m still stuck as the props are not passed from component using ui-my-map to MyMap component wrapped with GoogleApiWrapper produced component

I tried it with with-parent-context but props are still not passed to MyMap component: https://github.com/pbzdyl/fulcro-google-maps-react-issue/blob/master/src/main/nes/ui/components.cljc#L46-L51

show me the usage

ah, I see

I missed the link

looking…

Ah, I see. Your factory for MyMap is expecting CLJ Fulcro props, but the Maps API is a JS component…so it will send you raw js props

or rather, the internals work that way…

I’m sorry but as I am still learning (and I’m coming from backend development) and I don’t know all the internals in React yet

So, you can define a function as a component in React

https://reactjs.org/docs/components-and-props.html

so, add a normal fulcro factory for MyMap, and then wrap a call to that in a conversion function…then use that conversion function instead of MyMap and it should work:

(def ui-map (prim/factory MyMap))

(defn my-map-wrapper [js-props]
   (ui-map (js->clj js-props)))

If you’re going to do interop things, you’re going to need to learn a bit more about the ecosystem…I can’t isolate you from those kinds of details 🙂

Let me try it

I know - and providing hints where to search it really helpful - thank you!

I knew it wouldn’t be easy when I read in React docs about higher order components that it’s advanced topic 😉

for a functional programmer, it’s trivial…You’re struggling with interop

Components can be written as functions…therefore HOC is practically = HOF

but you do have to get the arguments right

As a function, HOC at the native JS layer is just a (fn [js-props] …)

that get it?

oh wait, you have more problems

you have to pass js props to js libraries: https://github.com/pbzdyl/fulcro-google-maps-react-issue/blob/master/src/main/nes/ui/components.cljc#L32

props needs wrapped in (clj->js)

Yes, gmaps contains my wrapper fns for React components from the js library and they are defined using factory-apply

nvm…looks like you’re using DOM utils to do the conversion for you

yes

you getting props now?

So before applying your suggestions (using a fn as a component and have that fn converting js to clj props) I had my map being rendered but it wasn’t getting any props

Let me commit the new version - unfortunately with the new version the map is not loaded and only Loading placeholder is displayed

https://github.com/pbzdyl/fulcro-google-maps-react-issue/blob/master/src/main/nes/ui/components.cljc#L46-L55

but do your props print in the console?

This: ∅MyMap Props: {"children" ([]), "loaded" true, "google" {"maps" {…}}} Lat null Lon null

No props from parent fulcro component

what does location look like in Stop?

it was nil…

maybe some initial state is in order?

I’m so silly

Right…

I just put a static map {:lat 37.778519 :lon -122.405640} to ui-my-map-wrapped and I got the props

Let me fix the initial state issue first

MyMap component was missing :initial-state declaration

so, is it all working now?

I think you possibly have some refresh issues…the conversion from clj to js and back again will lose metadata

I fixed it and now the component gets the data but props contain string “lat” and “lon” keys - I fixed it by adding :keywordize-keys true to js->clj

ah, yes

So now MyMap gets the correct values bound to component args

But as you say I think there is a refresh issue

Could I trigger a refresh manually to confirm that it’s a refreshing issue?

I think there might be. Fulcro puts timestamps on data for tree refresh

are you seeing a refresh issue???…you don’t have mutations, so I’m not sure why you would (yet)

but wait….the HOC should pass your data through unchanged…so I think my suggestion of the wrapper is not needed.

The GoogleWrapperApi adds logic to trigger gmaps js load. So it first displays Loading placeholder and once the gmap api is loaded and initialised it replaces the placeholder with MyMap component

try passing the factory instead

ui-my-map instead of the glue one

and remove the conversion to js…actually, there isn’t one without the glue

actually, there is, because you’re doing factory apply

Now I have this:

(def ui-my-map-wrapped
  (let [HOC (GoogleApiWrapper #js {:apiKey "AIzaSyDAiFHA9fwVjW83jUFjgL43D_KP9EFcIfE"}) ;; HOC is a fn: ComponentClass -> WrappedComponentClass
        WrappedMyMap (HOC ui-my-map)]                           ;; WrappedMyMap is a component class that wraps MyMap inside with some added logic for Google API initialization
    (utils/factory-apply WrappedMyMap)))

so, depending on what the HOC component is really doing (it should just be proxying through the original props), your factory apply for it should not do a clj->js conversion

if the HOC itself uses the props, then an additional hack will be needed

and I’m getting:

warning.js:34 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `d`.
    in d (created by nes.ui.components/Stop)
    in div (created by f)
    in f (created by nes.ui.components/Stop)
    in div (created by b)
    in b (created by nes.ui.components/Stop)
    in nes.ui.components/Stop (created by fulcro.client.cards/ui_23666)
    in fulcro.client.cards/ui_23666

I’d put the CLJ props under a key like “cljprops”, and ensure that doesn’t get converted to js…then use the glue to pull it out unmolested

I think that maybe it would be much easier to just create my own Fulcro version of GoogleApiWrapper 🙂

possibly

but this should not be that hard

and wrap all the Map, Marker etc inside such wrapper

your goal is simply to pass through the unmolested CLJ props through the HOC. Your factory-apply defaults to a recursive conversion of the props.

do you mean (factory-apply WrappedMyMap)?

https://github.com/pbzdyl/fulcro-google-maps-react-issue/blob/master/src/main/nes/ui/utils.cljc#L18

that line

convert-props

ok - I will try this - thanks!

so if you instead had a passthrogh factory for HOC, you’d say something like `#js {“fulcroprops” props}

that would get rid of the warning, and then you can use the glue to pull them back out

right - but where should I unwrap that?

Oh, glue

I will try it now

Right….BUT…were you already seeing a refresh issue?

The props we got working caused a correct initial render, right?

Yes

ok

so yeah, this should help ensure that prop changes refresh things correctly

The lat, lon received from query were logged in the console twice

you in devcards?

Yes, devcards

then expect extra refreshes…

I changed it to use your trick

swapping on the atom causes it, and cards do that

props are passed correctly

but still only loading placeholder is visible

I can see that the gmaps script is loaded in the network tab

so from there it’s google’s API…don’t really know

I thought you said initial render was right?

Yes, but the initial render will show just loading placeholder (and it will trigger GoogleApiWrapper to load gmaps script)

OH…wait a sec…perhaps the HOC is trying to tack in API data in props somehow? Are you supposed to pass something through to the children?

Oh, yes, it passes “google” in props and I need to pass it to Map component

so, you’ll need to perhaps do that (including passing it through the fglue)

Oh, and I’m not passig it through as I’m getting just clj props 🙂

so I need to add google from js-props to my clj props

yes

It worked!

Thank you so much

I learnt a lot today

great

yeah, I learned a little, too 😉

You should contribute a blog post on integrating with HOC and Fulcro…I’d throw it up on the website 🙂

or even add it to the dev guide

react interop should be more detailed in the book

As a generalization: You could write a function that can do all of that for you. Use goog.object/clone to clone the props you get, tack in the fulcro props under a key like “fulcroprops” with gobj/add (react props are read-only so you have to clone them to do that)…it would just be a function that takes a Fulcro component and returns a function that can be used in an HOC

as long as your “made-up” key is not prone to collision, it should then be generally reusable. If you write it, I’d love to have a contrib. perhaps where I’ve got other react utils

That would be a good way to pay back for your great work on fulcro and your help

I don’t have a blog but I can come up with reusable code for working with HOC and provide some short doc in readme - then we could adapt it to the book or in other way

🙂

that’d be great

I will let you know when I have something

Have a good day and once again thanks for your help!

welcomne

Hello @tony.kay. I have create a gist covering the HOC topic: https://gist.github.com/pbzdyl/064272bece09cb3464b18d04f7246f50. I will add a reusable factory for working with HOCs later today or during the weekend. Any suggestions/comments are welcome!

Another update: I have added a reusable hoc-factory in the gist

Thanks! I’ll see about integrating it somewhere.

Feel free to change it however you need it 🙂

Could you open an issue on fulcro github and add a link to it? I don’t have time to do it right now, and Slack history will lose it quickly.