Fork me on GitHub
#hyperfiddle
<
2023-12-05
>
danbunea14:12:58

Newbie question here. I have a list and an item (row) components. I need to pass a way (fn) to the item to mark itself as selected when clicked. This is how I tried:

(e/defn Entity-item [id name on-select]
   (dom/div
    (dom/a
     (dom/on "click" (e/fn [_] (on-select)))
     (dom/text id))
    (dom/text name)))
(e/defn Entity-list []
  (let [!state (atom {})
        state (e/watch !state)]
    (e/server
     (e/for-by :db/id [item (pull-table (get-db) :a.o.r.chat.pl {:user/id 6})]
               (let [id (:db/id item)
                     name (: item)]
                 (Entity-item. id name #(swap! !state assoc :selected id))
...

henrik14:12:38

The e/server closure reaches all the way into Entity-item. Wrap (Entity-item. id name #(swap! !state assoc :selected id)) with e/client. Secondly, change #(swap! !state assoc :selected id) to an e/fn and stick e/server inside of it.

henrik14:12:28

And then you need to call it with (on-select.)

henrik14:12:36

Alternatively,

(e/defn Entity-item [id name OnSelect]
  (e/client
    (dom/div
      (dom/a
        (dom/on "click" OnSelect)
        (dom/text id))
      (dom/text name))))


(e/defn Entity-list []
  (let [!state (atom {})
        state  (e/watch !state)]
    (e/server
      (e/for-by :db/id [item (pull-table (get-db) :a.o.r.chat.pl {:user/id 6})]
        (let [id   (:db/id item)
              name (: item)]
          (Entity-item. id name (e/fn [_]
                                  (e/server
                                    (swap! !state assoc :selected id)))
            ...))))))
I.e., e/client in Entity-item.

danbunea14:12:49

Hi @U06B8J0AJ thank you very much. I wrapped the entity-item with a e/client which I shouldn have from the start. Thank you:

(e/defn Entity-list []
  (let [!state (atom {})
        state (e/watch !state)]
    (e/server
     (e/for-by :db/id [item (pull-table (get-db) :a.o.r.chat.pl {:user/id 6})]
               (let [id (:db/id item)
                     name (: item)]
                 (e/client 
                   (Entity-item. id name #(swap! !state assoc :selected id)))

👍 1
henrik14:12:49

Ah, so !state is on the client, I thought it was server-side. Generally helpful to future you (and incidentally good preparation for future versions of Electric) is to start your functions with e/client or e/server.

danbunea15:12:28

yes, adding them definately simplifies debugging

danbunea15:12:40

and yes, client side

Vincent18:12:44

i'm very intrigude by your key name :a.o.r.chat.pl

Vincent18:12:54

the luxurious days of paying no attention to function definition sequence will soon be behind us wistful nostalgic tears

danbunea19:12:27

🙂 it's actually something well crafted, it's not just a random thing