Fork me on GitHub
#reagent
<
2016-09-29
>
galvs01:09:26

@gadfly361 cheers. I was hoping that wasn't the case but its a good work around. thanks. ill give it a go today

eyelidlessness01:09:35

@gadfly361 sorry that was a pseudocode typo

eyelidlessness01:09:42

the output is still confusing. to clarify, it outputs (partial-component :b :c)

eyelidlessness01:09:43

i was able to work around it by using a special partial application function, e.g.:

(defn partial-component [& partial-args]
  (let [partial-vec (into [component] partial-args)]
    (fn [& rest-args]
      (into partial-vec rest-args))))

reefersleep05:09:53

@kauko maybe not. But if your frontend application is interacting with anything outside itself, running the same sequence of events twice is not guaranteed to give the same result, right? So if you want to jump back to a prior app-db state, you'd have to store that state, lest you end up in an alternate timeline 🙂

reefersleep05:09:28

Or is there something I'm missing?

kauko06:09:18

You don't store side effecting things in the log. Only pure things. Side effecting things produce pure things.

kauko06:09:55

Or I should say, you don't replay side effecting things :)

reefersleep06:09:37

I'm not sure I get it. If I'm a) reading the server's list of todo-items b) create a new item c) reading the list again Won't the state of c) depend on the side effect in b)?

kauko06:09:44

What is the side effect in b)? Aren't you just creating a new entry?

reefersleep06:09:06

Interacting with the server's db (outside of the domain of the frontend)

reefersleep06:09:47

But I think I get it - receiving the response from the server should also be an event, and thus pure and recordable

kauko06:09:03

Yeah exactly

kauko06:09:19

I'm back on my laptop now, previous responses were pretty short because I was on mobile 😄

reefersleep06:09:30

Impressive mobile typing skillz tho

kauko06:09:42

But this is why we split these things into Actions and Effects, or something like that. The name doesn't matter, the split does

kauko06:09:54

so contacting the server is an Action that we don't replay

kauko06:09:22

and it ends up creating an Effect that is replayable, something like [:rewrite-list payload]

reefersleep06:09:25

So replayability depends on being vigilant about the split

reefersleep06:09:48

Simple, but not so easy 🙂

reefersleep06:09:09

Thank you for that - I had heard about recording events being sufficient, but it didn't click until now!

kauko06:09:15

Yeah. It's definitely something that requires discipline. I feel like Carry's model makes it easier, since you have different places for both of them

kauko06:09:31

even easier in Elm I think

kauko06:09:54

well, actually I haven't tried Elm since they got rid of the Signals and whatnot, so maybe I shouldn't say too much about it

kauko06:09:25

I'm glad to hear I could help. I recommend the talk "Turning the database inside out".

Jon08:09:03

my site for Respo is up http://respo.site

pvinis09:09:55

in re-natal with reagent, how do i write a componentDidMount for a component?

novakboskov11:09:57

How to write this: https://github.com/JedWatson/react-select/blob/master/examples/src/components/Multiselect.js#L48 with Reagent? This is my try:

(defn categories-select [data-atom categories]
  (r/create-class
   {:get-initial-state (fn [] (clj->js {:value   []
                                        :options [{:value 1 :label "one"}
                                                  {:value 2 :label "two"}]}))
    :display-name      "reactSelect"
    :render
    (fn [this]
      (println "render")
      [:> js/Select {:options      (-> this .-state .-options)
                     :name         "reactSelect"
                     :value        (-> this .-state .-value)
                     :multi        true
                     :simple-value true
                     :on-change
                     (fn [e]
                       (.setState this
                                  (clj->js {:value
                                            (conj (js->clj (-> this .-state .-value)) e)}))
                       (println "new state: " (.-state this)))}])}))
It updates (.-state this) but in won't call render function again so it won't take any effect. Also, it would be helpful to find some more complex examples of r/create-class usage. This: https://github.com/Day8/re-frame/wiki/Creating-Reagent-Components#form-3-a-class-with-life-cycle-methods is good wrap up but it doesn't show how to handle internal state of component.

geraldodev11:09:28

@novakboskov thnx for sharing your code. Since you have a reference to data-atom you dont need to use local state: If options is dynamic it could come as a parameter of the function, and onchange it could swap! the value on the data-atom. And there's value-key and label-key to inform Select the keys of your options. This way a simple [:> js/Select .. will suffice.

novakboskov12:09:01

@geraldodev But with local state it would be like this?

(defn categories-select [_ categories]
  (let [selected (r/atom [])]
    (fn [_ categories]
      [:> js/Select {:options      (mapv (fn [c] {:value (-> c :id str)
                                                  :label (:name c)})
                                         @categories)
                     :name         "reactSelect"
                     :multi        true
                     :value        @selected
                     :simple-value true
                     :on-change    #(reset! selected %)}])))
Thanks!

andre13:09:34

hi! can i use reagent next-tick function ? it invokes only once now

andre13:09:53

but I thought that it will be called many times

geraldodev17:09:24

@novakboskov this mapv processing you are making is just necessary when categories is not a vector of [{:id 1 :name "one"} .. ]. Because if it is you do not need to process, pass the plain vector as options and supply :value-key :id and :label-key :name as parameters to js/Select, and it ll be fine. If categories is not to be changed it does not need to be an atom. a plain vector would be fine. The definition of selected (who is capturing inside) categories-select function is kind of limiting its use, because the objective of the function is to lay out how the "react dom" so this value also can be passed to the function. (defn categories-select [atom categories] . I didn't get why the _ parameter. With reagent the parameters are entirely up to you. That's the beauty of the library.

novakboskov17:09:01

@geraldodev It looks to me like it accepts only strings as value-key and my :ids are integers. I've found :value-renderer but then it's maybe the same.

geraldodev17:09:33

@novakboskov It seems that reagent already transforms from cljs to js and value-keys can be integers and strings and booleans (that's for sure). as for labels I suppose the translation take of it.

novakboskov17:09:53

Yup but then with :multi true on-click receiving a single value (immediately selected value) not a string of values separated by delimiter, like "1,2,3"

geraldodev17:09:56

If it's receiving a sigle value you could (swap! selected conj value) ?

novakboskov18:09:32

@geraldodev Sorry, it always provide string consisted of numbers separated by comma. I could gracefully do:

[:> js/Select {:options      @categories
                     :value-key    :id
                     :label-key    :name
                     :multi        true
                     :simple-value true
                     :disabled     disabled
                     :value        @sel-categories
                     :on-change    (fn [e] (reset! sel-categories (u/str->num-vec e)))}]

geraldodev18:09:43

@novakboskov simple-value is the one that triggers this behaviour isnt it ? when you turn off simple value what is the shape of the data ?

novakboskov18:09:22

@geraldodev then it's the whole categories element or many of them. Yes, value-key and label-key will take care of it but then I would have to extract :ids by hand to put them in sel-catgories.

geraldodev19:09:02

@novakboskov [cljs-value (not-empty (js->clj value))] would get rid of [] when there are no selected item

geraldodev19:09:35

The last example I did because I was curious how it works, and I'm also interested in react-select. I'm not using cursors directly. I'm using re-frame

novakboskov20:09:26

@geraldodev That's the link I've mentioned in my original question. It's good but don't say nothin about handling internal state.