hyperfiddle 2022-12-04 | Slack Archive

What’s the equivalent of react’s componentDidMount in photon?

I’m trying to set the scrollOffset of dom node to its scroll height (aka scroll to bottom) but it looks like my code is running before children rendered

Dustin Getz22:12:47

show me what you have please

Dustin Getz22:12:21

(dom/div (println dom/node)) will run println immediately after mount

denik22:12:35

and after child nodes rendered?

Dustin Getz22:12:49

no not children

denik22:12:00

I think I need that

denik22:12:21

I need to scroll all the way down in a dom node. can’t do that until its children rendered

denik22:12:11

ah I think I got it. is this idiomatic?

(dom/div
  {:style {:display               :grid
           :grid-template-columns "min-content auto"}
   :class [:gap3 :h5 :overflow-y-auto]}
  (p/for [{:keys [by msg]} transcript]
    (dom/div
      {:class [:b]
       :style {:grid-column 1}}
      (case by
        :AI "Therapist:"
        :user "You:"))
    (dom/div
      {:style {:grid-column 2}}
      msg))
  (new (m/observe
         (fn [!]
           (! nil)
           (sdom/scroll-to-bottom dom/node)))))

👀 1

Dustin Getz23:12:41

the photon DAG will maximize concurrency- i.e. the m/observe here is racing the p/for

Dustin Getz23:12:57

i'm afk, let me think about it and get back to you

👍 1

denik23:12:45

this is essentially https://reactjs.org/docs/hooks-reference.html#uselayouteffect

👀 1

Dustin Getz23:12:05

maybe have p/for return each of the dom/nodes, then call last to get the final child and then depend on it for the measurement

Dustin Getz23:12:52

you don't even need that, you just need the measurement to depend on the result of the p/for, which is only available after the children have run

👌 1

Dustin Getz23:12:35

also the side effect doesn't need to be in m/observe, you can just run side effects like a println

👍 1

xificurC11:12:04

For now you can ensure sequential run by wrapping the 2 branches in a when

(when (p/for ...) (scroll-to-bottom))

👍 1

🙏 1

denik22:12:14

this does not actually work in every case

2022-12-04

Channels