Fork me on GitHub
#reagent
<
2016-05-20
>
sbmitchell00:05:30

The apps Ive work on typically have it at the root level component and dispatch to either a set of unsecure or secure pages depending on the auth

sbmitchell00:05:04

how would you handle it at the router level?

sbmitchell00:05:34

If you were using secretary it would catch a route and youd check and re-dispatch?

mattsfrey00:05:51

check login creds for every path not matching a login point and redirect to login if not existing

sbmitchell00:05:00

I think the former works better with a global app state

mattsfrey00:05:04

yeah basically

sbmitchell00:05:16

the latter at the router level is probably fine for a couple page system

sbmitchell00:05:22

I dont think that would scale out very well

sbmitchell00:05:30

or it would get very messy I'd think

sbmitchell00:05:18

with the root level component though you could use lifecycles to handle prop changes which would be more centralized logic

sbmitchell00:05:25

and easier to debug perhaps?

sbmitchell00:05:10

Ex. I trigger a page loading indicator and such during transitions

mattsfrey00:05:42

yeah that’s an advantage

mattsfrey00:05:31

coming from the react world I’m used to doing such things with router logic, so it’s kind of a shift

mattsfrey00:05:30

“feels” wrong to me to have a top level stateful component at the top of every view, versus just routing to a series of components that represent any one route etc

mattsfrey00:05:21

secretary/bidi work in a very different way from react-router though, so its not as easy to do this in as expressive a way

sbmitchell00:05:29

hmm I think maybe we are speaking about different things perhaps. When you say "top level .. at the top of every view" I don't think thats the structure Im using

sbmitchell00:05:01

I mean I have 1 top level component thats acting as if it were react-router in a way

sbmitchell00:05:06

except it doesnt have the cool nesting and inheriting properties

sbmitchell00:05:17

it just has a subscription on like a session/page value that would get changed from a dispatch (re-frame) in a secretary route

sbmitchell00:05:46

so my secretary routes pretty much just relay to a handler called :route-changed with the params, path, and page id expect to load

mattsfrey00:05:34

yeah i mean like, every view is a composition of several components and is matched with a route.. like /settings would load [loading-component [top-nav [side-nav [settings-page]]]]

mattsfrey00:05:52

where the loading component checks for login auth and some other things

mihaelkonjevic06:05:33

@sbmitchell @mattsfrey with Keechma you can isolate the session part of the app to the “outer” application that can start the real app only when the user credentials are present. It is in my (extremely biased) opinion one of the nicer way to handle that problem (here’s an (annotated) example http://keechma.com/annotated/login.html).

mikethompson07:05:38

We should celebrate Reagent: https://twitter.com/wazound/status/733561237569556480 With almost no fanfare, and none of the hype, it has grown organically to now comfortably be the most used CLJS React library.

mikethompson07:05:11

All credit to Dan Holmstand. Just a great bit of work.

pesterhazy09:05:26

This has happened also thanks to your great documentation efforts, @mikethompson !

savelichalex12:05:34

Guys, what a common way in reagent to work with children, smth like react top level api?

lewix12:05:12

savelichalex: I don't follow

savelichalex12:05:09

Ok, react has API to work with children in component, React.Children have map, filter and etc. for work with children. How do the same in reagent? Do I understand correctly that in reagent children is seq and I can work with it like it regular clojure seq?

mccraigmccraig12:05:41

@savelichalex: kinda sorta... mostly reagent render functions produce hiccup and reagent converts that to the actual react components behind the scenes - do you have something in particular you want to achieve ?

lewix12:05:03

@savelichalex: maybe if you post a code of the output you want or describing conceptually what you want it'll be clearer

lewix12:05:54

@savelichalex: you can also post the react version?

pez13:05:20

Has anyone been able to use third party ReactNative components with reagent? Any special loops and hoops you need to run through?

savelichalex13:05:53

with re-natal all works fine

thomas15:05:33

hello folks,

thomas15:05:30

I have an input box and I want add the contents of the input box to a list….

thomas15:05:50

I have done this at the moment with two atoms… but that feels a bit wrong.

thomas15:05:59

what is the idiomatic way of doing this?

lewix15:05:23

thomas: you could use re-frame and use the global store?

thomas15:05:56

@lewix feels a bit like over kill… but I’ll have a look at it in more detail

lewix15:05:46

@thomas: funny. I said the same thing when I saw it

roberto15:05:27

I don’t think you need two atoms

roberto15:05:18

it should be possible with one atom, if the input event handler directly adds the value to the atom

thomas15:05:07

@lewix great minds think alike 😉

thomas15:05:47

I’ll have a look at that @roberto

pez17:05:36

@savelichalex: thanks! Will check that out.

mccraigmccraig18:05:19

@thomas: you could use a single atom and reagent reactions https://github.com/reagent-project/reagent/blob/master/src/reagent/ratom.clj#L5 to let each component to subscribe to its part of the data held in the atom... which is half of what re-frame does

mattsfrey19:05:31

I was hoping somebody might have some insights into ratom/reaction - Basically how expensive it is to reference a reaction to a fairly complicated bit of transformation logic? Is it computed frequently or is it “smart” enough to only do the calculation when one of the ratoms used in the calculation logic actually changes ?

shinych20:05:13

Hi all, I’ve got a string like this, coming from an external source: “blabla <b>some important text</b> bla”. The question is if it is possible to get it rendered the way it is expected; but without having to parse this string and construct all the [:b ] elements.

shinych20:05:14

Reagent escapes this with <b> - is there any way to override it?

gadfly36120:05:16

@shinych:

[:div {:dangerouslySetInnerHTML {:__html "<b>I am bold</b>"}}]

shinych20:05:34

jap, thanks

mccraigmccraig21:05:22

@mattsfrey: have a read of https://github.com/Day8/re-frame#a-more-efficient-signal-graph and chain your expensive reactions... if you want to see which reactions are being triggered in your code then you can use the techniques described here https://github.com/Day8/re-frame/wiki/Debugging which can equally be applied to a vanilla reagent app as to a re-frame app (since they just trace cljs functions)

mattsfrey21:05:13

very cool, super helpful, thanks

vectorsize21:05:11

Hello everyone!! I need some directions here… ( i hope this is easy to follow) I’m porting a react app with the exact same structure, a select box updates the key in where to find the relevant data and that re-renders the app, and while react is able to only change the relevant bits (some divs width in style tags in my case) reagent regenerates the whole div…and that prevents css animations when changing the data… Should the updating of the data be handled differently here? 🙂

gadfly36121:05:49

Hey @vectorsize do you have a code snippet you can share?

vectorsize21:05:28

I can share yes but then it will be the whole thing, otherwise i dont whats relevant haha

vectorsize21:05:54

leme try to strip the important parts…

gadfly36121:05:05

Whole thing is fine, especially if just a single namespace, otherwise trying to make it more minimal would be helpful

vectorsize21:05:43

I’m pretty new with clojurescript/reagent and I don’t have a clear picture on how to use the r/atom etc

gadfly36121:05:02

i wouldn't thank me just yet, not sure if i will be able to help 😉 Can you show me what bars is?

vectorsize21:05:07

haha yeah but ur trying haha, bar is a component that taks the data in the given key and renders divs it’s a visualization with horizontal bars

vectorsize21:05:56

i mean it loops and renders a bar per data point

vectorsize21:05:10

but from down there all the data comes from the already derefed value

gadfly36121:05:07

gotcha, i was asking just to see if there was a way to reorganize when/where data is flowing / dereferenced (also because reagent components are usually called with [..] instead of (...)). Currently, because you are defrefing current in the body of stacked-chart, you will indeed see its whole div rerender. if that is a problem for however you are animating, you can break up the sup-pieces of stacked charts into their own named components, and have the sub-components deref as needed.

vectorsize21:05:54

here’s how the thing should work http://vsaiz.me/example/

vectorsize21:05:13

I mean it does make sense that reagent is re-rendering the bars, but then react’s algorithm should diff only what changes and not the whole div

vectorsize21:05:33

the link is the react version

gadfly36121:05:51

i think to help at this point, i do need to see bars and whatever it depends on css wise. the link is helpful, because i know what you want now

vectorsize21:05:35

in the javascript version the data comes from the top and changes top to bottom each time but that didnt work, and i’ve tried using the “global” reference and derefing it in different places without luck

gadfly36121:05:03

what should i use for x-scale..when i tried pasting the gist over, i got undeclared for data and x-scale

vectorsize21:05:43

haha yeah i stripped the data because I’m not sure if I could share it… sorry

gadfly36121:05:56

understandable

vectorsize21:05:47

thanks yourself ^_^

vectorsize22:05:59

at some point I should learn more about r/atoms derefing lenses and whatnot, this was supposed to be a 1-to-1 port but then the updating didnt work…

vectorsize22:05:05

I’m guessing there’s no quick answer then along the lines of “don’t deref that there, do it like this instead” 😄

gadfly36122:05:09

it may be a simple answer like that, just trying to parse the code first. will be a little bit, but i'll get back to you

vectorsize22:05:19

but hey don’t worry, I don’t want you to work on it for long, I was just hoping there would be something obvious that I didnt know since I’m a noob

vectorsize22:05:41

The react code is working, was just trying to learn 🙂

vectorsize22:05:13

also I’m not staying online for long…

vectorsize22:05:25

thanks a lot anyways, if you find something just ping me I would love to see the “proper way"

gadfly36122:05:30

@vectorsize: this may not be helpful to you, but here is a minimal example to get the css transitions you are after:

gadfly36122:05:15

where the css can be taken from your demo example, which is:

gadfly36122:05:42

steps to reproduce: 1) lein new reagent-figwheel vectorize 2) add the css to the index.html file 3) lein figwheel dev ... then go to localhost:3449

tavistock22:05:55

I run in to this problem a lot with reagent, how do y'all represent graphs in cljs, eg:

[{:name “john” :id 1 :friends [2 3 4]} {:id 2 :name “Gideon” :friends [5]} ...]