Fork me on GitHub
#reagent
<
2016-10-25
>
credulous09:10:48

Hello. I’m doing my first form with Reagent, and I’m clearly abusing it somehow but can’t figure out how.

credulous09:10:04

Here’s the code:

(defn user-property [user label property]
   (let [value (r/atom  (property @user))
         editing (r/atom false)]
     (fn []
       [:div.userproperty
        [:label label]
        [:p.user-property-value {:on-click #(reset! editing true )
                                 :style {:display (if @editing "none" "block")}
                                } @value]
        [:input.user-property-input {:value @value
                                     :on-key-down #((let [keycode (.-keyCode %)]
                                                     (if (= 13 keycode) (reset! editing false))))
                                     :on-change #(reset! value (-> % .-target .-value))
                                     :on-blur #(reset! editing false)
                                     :style  {:display (if @editing "block" "none") }}]])))

 (defn user-detail [user]
   (fn [user]
     (let [u @user]
       [:div.writerdetail
        [:div.writerheader
          [:img {:src (:avatar u)}]
          [:h1 (:first_name u) " " (:last_name u)  ]]
        [:div.writerbio
         [:fieldset
          [:legend "Personal Information"]
          [user-property user "First Name" :first_name]]]
        ])))

credulous09:10:05

It works as expected - the value for “First Name” turns into an input when clicked, and I can modify the value and have it stick on the atom. However whenever the input field blurs I see this exception in the console:

credulous09:10:20

Line “65” of writeradmin.cljs puts it right after the user-detail function, on a blank line.

credulous09:10:47

It doesn’t seem to affect how it’s working, but it’s obviously troubling. Seems like it might have to do with event bubbling, but I’m stumped.

credulous14:10:04

Correction to my question above: there was something messed up with my sourcemaps, when I restarted I see that the line

:on-key-down #((let [keycode (.-keyCode %)]
                           (if (= 13 keycode) (reset! editing false))))
is causing the exception. It’s puzzling to me.

jjfine15:10:17

@credulous you probably don't want two opening parens there. when the if returns nil it tries to call nil and you get that exception,

credulous15:10:35

Thank @jjfine !

jjfine15:10:25

np, that's probably one of those "looking at it too long" bugs where the probablem becomes invisible

credulous15:10:39

With that out of the way, I have another question… I have a form that modifies an atom in a bunch of places. The inputs are components on their own because of some special behavior.

credulous15:10:38

The input components are getting cursors to the property they modify. I’d like a save button to appear when the parent atom is modified. Is there a way to do that without passing a “dirty” flag to every one of the components?

jjfine15:10:31

In my app, we store the object that's the source of the form in the global state. The form shows the object from the global state merged with a map of any of the form fields that have been modified. So if that map isn't empty, we know the form has been edited.

jjfine15:10:38

@credulous lemme know if that's unclear

credulous15:10:17

Interesting… I’ll try that thanks