Fork me on GitHub
#hyperfiddle
<
2024-03-18
>
nakkaya15:03:02

I am probably missing something obvious but here is the stripped down version of what I am trying to achieve,

(let [record (e/server
              (let [u (e/client record-id)]
                (e/offload #(query-record u))))
      !disabled (atom true)
      disabled (e/watch !disabled)]

  (if (= disabled true)
    (dom/div
     (dom/button
      (dom/text "Edit")
      (h/on-click
       (reset! !disabled false)))
     (RecordForm. record disabled))
    (dom/div
     (dom/div
      (dom/button
       (dom/text "Cancel")
       (h/on-click
        (reset! !disabled true)))
      (dom/button
       (dom/text "Save")
       (h/on-click
        (e/server (println "on-click" (e/client record)))
        (reset! !disabled true))))
     (RecordForm. record disabled))))
RecordForm takes a record map and shows a form, when disabled is true all text fields are shown deactivated when it is set to false form is editable and a set buttons are used to toggle the state. All is working except the part where I try to print the record itself, all fields of the record are nil however UI has all the correct values shown. i.e record has a first-name field it has the correct value in the UI but when on-click runs it's value is nil .

Vincent19:03:34

Can you do this with (ui/button (e/fn [] (e/client ...))) please

Vincent19:03:58

(ui/button 
  (e/fn []
    (e/client 
      (reset! !disabled false)))
  (dom/props {:class "ayyy"})
  (dom/text "Reset the !disabled atom to falesenesesess"))

Vincent20:03:35

It's important to use the ui4 elements such as ui/button dom/input since they are macros that will be redefined during the Electric compilation process.

Dustin Getz20:03:35

@U5H4U2HEH hard to say without an actual reproduction

nakkaya20:03:39

@U055PQH9R4M I get the same output. @U09K620SG I'll try to create a minimal working example. One more questions, under what conditions we should pick ui/button over dom/button ?

Dustin Getz20:03:18

ui4 namespace is intended to be more abstract with no access to the underlying event (iirc), it is also experimental

Dustin Getz20:03:57

dom namespace maps directly to underlying dom api without abstraction

nakkaya20:03:04

👍 thanks

Vincent20:03:15

@U5H4U2HEH if print is the only thing not working, it is something there. I think you have record wrapped with e/client but it is an e/server value 😉

nakkaya22:03:06

@U09K620SG @U055PQH9R4M I think I've figured out whats going on. A record has the following structure {:a #object[cljs.core.Atom {:val :b}]} if I do not deref values before using it on the server side it gets transfered/printed as {:a nil} .

(e/server (println "on-click" (e/client record))) ;; does not work as expected
(e/server (println "on-click" (e/client (pr-str patient)))) ;; prints as expected
(let [patient (e/client (update-vals patient deref))] ;; works as exptected
   (e/server (println "after-deref" patient)))

👍 1
Vincent22:03:56

Yes, when passing between client and server some values are "serializable" and others not. However, the serverside executable ought mention that you are doing an unserializable reference transfer` or something...

Dustin Getz22:03:07

V is right, the server should log when unserializable reference transfer is attempted

Dustin Getz22:03:09

with electric it is best to only use atoms unnested, not in records or collections

nakkaya22:03:06

unserializable reference transfer is attempted
I used to get that message once in a while but in this case it did not get printed.

Dustin Getz23:03:11

it is almost certainly either a logger misconfiguration or an editor issue

Vincent00:03:12

Oh is record a clojure thing via defrecord and therefore needs explicit support perhax?

Vincent20:03:40

Anyone with an uberjar deployed, what's your mem usage?

Dustin Getz20:03:44

tutorial app 30 day view

Dustin Getz20:03:56

datomic viewer 30 day view

Vincent21:03:16

Brilliant, thank you

Vincent21:03:30

Design question, for someone making a seek bar for audio playback 🎛️ 🎼 Does it make sense to use (dom/range ...) or is it perhaps better to invent some sort of canvas component to capture clicks? Looking for the least effort maximum payout 80/20 here, but also usable

Dustin Getz16:03:26

there may be third party js widgets you can integrate

Vincent17:03:31

oh nice idea.