Fork me on GitHub
#reagent
<
2015-07-03
>
sooheon04:07:21

That’s a nice looking site

mikecarter08:07:44

@sooheon: thanks! yeah, the designers are looking for some alternative background images

sooheon08:07:05

I’ve got a question involving re-frame and typeahead. I’m trying to port the one from reagent-forms (https://github.com/reagent-project/reagent-forms/blob/master/src/reagent_forms/core.cljs#L192), and I’ve gotten as far as this: https://gist.github.com/sooheon/fbae36a1588504f6e594 Obviously it doesn’t work. Can anyone tell me where I’m going wrong? The repo (full of bad clojure) is here: https://github.com/sooheon/ku-live/tree/typeahead

mikethompson10:07:48

@sooheon: I'm looking at the code ... can you be more specific about what doesn't work?

sooheon10:07:48

Ok, sorry to be vague this is my first time with cljs. Mainly, I’m not seeing any kind of popup of typeahead list when I type. Nor when completely remove the :hidden key val.

sooheon10:07:31

Yes. I don’t quite understand the map-indexed sexp, just copy pasted it

mikethompson10:07:36

selected-index in a reaction but on line 79 you seem to be treating is as an atom (using reset!)

mikethompson10:07:51

So that's an issue, but perhaps not the immediate issue

sooheon10:07:35

ok I’ll first make that a dispatch

sooheon10:07:33

Ah yes i’ve got all my app data in there

sooheon10:07:45

Because I couldn’t figure out ajax calls to populate db...

sooheon10:07:11

(def db 
  {:courses {…}
   :my-courses {}
   :typeahead {:hidden? true
               :mouse-on-list? false
               :selected-index 0
               :selections []
               :value “”}})

sooheon11:07:00

Looks something like this

mikethompson11:07:41

So (get-in @typeahead-db [:input]) gives?

sooheon11:07:37

Nothing.. because there is no such thing. 😖

mikethompson11:07:44

Oh, wait. That's in a threaded macro. Sorry

mikethompson11:07:02

Still a problem?

sooheon11:07:03

SHould it be :value?

mikethompson11:07:06

@sooheon have you seem re-com ?

sooheon11:07:24

I have. I was actually trying that before you messaged me.

sooheon11:07:40

But it doesn’t play nice with boot

sooheon11:07:00

For some reason I can’t call it as a :dependency in my build.boot

mikethompson11:07:51

It looks to me that your "translation" of "reagent-forms" doesn't have anything fundamentally wrong. Just a few bugs.

mikethompson11:07:23

I think your just going to have to knuckle down and put some debug statements in there and tuff it out.

mikethompson11:07:37

We've found two things wrong ... there are probably others.

mikethompson11:07:55

But, like I said, nothing fundamentally wrong.

sooheon11:07:15

Sure. Thanks for your input. So I take it the way I’ve set up dispatches/handlers in general you don’t see anything egregious about?

mikethompson11:07:32

Overall structure is fine

sooheon11:07:13

Ok, is the way to do debug statements just put .log js/console everywhere?

mikethompson11:07:36

As soon as possible, I'd be sticking debug middleare onto all your event handlers (not that I see any significant issues)

sooheon11:07:53

Ok that’s the way :)

mikethompson11:07:10

Other than that just println

mikethompson11:07:17

Are you new to cljs ?

sooheon11:07:33

Yep new to everything

mikethompson11:07:46

That's a steep learning curve simple_smile

sooheon11:07:48

Thanks for re-frame btw, the write-up really drew me in

mikethompson11:07:14

Well you've bitten off a bit for a first project

sooheon11:07:15

Yeah it really gave me many false epiphanies, and when it comes down to it I still know nothing

sooheon11:07:16

False as in transient in my brain, not incorrect :p

escherize11:07:04

I'm streaming a new clojurescript + d3 + re-frame side project of mine over here: http://www.twitch.tv/escherize/ I have no idea what i'm doing re: streaming simple_smile

sooheon11:07:43

@escherize: do you know about http://livecoding.tv? it was on reddit a couple days back, I only saw one cljs stream on there and it was pretty popular

escherize11:07:00

interesting maybe ill give it a shot

mikethompson11:07:16

@sooheon: I'm not sure what your goals are. But I think you'll have a more satisfying experience if you start with something that is working an slowly tweak it.

mikethompson11:07:35

Are you just tinkering? Experiementing?

mikethompson11:07:50

Or do you have something specific you have to get done?

sooheon11:07:35

Well I saw the crossclj search interface, and wanted to make something like that for my school course search

sooheon11:07:08

I wanted to have a functional search, save, timetable visualiser before next semester

mikethompson11:07:45

Do you have to have it work across browsers, or can you mandate Chrome?

sooheon11:07:42

I guess chrome only wouldn’t be too bad, but I do live in s. korea where a ton of people use IE still

sooheon11:07:06

Different versions

sooheon11:07:20

Do you mean for me to try re-com?

mikethompson11:07:36

yeah, I'm wondering if that is a good option for you

mikethompson11:07:09

On the right, under Demo, choose "Dropdown with filtering"

sooheon11:07:27

Yeah that’s almost exactly what I want

sooheon11:07:43

maybe get rid of the dropdown aspect and make it immediate search and filter

mikethompson11:07:52

Perhaps. Re-com does assume the availability of a modern browser (one with a flexbox implementation)

mikethompson11:07:18

So if you feel good about mandating a modern browser, then re-com is probably a very useful platform

mikethompson11:07:45

modern browser = IE11, firefox, Chrome, Safari

mikethompson11:07:45

There is a lein template to get you going: (although I note you were using boot)

sooheon11:07:00

Yeah I did try to require re-com in boot

sooheon11:07:08

and got an error, which led me down this path

sooheon11:07:30

I could switch over to the lein way, just to get a working site, like you said

mikethompson11:07:35

You really should be able to use re-com with boot without the slightest problem

escherize11:07:25

how meta 😄

mikethompson11:07:08

I think the trick is to: - just put in a basic div or svg in the renderer - do most of that D3 specific work in the did-mount

meow14:07:45

@sooheon: I've been using boot for a few things and agree with Mike that it should work for re-com. The folks on #C053K90BR have been very helpful as I've been going through the learning curve (I'm new to clojure and cljs as well).

mikethompson14:07:33

Dear all, Here is a useful tip I picked up from @escherize ... When you are debugging a reagent view ... sometimes you want to see the value in an input (prop or reagent/atom) ...

mikethompson14:07:54

The trick is to add something like this to the hiccup in your view ...

mikethompson14:07:21

[:pre (with-out-str (pprint @some-atom))]

mikethompson14:07:17

Up the top, you'll need to add a require to use pprint like this ... [cljs.pprint :refer [pprint]]

mikethompson14:07:27

You can also just forget about using pprint and do this: [:pre (pr-str @some-atom)]

mikethompson14:07:53

Works a treat. Is often better than using printlns

mikethompson14:07:03

Final warning; to use pprint you'll need to be using a recent version of cljs. Something from the last few weeks.

coyotespike15:07:36

In re-frame, we use a Big Atom (or Ratom), app-db, to hold all state . Is it okay to leave a user's (say) password in app-db? Or should that be sent directly to, and stored in, the server?

coyotespike15:07:07

@sooheon: ditto what Mike said about the middleware. Re-frame is a really logical way to hold the app state, but I wrote my event handlers wrong at first. The middleware debug is quite helpful, as it immediately shows in-console any mistakes.

sooheon15:07:43

@coyotespike: Thanks, I’ll be sure to learn it. I’m interested in your sensitive info question as well, now that you mention it.

escherize16:07:14

I don't think sensitive info should stay in the client

escherize16:07:28

when the password is created, i send it to the server and dissoc the key from app-db. We send back a token which is stored in the app-state

escherize16:07:06

if your app-db looks like

{... :user {:user "map" :in "here}}
you could have a subscription that gets :user and uses select-keys so that you never have to worry about undesirable map entries slipping through

coyotespike16:07:30

@escherize: that makes sense. Could you elaborate a bit on the token you send and how you use it? And to confirm, you're suggesting using select-keys as a safer way to store the password client-side?

escherize16:07:31

if you store the password client side, I think it should be hashed at least

escherize16:07:41

select-keys is good because it tells you explicitly what the subscription will return

escherize16:07:58

like with (select-keys [:a :b] m)

escherize16:07:18

you might end up with :a and 😛 being nil, but you know a lot about m from that function

coyotespike16:07:41

man, did you just put together that flow-chart? that's awesome

escherize16:07:56

yeah, I use wsd-mode in emacs

coyotespike16:07:52

oh, that's pretty...I feel an M-x package-install coming on...

coyotespike16:07:37

Thanks for the extra explanation, I'll implement something like that (adding user login right now)

escherize16:07:38

yeah it feels weird to treat the password totally different but its worked out for me so far

sooheon18:07:28

@meow, @mikethompson, re: re-com with boot, boot was choking on the outdated dependency for cljs-time. PR in progress :)