Fork me on GitHub
#fulcro
<
2021-08-24
>
lgessler02:08:48

figured something out today and was happy with it and thought I'd share--I had to figure out how to use query params (the ?foo=bar thing on the end of a url) with my Fulcro app. The approach I took was to duplicate the parameter state in both the fulcro component and in the browser URL, and to keep them in lock step. First step was to make some clojure wrappers around the browser API (https://github.com/lgessler/glam/commit/41d5dc4c89efd7a1e1b6f1d453a0a0e65176811a), and then I made sure to change the URL wherever I changed the fulcro component attribute (https://github.com/lgessler/glam/commit/9ece6af612f1b4bbc2d895d91abc639e11a76c26). might not be the most elegant approach, but it's simple!

Hukka05:08:30

If you need to have one place to write the param, and other to read it, sure, you need some kind of signaling mechanism for the rerender to happen, and changing the fulcro state is a natural way to do it

Hukka05:08:11

If the same component would be reading and writing it, then you could also just use JS interop to directly read it when rendering, and know that it will not change without the component knowing

Hukka05:08:14

Though, of course, assumptions will break when least expected, like when a user changes it manually. Having a listener for the URL params synching to fulcro would make it pretty reliable

tony.kay13:08:15

Uses transit-encoding for the route params which honor Fulcro’s ability to extend the types supported. So, your dynamic routing parameters are encoded with all supported types and restore properly. Not user-readable, but could easily be adapted (it’s protocol-based) to use your own URL encoding/decoding.

lgessler23:08:32

thanks for the good ideas both! will keep that in mind if my needs ever get more sophisticated

jussi13:08:40

(defsc City [_ {:city/keys [name coords]}]
  {:query         [:city/id :city/name :city/coords]
   :ident         :city/id}
  (li
   (str name " (" coords ")")))

(def ui-city (comp/factory City))

(def city-data
  [#:city{:id 1 :name "Pää-Hesuli" :coords [60.1699 24.9384]}
   #:city{:id 2 :name "Kuopijo" :coords [62.8980 27.6782]}
   #:city{:id 3 :name "Lahi" :coords [60.9827 25.6612]}
   #:city{:id 4 :name "Turggu" :coords [60.4518 22.2666]}])

(defsc Root [this {:list/keys [cities]}]
  {:query [{:list/cities (comp/get-query City)}]}
  (merge/merge-component! this City city-data :append [:list/cities])
  (println (str "Got some cities! " cities))
  (div {:className "container"}
       (div {:className "main-panel"}
            (h3 "The Great Map")
            (ui-leaflet))
       (div {:className "horizontal-spacer"})
       (div {:className "planner-panel"}
            (h3 "Teh Great Planner")
            (div "Origin cities"
                 (ul {:className "city"}
                     (map ui-city cities)))
            (div "Destination cities"
                 (ul {:className "city"}
                     (map ui-city cities)))
            (div {:className "city-selectors"}))))
Playing around with Fulcro for the first time and having trouble to get the data to render. This is a really simple Leaflet/Fulcro combo and I can see in the Fulcro inspector that the client db has the cities but Root fails to render them. Obviously I'm missing something from the data pipeline...

jussi13:08:56

merge-component! schedules rendering but cities stays empty

jussi13:08:53

All pointers wlecome 😅

tony.kay13:08:01

You should be using initial-state, not merge-component in the rendering! Rendering should be side-effect free.

💯 3
tony.kay13:08:56

You’re probably causing an infinite loop that is causing the tab to hang

tony.kay13:08:27

If you want to play with m-c, use a button with a onClick trigger to do the merge

tony.kay13:08:09

yeah, all side-effects need to be in mutations (or side-effecting helpers like merge-component!), but React in general doesn’t want you doing side-effect without there being some (single) event doing them. A setTimeout, user event, etc.

jussi13:08:39

Yup, tried to fiddle up some static data before real backends and mutations, 👍:skin-tone-2:

tony.kay13:08:30

You could totally do the operation in the REPL…If you’re playing. You can always pass the app to load!, merge-omponent!, etc.

👌 3
jussi08:08:13

(comment
  (do
    (merge/merge! app {:list/cities city-data} (comp/get-query Root))
    (f-app/schedule-render! app))
  )
This was the solution, thank you for the pointers 🙏

👍 3
tony.kay17:08:27

The latest version of Fulcro fixes that bug that is making you call schedule-render

❤️ 6
tony.kay17:08:47

almost no one (except internals) use merge!, so that one was there for a very long time.

lgessler23:08:11

is there a trick to getting fmw/augment-response to work with fulcro-websockets? I'm still in the midst of debugging the issue but it looks like for some reason the augmented response is not resulting in a session write

3
lgessler06:08:22

I've verified the pathom parser's output is what I expect, and I see fulcro-websockets uses the same method the standard fulcro remote setup does (`handle-api-request`), so it's not that the augmentations aren't being made to the response I think...

lgessler06:08:48

my middleware setup, in case it's relevant... pretty small:

(-> not-found-handler
    (fws/wrap-api websockets)
    wrap-html-routes
    (wrap-defaults defaults-config)}

lgessler06:08:55

maybe I've misunderstood something--the fulcro-websockets package is intended as a replacement middleware for the standard wrap-api, right?

lgessler16:08:54

ok, read up in the sente docs, tl;dr the problem i had is that the augmented response wasn't making it to the second half of the session middleware, which is intended: https://github.com/ptaoussanis/sente#how-can-server-side-channel-socket-events-modify-a-users-session

lgessler17:08:43

OK, problem solved--I ended up keeping the standard AJAX fulcro remote around in addition to the ws remote, so that all traffic goes to the websockets remote unless it needs to modify session (so, just login/logout/signup), in which case it goes to the ajax remote. diff for posterity: https://github.com/lgessler/glam/compare/41e089e1ef1132b04465e47fce24d92eea91cd75..edeafff663955068c56883ee5f0a0ef43e1982dc

lgessler19:08:55

@U0CKQ19AQ would you consider a PR on the fulcro-websockets repo to just add some detail to the readme on gotchas, common config, etc.?

tony.kay21:08:26

Of course

🙌 3