Fork me on GitHub
#reagent
<
2016-06-08
>
michael.heuberger05:06:50

having a problem here creating a custom component using props and children in arguments

michael.heuberger05:06:58

something like this (but is not working)

michael.heuberger05:06:00

(defn tab
  [& props children]
  [rui/tab (merge props {:style {:padding-top tab-padding-top}})
   (map-keys children)])

michael.heuberger05:06:54

errors ... i think i have the arguments wrong but can't find out what exactly

escherize05:06:26

I don't think you can bind a function to arguments with [& a b]

escherize05:06:47

maybe you meant [a & b]?

escherize05:06:24

((fn [a & b] [a b]) 1 2 3 4)
;;=> [1 (2 3 4)]

kauko06:06:35

@michael.heuberger: what escherize said. & in the argument list "Bind the rest of the arguments to this name", so your function can take any number of arguments. If a function has an argument list of [a & b] and I call it with (my-fun 1 2 3 4 5), a would be 1 and b would be [2 3 4 5].

kauko06:06:13

What you probably mean is [props & children]

kauko06:06:04

Hmm actually I wonder if b is a list and not a vector. Well, details 🙂

escherize07:06:09

b would be a list, (not that it would usually matter) 🙂

jcromartie15:06:14

I'm trying to figure out where to put my state in Reagent components, compared to how I'd normally approach it in React

jcromartie15:06:56

in React I'd stick to props as much as possible and use callbacks to update state in a parent component, but it seems like the "Reagent way" is to pass atoms to children for them to deref and modify themselves

jcromartie15:06:44

I have an app where you select configuration profiles in the sidebar and edit that profile in the main container

jcromartie15:06:05

there is a single main component, with child components for the profile selector and configuration editor

jcromartie15:06:32

if it were just React, I'd use callback functions as props to handle things like changing the selected profile

jcromartie15:06:08

but from the Reagent examples it seems like I might want to pass an atom representing the selected profile to the profile selector itself and let it update that atom

jcromartie15:06:22

but that seems a little messy

jcromartie15:06:53

but it also seems simpler

jcromartie15:06:05

am I on the right track?

mihaelkonjevic15:06:05

@jcromartie I’d recommend you to check http://keechma.com and https://github.com/Day8/re-frame to see examples of architectures in reagent. But the main idea is that you send data down, commands up and change the main atom somehow which will propagate down to the UI.

mihaelkonjevic15:06:24

if you have any questions about keechma, I’m the lead dev so feel free to ask me

jcromartie15:06:04

so, in that case, would the "main" component be the only thing dereferencing the "main" atom?

jcromartie15:06:28

I'm checking the Keechma examples now

mihaelkonjevic15:06:36

there is a concept of “subscriptions” which allow you to dereference parts of main the main atom

mihaelkonjevic15:06:44

so each component gets only the data it needs

mihaelkonjevic15:06:57

reagent will take care of updating the component when the data in the subscription changes

mihaelkonjevic15:06:52

here are subscriptions for the todomvc example (notice that they are wrapped inside the reaction macro) https://github.com/keechma/keechma-todomvc/blob/master/src/keechma_todomvc/subscriptions.cljs

jcromartie15:06:10

nice project BTW

mihaelkonjevic15:06:19

thanks 🙂

jcromartie15:06:40

the logo makes me want to listen to synthwave

jcromartie15:06:49

or fire up my Amiga

jcromartie15:06:15

For now I'm trying to really grok the basics of Reagent. I'd love to check out Keechma more but I want to avoid adding more libs if I can. I think my app is really simple.

mccraigmccraig15:06:27

@jcromartie: you can do basic subscription stuff yourself with the reaction macro https://github.com/reagent-project/reagent/blob/master/src/reagent/ratom.clj#L5 in a vanilla form-2 component... have a read of the keechma todomvc code above to figure out how reaction can work and take a look here for a good overview of the different ways of creating react components with reagent https://github.com/Day8/re-frame/wiki/Creating-Reagent-Components

jcromartie15:06:02

do I really need subscriptions?

jcromartie15:06:22

basically I have a thing on the left to select what to edit on the right, that seems quite simple

jcromartie15:06:22

the examples here are helpful, but I am getting the sense that they are definitely not best practices http://reagent-project.github.io/

mihaelkonjevic16:06:34

you don’t need subscriptions, but after the app grows it makes sense to split it into reading and writing parts. it helps with the code scalability. but even if you start without subscriptions it won’t be too hard to migrate later