fulcro 2022-05-13 | Slack Archive

janezj12:05:51

I'm using google maps in my fulcro app - based on example in the fulcro book. But now I have to switch to another gmaps wrapper. Google provides own react components, way to much to complicated for me. So I selected https://react-google-maps-api-docs.netlify.app/ and ported the code. Basic stuff was easy (with warning You should not pass libraries prop as new ... please keep an array of libraries as static class property) (`ui-load-script {:googleMapsApiKey api-key :libraries ["drawing"]}` (ui-google-map args (ui-marker))) I have onClick handler which in transaction sets currently selected marker. And app must focus to the selected marker. In old version there is a map attribute "bounds" and when present, the map is properly centered. Below is an example of panTo javascript. I don't know how to implement call useEffect and from where. Hopefully not from onClick.

function PanningComponent() {
  const map = useGoogleMap()
  React.useEffect(() => {
    if (map) {
      map.panTo(...)
    }
  }, [map])

  return null
}

Björn Ebbinghaus16:05:17

There is a hooks <namespacehttps://book.fulcrologic.com/#reacthooks_support|namespace >https://book.fulcrologic.com/#_react_hooks_support

(defsc PanningComponent [this {:keys [marker]}]
 {:query [:marker]
  :use-hooks? true}
 (let [map (useGoogleMap) ; wherever you got this function from
   (hooks/use-effect 
     #(some-> map (.panTo marker))
     [map])))

👍 1

Carlo20:05:08

I'm trying out fulcro's react interop with this library: https://github.com/ydeshayes/react-highlight. I see that we have a default export here https://github.com/ydeshayes/react-highlight/blob/master/src/index.js#L3= so I initially tried importing via:

(ns ...
 (:require...
  ["highlightable$default" :as highlightable]))

(def high (interop/react-factory highlightable))

and afterwards with a couple of other combinations. However I get:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

What am I missing?

✅ 1

Jakub Holý (HolyJak)20:05:04

The import looks right. I typically verify it with (js/console.log highlightable) Are you suggesting that somewhere in your component you have something like (high {}) but it gives you this error? You could also check what (js/console.log (high {})) produces...

Carlo20:05:28

Exactly @U0522TWDA, when I log out highlightable I get back a function, and if I try to run (high {}) I get an error:

Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at t$jscomp$0.value (Highlightable.min.js:7:4096)
    at t$jscomp$0.value (Highlightable.min.js:7:4096)
    at finishClassComponent (react-dom.development.js:20562:31)
    at updateClassComponent (react-dom.development.js:20508:24)
    at beginWork (react-dom.development.js:22441:16)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4162:14)
    at Object.invokeGuardedCallbackImpl (react-dom.development.js:4211:16)
    at invokeGuardedCallback (react-dom.development.js:4275:31)
    at beginWork$1 (react-dom.development.js:27406:7)
    at performUnitOfWork (react-dom.development.js:26514:12)

on one hand it would seem that this is a problem in the highlightable library, but maybe that's because I'm not calling it correctly?

Carlo20:05:47

Hmm, it seems that this call doesn't have the problem, @U0522TWDA :

(high {:ranges []
          :enabled true
          :onTextHighlighted []
          :id "id"
          :text "text"})

so it probably was just me calling the actual component in the wrong way. I can debug further from here, thank you 🙏

👍 1

Jakub Holý (HolyJak)21:05:25

Glad to hear that!

🙌 1

Carlo22:05:45

Continuing the train of thought from the library in the question above, now a question on translating react patterns. What I have in fulcro is:

(defmutation add-highlighted-range
  "Add a highlighted range"
  [{:keys [range]}]
  (action [{:keys [state]}]
          (swap! state update :ranges
                 (fn [old-ranges]
                   (js/console.log "old ranges" old-ranges)
                   (conj old-ranges range)
                   ))))

(def highlight (interop/react-factory highlightable))

(defsc Root [this {:keys [ranges]}]
  {:initial-state {:ranges []}}
  (dom/div
   (js/console.log "Ranges:" ranges)
   (highlight {:ranges ranges
               :enabled true
               :onTextHighlighted (fn [r]
                 (comp/transact! this [(add-highlighted-range {:range r})]))
               :backgroundStyle {:backgroundColor "#ffcc80"}
               :id "1"
               :text lorem})))

The text is selected and the props are updated (I see that in the logs), but I get no highlights in the component, and I think it is because I'm not using the component correctly. Here's an example usage: https://github.com/ydeshayes/react-highlight-example-app/blob/master/src/containers/HighlightApp.js#L57-L66= I'm mainly confused by the fact that a range object has as a field his parent. I'm not sure even if I have to update the state via a mutation at all. Do you have some insight?

Carlo00:05:20

I now understand better the pattern in react thanks to https://reactjs.org/docs/state-and-lifecycle.html

Carlo00:05:59

but still, I'm unsure on what's the corresponding pattern in fulcro (In reagent I'd just use a type-2 or 3 form to create local state for the wrapper

Carlo11:05:29

I seem to have solved my immediate problem by switching to another library for the same effect. Though it's not pressing, I'd still be interested in knowing how this one could have been made to work, and what's the thought process I should have followed

2022-05-13

Channels