Fork me on GitHub
#reagent
<
2017-09-01
>
daiyi09:09:34

Is there a guide/reference to reagent syntax?

daiyi10:09:05

not exactly, something more like this: https://re-view.io/docs/hiccup/syntax-guide where it tells me exactly the syntax

daiyi10:09:47

I've realised the only way I've learned to use reagent is by looking at someone else's reagent, and by testing random assumptions (can :class take a vector of strings? hmm let's test it)

lepistane10:09:56

How do i detect how much i have scrolled in reagent? i was thinking to make

(when (> scrolled 500px)
        [:button]) 

reefersleep10:09:23

@lepistane you might get some inspiration or even a solution here: https://github.com/city41/reagent-scroll-demo

lepistane10:09:44

ye i found it i cant start it locally

lepistane10:09:08

Retrieving com/cemerick/piggieback/0.1.6-SNAPSHOT/piggieback-0.1.6-20150223.163620-3.jar from clojars
Exception in thread "main" clojure.lang.ArityException: Wrong number of args (2) passed to: StringReader, compiling:(abnf.clj:189:28)

reefersleep11:09:37

same error for me on lein figwheel

reefersleep11:09:49

on lein uberjar, I get a different error

reefersleep11:09:56

probably a number of things wrong with that repo

lepistane11:09:15

i will just inspect functions

reefersleep11:09:17

but the demo looks great, so I’m guessing the logic is sound

reefersleep11:09:02

think you can pretty much just replicate some of the code from the top of core.cljs and all of scroll_chan.cljs

reefersleep11:09:22

in a simple reagent-frontend lein template project

reefersleep11:09:24

to test it out

reefersleep11:09:13

just uses core.async and the google closure library (available in general for you when you use Clojurescript, I believe)

reefersleep11:09:19

and of course reagent

lepistane11:09:37

i think i found what i need with this frame rate: 0 y: 212 i think i will just read the y from atom and show button if needed

reefersleep11:09:13

if you’re using re-frame, you could put the read and calculation in a subscription

reefersleep11:09:46

if you’re using vanilla reagent, you can just do it directly or wrap it in a reaction or a something like that

lepistane11:09:13

that seems like the simples i might even play with scroll later on to learn more since there are few libs like you said. i am not. for this project as simple as possible, only reagent. yeah my thoughts exactly (on how to do it in reagent) thank you very much for your help you are very kind

lepistane12:09:20

couldnt make it happen but i just used this example to get what i need (yeah it's ugly but what can i do)

reefersleep12:09:05

I’m curious if I could make it work now. Seems to me like that city41 guy has done almost all of the work. Maybe I’ll give it a go later today.

reefersleep12:09:54

But if you have something that works, problem solved!

reefersleep12:09:24

Is your solution on github?

reefersleep12:09:27

I’d like to see it 🙂

lepistane12:09:21

i will push it soon, link incoming

daiyi13:09:39

@pesterhazy this looks amazing! and is exactly what I'm seeking. thanks for kicking it off

daiyi13:09:48

also aren't you supposed to be on holiday or something? :P

sb13:09:13

Could you help me? This is my first re-frame/reagent chart “demo”. I created based on Mike instructions. But I get still nil at props.. what is the problem?

reefersleep13:09:50

@sb I think it’s wrong to assume that :component-did-mount is given the component itself as an argument

reefersleep13:09:38

you’re feeding an arg to draw-demo-chart, but it takes no args

reefersleep13:09:50

so maybe a bit of argument confusion here 🙂

sb13:09:25

True, Ok 🙂

sb13:09:43

What I need to drop to did-update part?

sb13:09:53

(draw .. chart?

reefersleep13:09:53

does it get called?

reefersleep13:09:13

could you check that it gets called, and maybe print out whatever args it receives?

sb13:09:42

Ok, I check it! one moment

reefersleep13:09:08

:compontent-did-update #(prn %1 %2 %3) or whatever 🙂

sb13:09:00

#object[Constructor [object Object]] [#object[G__35256 "function (var_args){
var args = null;
if (arguments.length > 0) {
var G__35257__i = 0, G__35257__a = new Array(arguments.length -  0);
while (G__35257__i < G__35257__a.length) {G__35257__a[G__35257__i] = arguments[G__35257__i + 0]; ++G__35257__i;}
  args = new cljs.core.IndexedSeq(G__35257__a,0);
} 
return G__35256__delegate.call(this,args);}"] 0] nil

pesterhazy13:09:03

@daiyi in between travelling I'm working. Really nice co-working space here in Belo Horizonte :flag-br:

pesterhazy13:09:03

there's no caipirinha emoji 😞

sb13:09:16

I got the counter syncing state.

reefersleep13:09:36

I thought I could nudge you in the right direction with a quick tip, but I’m in over my head here 🙂

sb13:09:07

Ok, thanks, that is helpful! I trying to solve.

reefersleep13:09:00

I think I might have been wrong in my assumption about :component-did-update not receiving the component as an arg. Sorry! Feel like I’ve mislead you rather than help you

pesterhazy13:09:06

also you should narrow down your example a bit for testing - too much going on. Try to come up with a minimal example

reefersleep13:09:15

but it’s always good to print whatever arguments you get, possibly with cljs.pprint/pprint, and remember to keep track of what you’re printing where so you don’t confuse yourself.

reefersleep13:09:37

And printing the (type of-something) also helps sometimes

reefersleep13:09:01

oh and yeah, @pesterhazy is right, way too much going on

sb13:09:04

@pesterhazy thanks, I hope will help for me. ( Unfortunately with google charts.. that is the minimal testing size..)

pesterhazy13:09:53

well for one thing there's re-frame in there, which is not necessary

pesterhazy13:09:20

if the problem is that you're seeing nil props, try to focus on that first by passing static values etc

sb13:09:24

I got the values.. and the chart works fine without this. Ok, I go back .. and start to test again in different view point. Thanks the help 👍

pesterhazy13:09:56

no problem, I know it's often difficult to tease things apart

pesterhazy13:09:32

often that's the real task - separating the core of the problem from the incidental trappings

reefersleep13:09:46

Hope you get it to work. Maybe I’ll take a look at it later on. Must say I’m a bit confused about exactly what the problem is, because there’s so much code and I don’t have a REPL handy 🙂

sb13:09:31

Ok, I will come back! Thanks!! 🙂

pesterhazy13:09:59

yup please let us know

sb14:09:26

Im back.. I get the data and I can prn out from this

update (fn [comp]
                (let [{:keys [smth]} (reagent/props comp)]                    
                      (reset! gchart smth)
                     ))

sb14:09:46

(prn smth) I get every updates.. works!

sb14:09:00

But I can’t use outside the let part..

sb14:09:29

any idea? maybe that is a beginner question.. what is the problem now.. 🙂

pesterhazy14:09:38

use waht outside the let?

sb14:09:50

(defn draw-demo-chart []
 (let [gchart (atom nil)
       update (fn [comp]
                (let [{:keys [smth]} (reagent/props comp)]                    
                      (reset! gchart smth)
                     ))
       cols [["date" "X"] ["number" "YC"]]
       rows (clj->js [[(new js/Date "07/11/14") 45] [(new js/Date "07/12/14") 15]
               [(new js/Date "07/13/14") 23] [(new js/Date "07/14/14") 234]])
       options (clj->js {:title (str "DAS CHART")})
       canvas (new js/google.visualization.LineChart (.getElementById js/document "linechart"))]        
      
  (prn "outer" @gchart)

sb14:09:24

at (prn "outer" @gchart)

pesterhazy14:09:10

don't understand...

sb14:09:48

I do apologize!

sb14:09:16

I got the value (update in every click) at update (fn [comp] ... but I can’t use this var (in atom or not) after the let definitions (after "linechart"))]

sb14:09:22

sorry for my english

pesterhazy14:09:57

you should be able to use gchart anywhere inside of the let

pesterhazy14:09:33

of course on init time (where your prn is) it's not set yet 🙂

sb14:09:11

How can I do that? 🙂 Sorry for this question 🙂

pesterhazy14:09:26

not sure what you want to do

sb14:09:59

I would like to update the chart. Counter is just a test. I would like to use eg. in the title.

sb14:09:49

Eg just drop here (str "DAS CHART" @gchart)

sb14:09:01

this is simple counter..

sb14:09:37

Ok, I know what is the problem..

sb15:09:53

I didn’t understand really how works reagent classes, therefore … i created a big mistake. Now works everthing. Thanks!!

sb15:09:05

👍🍻:face_with_rolling_eyes:

sb15:09:19

Good version.

sb15:09:49

Later I will drop to github.. to newbies.. like me 😂