Fork me on GitHub
#re-frame
<
2016-01-18
>
sooheon08:01:41

Hey guys, I’ve been trying to hook up @pupeno’s free-form with semantic-ui, and I’m having some trouble. It’s probably something totally obvious :) It’s the log-in form, you can see the working bootstrap version commented out below it. I can’t seem to get that on-submit action to fire, so it must be in the wrong place. What am I doing wrong? https://github.com/sooheon/tomaton/blob/master/src/cljs/tomaton/components/log_in_register.cljs#L17

pupeno08:01:36

sooheon: are you using version 0.2.0 of free-form?

pupeno08:01:51

sooheon: the form tag should be inside the call too free-form/form

pupeno08:01:17

I don’t think this is the problem, but I never had it outside, so I’m not sure about the implications.

sooheon08:01:44

Ok I will try that first

sooheon08:01:17

pupeno: hasn’t fixed it, but good to know. FWIW, the update-form handler is firing properly for each field, I can see that in the state viewer.

pupeno08:01:41

sooheon: when you press the submit button, I don’t see anything that should prevent the form from actually being submitted. Are you sure this isn’t happening? did you look at the network traffic in chrome inspector?

pupeno08:01:43

That submittion would make the console message dissapear.

sooheon08:01:20

not sure what i should be looking for in the network traffic, but there’s nothing interesting happening

sooheon08:01:46

No page refresh, nothing new in the console

pupeno08:01:35

sooheon: the browser should refresh the page, so, something is broken there.

sooheon08:01:56

so it’s purely my use of semantic-ui that’s wrong

sooheon08:01:59

most likely

pupeno08:01:17

I’m not familiar with semantic-ui.

pupeno08:01:43

Can you inspect the form in chrome or firefox and show me a screenshot of the DOM?

pupeno09:01:35

Ah, got it!

pupeno09:01:39

You don’t have a submit button.

pupeno09:01:02

:div.ui.fluid.submit.button probably looks like one, but it isn’t one.

pupeno09:01:07

It’s a :div.

pupeno09:01:27

You need either a :button or a :input with {:type “submit”}

sooheon09:01:50

thanks that sounds like it :)

sooheon09:01:17

I was taking it from the demo on the site :p

pupeno09:01:35

And then, you’ll need to actually stop the form from submitting in your on-submit event. This is how I do it: https://github.com/carouselapps/ninjatools/blob/master/src/cljs/ninjatools/ui.cljs#L13

pupeno09:01:45

Maybe this should be in free-form somehow.

sooheon09:01:19

Awesome, it submits as expected.

sooheon09:01:33

What do you think would be the best way for me to hook up the error messages?

pupeno09:01:51

What do you mean by hooking up the error messages?

sooheon09:01:20

so the second arg to free-form/form is the error map, in ninjatools those errors appear below each field correctly, I’m wondering how I can do that outside of bootstrap

pupeno09:01:59

You mean because you are using semantic-ui instead of bootstrap?

pupeno09:01:34

Does semantic-ui have a recommended way of displaying error messages?

sooheon09:01:03

I was trying to replicate that

pupeno09:01:28

You can do that for every key in :-errors, bellow your form.

sooheon09:01:05

the [p.error] is where the error message will end up right?

pupeno09:01:49

Yes, it’s a sort of template, that will spit out: [:p.error “Please enter your email”] [:p.error “Please enter a valid e-mail”] ...

pupeno09:01:37

:free-form/error-message expects a key… I can see you would benefit from one that doesn’t and that instead outputs all error messages. Pull requests are welcome 😉

sooheon09:01:57

I see and the map for free-form/error-class is {:key $what key the error is for, :error $the error class to append}?

pupeno09:01:57

Also, we do have shortcuts to generate bootstrap-3 forms. Shortcuts to generate semantic-ui forms are also welcome, so you can nicely encapsulate all these decisions for you and other devs.

sooheon09:01:32

I’ll see what I can contribute… maybe with more of your help later :P. Thanks for everything, as well. Ninjatools taught me how to set up a db connection too, and it’s really helpful to see the details that a lot of documentation skims over because they assume a reader with more experience.

pupeno09:01:39

sooheon: Ninjatools is based on an old Luminus, so you might want to check Luminus for cleaner, newer, better techniques to handle the db connection.

pupeno09:01:21

sooheon: and I think a lot of people avoid talking about the db connection because it’s actually surprisingly hard to do in a functional way that also has the right encapsulation so people just avoid the bad spot.

sooheon09:01:08

Yeah I am reading a lot of luminus docs as well, but its a little less helpful than a functioning whole.

pupeno09:01:39

If you want to work on free-form itself, let me know and I’m happy to pair and help you understand the codebase.

sooheon09:01:51

Sure. Thanks for the offer! I’ll let you know as I understand it better.

frank11:01:33

Is it possible to dynamically change subscription parameters in a component?

frank11:01:41

what I'd like to do:

(defn ticket-list [tag]
  (when tag
    (let [tickets (subscribe [:tickets tag])]
      (fn [tag]
        [:div.ticket-list.container-fluid
         (map #(do ^{:key (str "ticket-" (:z-id %))} [ticket %]) @tickets (range))]))))

frank11:01:38

the thing that calls this component:

(defn page []
  (let [user-info (subscribe [:user-info])
        admin (subscribe [:is-admin])
        user-tags (subscribe [:user-tags])
        active-tag (subscribe [:active-tag])]
    (fn []
      [:div.home
       (if (= 0 (count @user-tags))
         [:div.jumbotron
          [:div.container
           [:h1 "There's nothing here!"]
           [:p "You have no subscriptions. Add some in your "
            [:a {:href "/#/settings"} "settings"]
            "."]]]
         (list 
          ^{:key "tag-nav"} [tag-nav]
          ^{:key "ticket-list"} [ticket-list @active-tag]))])))

mikethompson19:01:08

@frank look at using dynamic subscriptions ... some early docs here .... https://github.com/Day8/re-frame/wiki/Dynamic-Subscriptions

samueldev22:01:37

can anybody see anything immediately wrong with this setup? view code: http://puu.sh/mAOMd/5f6ac963a8.png view output: http://puu.sh/mAOMZ/1be772b30c.png subscription code: http://puu.sh/mAOPY/ac63998faa.png db structure: http://puu.sh/mAORR/3c4c0f65b4.png

gadfly36123:01:13

Try dereffing post inside the div. @post

samueldev23:01:11

still a touch confused as to when to deref things VS when to not