Clojurians
#reagent
<
2016-01-06
>

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

polymeris00:01:52

oops.. wrong channel

si1410:01:06

@mikethompson: I've read it in the past, but I'll reread it, thank you.

tord10:01:39

I want to live in a world where all documentation is written by @mikethompson.

si1411:01:05

in general, I'm trying to wrap my head around subscriptions performance. do I need to be careful with them? is it O(const), log(n), n, n^2, smth else?

si1411:01:38

ah, I see. the (subscribe [:foo some-id]) , where some-id is a key into some map, will be linear in complexity, because equality check will be triggered on every map update (as it is dereferenced in subscription handler) for every subscription

pepe11:01:28

@si14: I think #C073DKH9P is better channel for this :wink:

si1411:01:45

pepe: oh, sorry!

pepe12:01:13

@si14: no worries, just better probability of correct answer. The audiences are pretty mixed between these two

frank13:01:34

Does anyone know how the :key thing works with reagent/react? I can't seem to get my warnings to go away and I'm not seeing the :key I set in the data-reactid attribute on the DOM.

frank13:01:41

My component:

(defn tag-checkbox [tag-name]
  (let [user-tags (subscribe [:user-tags])]
    (fn []
      [:div.col-sm-6 {:key tag-name}
       [:li.list-group-item
        [:label tag-name]
        [:input.pull-right {:type "checkbox"
                            :checked (or (some #(= tag-name %) @user-tags))
                            :on-change #(if-let [checked (-> % .-target .-checked)]
                                          (dispatch [:add-user-tag tag-name])
                                          (dispatch [:remove-user-tag tag-name]))}]]])))

pepe13:01:29

@frank: I do it with metadata, so ^{:key some-key} just before the component

frank13:01:44

@pepe like this?

(defn tag-checkbox [tag-name]
  (let [user-tags (subscribe [:user-tags])]
    (fn []
      ^{:key (str "admin-" tag-name)}
      [:div.col-sm-6
       [:li.list-group-item
        [:label tag-name]
        [:input.pull-right {:type "checkbox"
                            :checked (some #(= tag-name %) @user-tags)
                            :on-change #(if-let [checked (-> % .-target .-checked)]
                                          (dispatch [:add-user-tag tag-name])
                                          (dispatch [:remove-user-tag tag-name]))}]]])))

pepe13:01:25

@frank: exactly

frank13:01:59

don't think it worked :disappointed:

pepe13:01:37

@frank: what about place it in the body of iteration, where you call this component?

frank13:01:25

I'm not sure what you mean... the thing calling the component looks like this

(defn page []
  (let [sme-tags (subscribe [:sme-tags])
        user-tags (subscribe [:user-tags])]
    (fn []
      [:div.container-fluid
       [:div.row
        [:div.col-xs-6.col-xs-offset-3
         [:div.panel.panel-primary
          [:div.panel-heading "Enabled Subscriptions"]
          [:ul.list-group
           [:div.row
            (map #(do [tag-checkbox %]) @sme-tags)]]]]]])))

mikethompson13:01:12

Try: (map #(do ^{:key (str %)} [tag-checkbox %]) @sme-tags)

pepe13:01:00

@mikethompson: beat me. As always :wink:

mikethompson13:01:50

You want the key to be on the tag-checkbox itself, not on some component burried within it.

frank13:01:11

@mikethompson @pepe It worked! :simple_smile: thank you

frank13:01:04

I was under the impression that putting the key on the root div in the component would be the same, but I guess not

mikethompson13:01:28

No, the root div is one level down.

frank13:01:36

ah, I see

frank14:01:24

Thanks again! I've had this issue for so long, but just ignored the warnings since my apps were small

frank14:01:48

My re-frame experience has been made infinitely better!

si1414:01:11

@mikethompson: I suspect that you are the person to ask the last question in re-frame channel :simple_smile:

mike145216:01:24

hello all! I'm trying to use Clojurescript/Reagent! What is idiomatic way of state propagation in Reagent? Example: if I have atom @a and dependent atoms @b and @c, I want that any updates in @a automatically applied to @b and @c. Thanks.

peterbak17:01:19

@mike1452: if your @b and @c are defined as (reaction ...) on @a, the updates will propagate automatically

mike145220:01:51

@peterbak: Thank you! Found a solution

mike145220:01:19

(:require [reagent.core :as r] [reagent.ratom :as rr])

mike145220:01:35

(:require-macros [reagent.ratom :refer [reaction]])

mike145220:01:49

(def value1 (r/atom 0)) (def value2 (reaction (+ 3 @value1)))

mike145220:01:55

now on every change of value1 the value2 will be updated automatically with formula (+ 3 @value1)

peterbak20:01:37

@mike1452 yup, that's the one

loganmac22:01:44

(x-post from cljs) Hi all, I'm looking for a library/example that could help in building a spatial organizer/kanban -style board in clojurescript. Anything to do with drag/drop, sorting, etc. I'm having no luck with my google-fu and any help would be greatly appreciated.

loganmac22:01:57

@gadfly361: Thanks! I'll look into that.

bostonaholic22:01:24

I'm working on a droppable reagent component as we speak. But I'm hoping to accomplish without the use of jQuery

loganmac22:01:12

@bostonaholic: that would be pretty sweet.

gadfly36123:01:00

@bostonaholic that's awesome! Be a great addition to the cookbook, if you were so inclined :) (I'm not keen on using jquery either lol)

bostonaholic23:01:20

I'm working on building out for my client an internal reagent component library

bostonaholic23:01:31

their own "reagent cookbook" if you will

gadfly36123:01:59

Ahh gotcha, nice :)