Fork me on GitHub
#reagent
<
2016-06-22
>
pvinis08:06:40

if i have a callback function that gets on arg, and call it on data-onsuccess, how do i put that in reagent?

sbmitchell14:06:31

hard to tell what you are asking for related to reagent...seems more like a coding question about callbacks

pvinis17:06:25

sbmitchell: i am trying to write this in reagent https://developers.google.com/identity/sign-in/web/

pvinis17:06:03

and i wrote this

(defn handle-google-signin [google-user]
  (let [profile (.getBasicProfile google-user)]
    (d/log (str "full name" (.getName profile)))))
(defn google-signin-component [name]
  [:div {:class "g-signin2"
         :data-onsuccess #(handle-google-signin)}])

pvinis17:06:19

but i get a WARNING: Wrong number of args (0) passed to test.reagent/handle-google-signin at line 21 src/cljs/test/reagent.cljs

sbmitchell17:06:41

what is data-onsuccess?

sbmitchell17:06:50

I've never seen this kind of invocation for a handler

sbmitchell17:06:10

can you call a fn out of a data attribute

sbmitchell17:06:41

aside from that you just need to pass in an argument into 'handle-google-signin' call

sbmitchell17:06:35

I have no idea what you are doing from that code sample @pvinis

sbmitchell17:06:50

are you trying to do something like... this

pvinis17:06:01

im trying to write a simple onSignIn function like the google example

pvinis17:06:08

but the argument is the problem

sbmitchell17:06:41

what is data-onsuccess? how can that even be called I dont understand how that code works

pvinis17:06:01

great.. me neither 😛

pvinis17:06:19

i guess data-onsuccess gets called if you login correctly

sbmitchell17:06:25

oh I see its based on having googles script

sbmitchell17:06:28

its going to read from that...

sbmitchell17:06:34

sorry I didnt realize your link was a link to an example

sbmitchell17:06:51

do you have this code <script src="https://apis.google.com/js/platform.js" async defer></script> embedded

sbmitchell17:06:09

you probably cant pass arguments into that..since its a string lookup?

sbmitchell17:06:26

the embedded script is passing that stuff in for you..

pvinis17:06:24

hm.. let me see the code one sec

sbmitchell17:06:38

dont worry about my code example thats not what u want

sbmitchell17:06:46

you are trying to integrate with google api

pvinis17:06:29

and i need to make this onSignIn funciton, to console log for example

pvinis17:06:08

which takes one arg, but in the component, how do i set up to call the func without the argument?

metametadata17:06:14

data-onsuccess="onSignIn" should translate to :data-onsuccess "handle-google-signin"

sbmitchell17:06:21

you dont pass in the argument

sbmitchell17:06:23

its a string

sbmitchell17:06:51

the fn itself will get the argument bc the embedded google api script takes that fn name and then applies arguments to it dynamicaly

sbmitchell17:06:00

thats why I was confused as to what 'data-onsuccess' is

pvinis17:06:19

so the warning i can skip?

sbmitchell17:06:30

no make it a string

sbmitchell17:06:33

not make it an anon fn

pvinis17:06:44

oooh metametadata ok i can try like that

sbmitchell17:06:02

yea metametadata is correct I think

pvinis17:06:11

let me try quickly

metametadata17:06:12

yeah, but it still can fail because: 1) there's a chance google's script is run before Reagent renders the div 2) even if 1) is not the case, compiler optimization can mungle the function name and it won't be called

sbmitchell17:06:37

yea I think youd need to wrap this call into component-did-mount

sbmitchell17:06:42

and append the dom element dynamically perhaps

sbmitchell17:06:59

I wouldnt be using this personally...id try use the api directly lol

sbmitchell17:06:29

using their DOM version is probably easier in JS land when they give you the snipper..not sure how it translates into reagent land honestly

metametadata17:06:19

oh, :data-onsuccess "handle-google-signin" will also definitely not work because in JS land functions cannot have`-` chars in them

pvinis17:06:50

yea its not getting called

metametadata17:06:19

I'd suggest looking at React examples of using this API and then try to translate them to Reagent

sbmitchell17:06:38

Thats a good suggestion

pvinis18:06:03

how would i make <script src="https://apis.google.com/js/client.js?onload=init"></script> into reagent? this would normally go in the head of the html, along with a script that contains an init function

sbmitchell18:06:03

well a script is just a tag so you could just insert it

sbmitchell18:06:34

[:script {:src "xxx"}]

pvinis19:06:21

sbmitchell: hm, but how do i put it in the head?

pvinis19:06:35

i will have to look for an example

sbmitchell19:06:25

well you could do it within component-did-mount lifecycle and append to head

sbmitchell19:06:31

or you could just embed it right in the component

sbmitchell19:06:35

or even attach it to the body

sbmitchell19:06:42

its really however you want to do it...