yeah, that HTML2Hiccup is handy

I am having a very positive initial experience with semantic-ui. I am tired of bootstrap. semantic-ui has a material theme too, which looks really sweet.

For anyone interested in semantic ui components, there is https://github.com/gadfly361/soda-ash

What’s the best way to run a side effect when a reaction updates?

Ha track! it is

Hmm actually no, I’d like to function to run without having to deref the track…

@jfntn Here are a couple options if your need is in the context of a reagent component:

(defonce app-state
  (reagent/atom {:count 0}))

(defn foo [ratom]
  (let [count        (get @ratom :count)
        _side-effect (js/console.log count)]
    [:div
     [:div
      (str "The current count is " count)]
     [:button {:on-click #(swap! ratom update :count inc)}
      "Increment count"]]))


(defn bar [ratom]
  (reagent/create-class
   {:reagent-render       (fn [ratom]
                            (let [count (get @ratom :count)]
                              [:div
                               [:div
                                (str "The current count is " count)]
                               [:button {:on-click #(swap! ratom update :count inc)}
                                "Increment count"]]))
    :component-did-mount  #(js/console.log (:count @ratom))
    :component-did-update #(js/console.log (:count @ratom))}))

@gadfly361 thanks but I’m trying to implement it as an fx in re-frame so I don’t have a component to tie into

ah gotcha

Ha again, track! works great, was misusing it, sorry for the noise!

interesting, I wasn't aware of track!

make sure you don't abuse it 🙂

What do you mean by that?

well, usually with React, all site "activity" is handled in one of the lifecycle methods

by introducing direct side-effects of changes to ratoms, you sort of break that paradigm IMO

that could be a clever hack (i.e. pragmatism) or if used excessively could make data flow hard to follow

Got you and that makes sense

I can imagine a lot of non-abusive uses for track! by the way

Though in the context of reframe it gives it a bit more structure

Been trying to get this code reviewed if you want to take a look https://github.com/Day8/re-frame/issues/255#issuecomment-299370790

@gadfly361 I’m playing with soda-ash right now, and I’m wondering what the “right” way to trigger a modal is (within reagent). I can use [sa/Modal {:trigger (reagent/as-element [sa/Button "Log in!"])} ...], or I can do something like have no trigger, have [sa/Modal {:open true}] then force the component in through a global :modal ratom that controls stuff that way. Is there a canonical way, a right way, a preferred way? Or just… “whatever.” If it’s whatever, or the first way (with a trigger and the component within the declaration of the modal, then what’s the right anonymous function to close the modal?)

@jtth im away from keyboard atm, but ill try and get back to you later today

@gadfly361 thanks!

@jfntn I think either of the following are perfectly legitimate ways to go about this. The second version is more 'reagenty' - I used a ratom that is attached to the component, but it can also be your global app-state or app-db if you are using re-frame.

(defn modal-with-trigger []
  [sa/Modal {:trigger    (reagent/as-element [sa/Button "Modal"])
             :close-icon true}
   [sa/ModalHeader "Select a Photo"]
   [sa/ModalContent {:image true}
    [sa/Image {:wrapped true
               :size    "medium"
               :src     ""}]
    [sa/ModalDescription
     [sa/Header "Default Profile Image"]
     [:p "We've found the following gravatar image associated with your e-mail address."]
     [:p "Is it okay to use this photo?"]
     ]]])

(defn modal-with-ratom []
  (let [modal-ratom (reagent/atom false)]
    (fn []
      (let [open? @modal-ratom]
        [:div
         [sa/Button
          {:on-click #(reset! modal-ratom true)}
          "Modal 2"]

         [sa/Modal
          {:open open?
           :close-icon true
           :on-close #(reset! modal-ratom false)}
          [sa/ModalHeader "Select a Photo"]
          [sa/ModalContent {:image true}
           [sa/Image {:wrapped true
                      :size    "medium"
                      :src     ""}]
           [sa/ModalDescription
            [sa/Header "Default Profile Image"]
            [:p "We've found the following gravatar image associated with your e-mail address."]
            [:p "Is it okay to use this photo?"]
            ]]]]))))

woops, wrong person @jtth ☝️

@gadfly361 thanks so much!

np!

Generally, is there a rule of thumb of when to use just the CSS part of bootstrap or semantic-ui, vs the reactive components? Is it, like, “use CSS when you don’t need anything special” or just “use the reactive components when they’re available”