Fork me on GitHub
#reagent
<
2018-10-05
>
llsouder01:10:49

(def users (r/atom nil))

(defn set-users! [user-data]
  (swap! users user-data))

(defn get-users []
  (GET "/users" {:handler set-users!
                          :format json}))

(defn user-table []
  (get-users)
  (fn []
    [:table [:tr [:th "first"][:th "last"]]
      (map make-row @users)]))

gadfly36101:10:06

@llsouder your set-users! Looks off

llsouder01:10:09

I am not at home so that was from memory

justinlee01:10:45

yea you want reset! not swap! there

llsouder01:10:02

what is the difference?

justinlee01:10:04

not obvious to me why that would cause your component to fire multiple times

justinlee01:10:42

reset! just assigns the new data to the atom. swap! runs a function on the atom

justinlee01:10:52

(and assigns the result to the atom)

llsouder01:10:17

I might be using reset then? I know I struggled a bit with that.

justinlee01:10:17

how is user-table being invoked? likely the real problem is there

llsouder01:10:23

I see the value it he repl

llsouder01:10:37

and have even set it there for testing

llsouder01:10:19

I have some println in the get-user and I see it lots

llsouder01:10:25

I had a loop before I changed from the returning a component to returning a function

justinlee01:10:09

my guess without seeing the real code is that a parent of user-table also depends on users so you’re causing a loop of some kind

justinlee01:10:50

so is it looping now?

justinlee01:10:56

what do you mean by “lots”

llsouder01:10:23

Yeah, I gotta get some facts.

justinlee01:10:39

I realize earlier you said that your rest api was being hit “multiple” times

justinlee01:10:54

i’m just not sure what you mean by that

llsouder01:10:55

I will bring better questions when I get back to this

llsouder01:10:14

Is it possible that figwheel didn't compile everything

llsouder01:10:41

or has mixed code from the past in the browser

justinlee01:10:18

unlikely. but easy enough to just restart everything and refresh the browser. i’m just speculating but i don’t really understand why you think it’s broken

justinlee01:10:58

they way you wrote the code, it will hit the api each time the table is mounted

llsouder01:10:01

I expected one println per page refresh

justinlee01:10:10

and how many are you getting?

llsouder01:10:54

yeah I dont have the exact answer.

justinlee01:10:28

there’s a big difference between “3” and “infinite loop” 🙂

llsouder01:10:00

agreed because the infinitye was bogging down my pc

llsouder01:10:02

one more question, when I updated a row in psql, the table updated

llsouder01:10:30

are there triggers in the db?

justinlee01:10:52

um I don’t know, are there? 🙂

llsouder01:10:07

luminus setup so ????

justinlee01:10:12

oh god i have no idea

justinlee01:10:33

that’s a luminus specific thing. reagent is just one small piece of luminus

👍 4
llsouder01:10:18

yeah, wrong channel. I figured I ask anyway 😄

llsouder01:10:59

I'll come back next week with facts! thanks for the help!

👍 4
igrishaev10:10:50

Hi! Does anybody know in reagent/re-frame I can touch the original, JS-component to update its state? I’m developing a React Native app with re-natal. The problem is, I need to update a state of a picker UI widget. Here is how they do that in vanilla JS: https://stackoverflow.com/questions/37597665/how-to-make-react-native-picker-stay-at-newly-selected-option My problem is, I cannot see an option to do that in re-frame. Keeping a state in 2nd form component leads to the whole widget re-renders ugly.

igrishaev10:10:29

hm, I tried the 3rd form already but let me read it again, thanks…

mikethompson10:10:23

There's more to the recipe than using a Form3

igrishaev11:10:45

Well, it won’t work unfortunately. The problem is, I need to update the component’s state directly.

igrishaev11:10:07

Or how can I get a reference to the original Js component?

igrishaev11:10:27

To call (.setState js-comp {...})

deliciousowl11:10:15

You cant circumvent react iirc

deliciousowl11:10:29

Uses a virtual dom as an intermediate if im not mistaken

lilactown14:10:55

what's the best way to apply a transformation to a ratom for consumers? e.g.

(let [v (r/atom 0)]
  ;; applies `inc` to the value of v before returning it; will update anytime v changes
  @(rmap v inc))

lilactown14:10:28

is this just how ratoms work? lol it's been awhile since I've dove into reagent

lilactown14:10:47

I guess this is what reactions are for?

lilactown15:10:59

I'm not interested in changing the value, but transforming it

lilactown15:10:50

rmap is a made-up function that does what I want to do

deliciousowl15:10:08

transforming it how?

deliciousowl15:10:15

incrementing by one?

deliciousowl15:10:12

yeah that's actually (swap! v inc), it's called swap because its replaced by a new one, which is the result of (f x)

lilactown15:10:18

(rmap v inc) returns a ratom who's value is inc applied to the value of the ratom v

deliciousowl15:10:20

to change the value you'd use (reset! v 3)

lilactown15:10:42

I know it's not swap. I don't want to change the value of v

deliciousowl15:10:01

oh a new atom?

deliciousowl15:10:08

sorry im confused haha

lilactown15:10:41

yeah I figured it out. what I want is make-reaction

lilactown15:10:59

@coinedtalk what I want to do is take an original ratom with some state, and create a new ratom that will update anytime the original one does, but applies some transformation to the value of the original

lilactown15:10:18

(let [a (r/atom 0)
      b (rmap a inc)]
  [:div [:span @a] [:span @b]])
=> [:div [:span 0] [:span 1]]

deliciousowl15:10:00

I'm looking at make-reaction and track now in the documentation

justinlee15:10:07

@igrishaev I’m not 100% sure about what you are doing, but looking at that post I don’t think there is any reason why you need to store the state of the picker using react’s internal state mechanism in the first place. Just store the state in a ratom, set the selectedValue using the dereffed ratom (instead of using this.state.pickerValue), and then update the ratom using the onValueChange event handler.

igrishaev16:10:11

@lee.justin.m the r/atom solution leads to unwanted behavior when a picker start trembling. See how they do that in js: https://stackoverflow.com/questions/37597665/how-to-make-react-native-picker-stay-at-newly-selected-option

justinlee16:10:13

oh you know this may be an issue with async rendering and input events. though I really don’t know how that works with native.

igrishaev16:10:32

the idea is how to change the state of a component that is behind the reagent wrapper

justinlee16:10:48

the post you shared, though, looks like a normal bug to me: the OP just used the wrong state value

igrishaev16:10:05

yes, that exactly the issue related to async nature of events

justinlee16:10:36

right, with normal web stuff, reagent special cases things like input events because you must change them synchronously

justinlee16:10:49

so you’re probably right that you have to use setState now that I think about it

justinlee16:10:24

I believe you can just call current-component and get the underlying react component. from there you can just use js interop to access setState

justinlee16:10:38

i’ve never tried doing it before, though

igrishaev16:10:39

well, I tried to capture a reference to the js-component. but calling (.setState) on it didn’t make any result.

igrishaev16:10:29

my last hope is to rewrite it with the 3rd form redefining :should-component-update maybe

justinlee16:10:23

if the issue is a flicker or some kind of async weirdness, I think you’re going to have to get access to the react component and update the underlying value synchronously when the onValueChange event rolls in. at least this is often the issue with input elements in the dom

justinlee16:10:14

the other option, which sounds hacky but is probably fine here, is to force an update

idiomancy22:10:59

can anyone help me understand when dispose! is called on reactions?

idiomancy22:10:10

I'm having trouble pinpointing it in the code