Fork me on GitHub
#reagent
<
2016-05-18
>
danielcompton09:05:28

@savelichalex: whatever is changing @page-data should dispatch an event to scroll to top

smogg10:05:50

I’m trying to implement a with-class fn that will take a component and add a class to it

smogg10:05:36

with simple hiccup it’s as trivial as using update, but how about form-2 component (returning an inner render fn)?

smogg10:05:19

e.g:

(def app-state (reagent/atom 2))

(defn form2comp
  []
  (swap! app-state + 5)
  (fn []
   [:div
    [:h2 @app-state]
    [:button {:on-click #(swap! app-state inc)}
     "Click!"]]))

smogg10:05:04

now, I want to be able to call [with-class “some-class” form2comp] to render the same component with some-class html class added to the outer div

ordnungswidrig11:05:09

I’m not sure but something like

(defn with-class [class form2comp]
  (let [f2c (form2comp)]
    (fn [] (update f2c …))))
might do it.

ordnungswidrig11:05:20

not sure about that and how to pass args to form2competc.

mccraigmccraig12:05:13

how about

(defn with-class [class form2comp]
  (fn f2-outer* [& outer-props]
    (let [f2c (apply form2comp outer-props)]
      (fn f2-inner* [& inner-props]
        (update
         (apply f2c inner-props)
         ...)))))

smogg12:05:47

@mccraigmccraig: I'm not familiar with fn*, could you point me to place where I can learn more?

smogg12:05:11

fn name* *

mccraigmccraig12:05:24

@smogg: f2-outer* and f2-inner* are just names given to anonymous fns... it can help with debugging

mccraigmccraig12:05:21

do we have a clojurebot in here ? how do i hit it ?

mccraigmccraig12:05:19

@smogg: i've gotten into the happen of giving names to my anonymous fns 'cos they can be used with tracers like this - https://github.com/Day8/re-frame-tracer

smogg12:05:28

@mccraigmccraig: your solution seems like the right one, thanks!

mattsfrey14:05:57

Has anyone noticed that the life cycle functions will-mount / did-mount get called all the time when really there should just be a re-render and not a re-mount?

lewix14:05:02

@mattsfrey: can we see the code

mattsfrey14:05:29

one sec let me pull together an example

mattsfrey14:05:39

basically the rf/dispatch sets off a rest call that re-populates abd/abs- which gets de-referenced in the sub component

mattsfrey14:05:38

so I would expect the sub component to re-render but it seems that update to abd/abs- is causing the entire component chain to remount as this code starts an infinite loop

mattsfrey14:05:48

where the rf dispatch gets sent off continually

lewix14:05:16

@mattsfrey: shouldn't line 33 be in the function?

mattsfrey14:05:38

no I just want it to be called one time when the component mounts, not on re-renders

lewix14:05:00

@mattsfrey: I see. Maybe you could try to explicilty put it in a didmount: metadata?

mattsfrey14:05:28

i’ve also tried doing (reagent/create class {:component-did-mount ...

mattsfrey14:05:31

but got the same results

sbmitchell14:05:46

did-mount only runs once for me

sbmitchell14:05:04

are you perhaps re-initializing the component again from another render-fn

sbmitchell14:05:16

maybe some weird code structure somewhere?

mattsfrey14:05:46

do you know of a good way to debug this other than printing statements at each component’s render?

lewix14:05:39

(I forgot the brackets)

lewix14:05:43

@mattsfrey: I thik it should be a function #(rf/dispatch [:abs/load-abs])

mattsfrey14:05:20

where does the with-meta keyword come from?

lewix14:05:30

I added it

mattsfrey14:05:47

nvm was showing an error for wrong arity thought it was undefined

lewix14:05:08

@mattsfrey: because I forgot the bracket {} , look at the gist again

mattsfrey14:05:17

yes I see now

lewix14:05:08

@mattsfrey: sorry I probably forgot more parens- (closing parens) 😕

mattsfrey14:05:36

so this definitely stops the infinite loop

mattsfrey14:05:09

but I have another issue now - when I navigate away from the page that has this component and then return to it, it isn’t re-mounting it

mattsfrey14:05:22

wouldn’t it be expected to dismount / re-mount in this case?

lewix14:05:00

@mattsfrey: kill , restart figwheel?

mattsfrey14:05:56

tried, yeah it seems this component-did-mount isn’t getting called period

lewix14:05:39

@mattsfrey I'm not familiar with reframe, what does dipatch() returns?

lewix14:05:02

@mattsfrey: try to remove the '#'

mattsfrey14:05:58

i made it a #(do(println “DID-MOUNT”)…) though and it never prints

lewix14:05:58

can i see the code?

mattsfrey14:05:07

removing the # seems to work, although now it is back to the original problem - continuously running in a loop

lewix14:05:45

@mattsfrey: if #(println “DID-MOUNT”) never print then I don't know what's going on

sbmitchell15:05:57

its very hard to determine what is happening without a code reference 🙂

sbmitchell15:05:58

@lewix: Do you prefer the with-meta form for creating components? I find just using form-3 w/ create-class to just be more clear

sbmitchell15:05:26

I thought I read in the documentation that the 'with-meta' form is kind of unpreferred now as well

sbmitchell15:05:30

but I might of been dreaming

lewix15:05:29

@sbmitchell: yes. I find it more succinct; I actually use the ^{} ; I don't follow just to follow - when I'll know why it's unpreferred maybe I'll change my mind. I'm new to the whole clojurescript/clojure world so I suspect it's unpreferred for some valid reason I'll soon be aware of

sbmitchell15:05:13

I think its kind of a hack to use with-meta or it looks that way but perhaps its not

sbmitchell15:05:46

I also dont know how it works with closures

lewix15:05:54

reagent use with meta shorthand to set the unique keys and it seems to be the preferred method - it's quite inconsistent with reframe not preferring with meta if you ask me. I'm curious to know why

sbmitchell16:05:22

where does it says thats the preferred method?

sbmitchell16:05:53

the component creation docs were moved to re-frame

sbmitchell16:05:55

so its kind of odd 😛

lewix16:05:07

@sbmitchell: the reagent doc use it in the examples and almost all examples I came across use the meta short hand to set the keys

sbmitchell16:05:51

interesting...

sbmitchell16:05:10

I would definitely like to know the implications of using one over the other

lewix16:05:52

until then I use my preferred method 😉. I'm aware that it's the "preferred way" everybody say that but nobody say why

sbmitchell16:05:59

Yea it might just be a "react vs reagent" thing

sbmitchell16:05:20

create-class is just the react way and reagents with-meta is the reagent way

lewix16:05:01

@sbmitchell: what's the most complex reframe app that you've seen out there

sbmitchell16:05:31

probably the one im working on 😛

sbmitchell16:05:47

though we are just incoporating re-frame now...we previously rolled out own

sbmitchell16:05:39

so based on looking at the source code the process for component creation of the forms is normalized here

sbmitchell16:05:14

so it looks like there really is no difference its just that the with-meta version makes reagent do some extra stuff in generating the structure

sbmitchell16:05:04

it doesnt need to run the create-class stuff if you just use r/create-class lol

sbmitchell16:05:11

reagent/create-class*

lewix16:05:56

@sbmitchell: why have that normalizing function at all if the intent is not to use it preferably

ccann21:05:44

Hey guys, I’m using reagent to modify :style of a component. Specifically the background property. But I want to have multiple background properties e.g. background: red; background: -webkit-radial-gradient(circle, red, white, orange);

ccann21:05:59

but I can’t use the :background key more than once because it will get overwritten in the style properties map

ccann21:05:52

if anyone has any ideas how to work around this I’m all ears