Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2019-12-29

Channels

#re-frame
<
2019-12-29
>
Bravi21:12:01

hi everyone. something very strange is going on here: 

(defn gallery-page []
  (let [{:keys [name projects]} @(subscribe [:active-gallery])
        page-ready?             @(subscribe [:gallery-page-ready?])]
    [:<>
     [loader/view
      {:ready? page-ready?}
      [:section.hero.is-black
       [:div.hero-body
        [section-heading name]
        (if-let [projects (seq projects)]
          [:div.container
           [grid/view projects
            {:onLayoutComplete #(do
                                  (js/console.log "hello")
                                  (dispatch [:done-loading :active-gallery-layout]))}]]
          [:div.content.has-text-centered.is-small.has-text-light
           [:h5.subtitle "This gallery is empty"]])]]]]))
basically I’m using masonry-layout and that console.log should only be called after the layout formation is complete. but for some reason it is being called straight away here

p-himik21:12:58

What is this masonry-layout?

p-himik21:12:25

The documentation talks about using node.on(eventName, handler), but you're doing something akin to node.onEventName = handler. Maybe that's what the library doesn't like?

Bravi21:12:56

@p-himik actually the point here is 

(if-let [projects (seq projects)]
         [:div.container
          [grid/view projects
           {:onLayoutComplete #(do
                                 (js/console.log "hello")
                                 (dispatch [:done-loading :active-gallery-layout]))}]]
         [:div.content.has-text-centered.is-small.has-text-light
          [:h5.subtitle "This gallery is empty"]])
versus 
(defn- projects-view [projects]
  [:div.container
   [grid/view projects
    {:onLayoutComplete #(do
                          (js/console.log "hello")
                          (dispatch [:done-loading :active-gallery-layout]))}]])

.....

(if-let [projects (seq projects)]
         [projects-view projects]
         [:div.content.has-text-centered.is-small.has-text-light
          [:h5.subtitle "This gallery is empty"]])

Bravi21:12:13

the second case works fine, whereas the first one doesn’t

p-himik21:12:21

Sorry, no idea. Right now it seems to me as an issue with masonry-layout and React. I wouldn't think on re-frame on Reagent.