Fork me on GitHub
#reagent
<
2019-05-13
>
Noah Bogart13:05:15

those are some good points, thanks

Noah Bogart13:05:54

I misspoke when I said this.state.props, I meant this.props or very occasionally this.props.state

Noah Bogart13:05:19

tracking information between different components

Noah Bogart13:05:09

to try to describe the issue I was having, I have a div that renders messages by saying

[:div.panel.messages {:ref #(swap! board-dom assoc :message-list %)}
 (doall (map-indexed
          (fn [i msg]
            [:div ...build messages here...])
          @log))]
where log is a cursor on the global (defonce state (r/atom {})) and board-dom is a global (defonce board-dom (atom {}))

Noah Bogart13:05:12

I have that :ref there so when the messages are re-rendered, I can see the changes and react (lol) to them

Noah Bogart13:05:22

my goal for this is to have normal "sticky" auto-scrolling: if I send a message, scroll to the bottom. if I receive a message and I'm scrolled to the bottom, scroll to the bottom. if I receive a message and I've scrolled up at all, don't scroll to the bottom.

Noah Bogart13:05:37

Is there a smarter way to achieve this with reagent?

lilactown13:05:59

I'm still not sure I completely understand. I get: - you have a list of messages - when you render a new message, scroll (maybe) Not sure why you need a ref for this. Ah unless you're scrolling to the top or bottom of the panel itself? Not the page

Noah Bogart13:05:16

yeah, just that panel

Noah Bogart13:05:46

i inherited this codebase, lol, it's kind of a nightmare

lilactown13:05:53

Okay. Yeah that seems like a fine way to keep track of the ref

lilactown14:05:14

What was the question about props?

Noah Bogart14:05:55

i think my question about props was me misunderstanding some stuff. reading through the react docs, it seemed like I could check props to see what's changing in a given update, and use that information to determine whether I scroll or not

lilactown14:05:55

Yikes

😂 4
lilactown14:05:30

Ah yes maybe

lilactown14:05:02

So my confusion was that I assumed you were using functions for your component

lilactown14:05:27

This is using the create-class API which is very raw

Noah Bogart14:05:16

do you have any suggestions or tutorials on how I could rewrite these things to be less... terrible?

lilactown14:05:09

I mean it might be warranted. I'm not sure

lilactown14:05:14

But I always cringe when you have to use create-class with a bunch of atoms... It gets too messy. But I see some jQuery and other imperative things that might be necessary in order to get the desired behavior, so maybe it's worth it?

Noah Bogart14:05:53

I don't have nearly the experience or knowledge to know if it's worth it, but it's certainly a mess and a lot of trouble, lol

lilactown14:05:51

Reagent,like react, can reads props and render accordingly. Just to clear that up

Noah Bogart14:05:14

This was originally written with Om and then ported/translated/rewritten with reagent about a year ago, so who knows what was written back then?

Noah Bogart14:05:22

How do you read the props?

lilactown14:05:00

inside of a create-class I think there’s an r/props function

lilactown14:05:58

I was assuming that you were talking about a reagent component like:

(defn log-page [props]
   ... etc)

lilactown14:05:10

in which case it’s like yeah duh it’s easy to read props! 😅

Noah Bogart14:05:32

ha yeah, I wish! That would make this very easy. I feel like the reagent github page tutorial/docs aren't super detailed and make it hard to know how to translate react tutorials/docs to reagent

lilactown14:05:08

yeah that makes sense

lilactown14:05:14

reagent tries to paper over React with it’s reagent-y-ness… this project you’re working on, the code is kind of in both worlds

lilactown14:05:42

you’ve got all of the imperative parts of React plus the mutable parts of reagent and it’s… fun!

😂 4
Noah Bogart14:05:59

Extremely fun!

Noah Bogart14:05:37

Outside of these specific questions I have, do you have any recommendations for tutorials or guides that I could use to help me better learn Reagent's flow/ideas?

lilactown14:05:37

at work, many of us were new to both ClojureScript and Reagent, and I think some really enjoyed https://www.learnreagent.com/

❤️ 4
lilactown14:05:51

there are free and paid sections

Noah Bogart14:05:44

Thanks, I'll check that out! I appreciate your help

Noah Bogart16:05:35

Reading that page, I have a new question! The Counter example is sweet, except in React you can create multiple instances of the Counter component, each with their own state. Does creating the click-counter atom with a def (making it namespace global) allow you to create multiple counting-components?

lilactown16:05:07

no, if you def it, it’s using global state therefore you can’t create multiple instances that have different state

lilactown16:05:52

however, you can bind it locally using what’s called a “form-2” component:

(defn counting-component []
  (let [click-count (r/atom 0)]
    (fn []
      [:div "The state has a value: " @click-count
       [:input {:type "button" :value "Click me!" :on-click #(swap! click-count inc)}]])))

lilactown16:05:37

and that ☝️ counting-component can be re-used and each instance will have their own local component state

Noah Bogart16:05:41

Ah sick, that's great. Thank you! (What's "form-2"? Looks like I have a lot to learn, lol)

Noah Bogart17:05:23

idk how i missed that! you're a champ