^ +1 But I guess it's probably easier to wrap an existing react DnD lib like this: https://github.com/atlassian/react-beautiful-dnd

I used Html5 for dnd only to discover that it only worked in Chrome (or at least not in Firefox)

Hi everyone, from reading the docs I understand one of the goals when writing re-frame apps is to keep the views as dumb as possible. When we need to do some processing over the db data, we should put that logic in the subscription handlers

I’m currently working on a view that has some complex logic, but it’s not related to db data or an external data source

specifically I’m building a calendar, which needs a lot of dates calculations to come up with the correct list and order of dates to display, etc

that data doesn’t seem to fit in a subscription handler

I wonder if the way to go is just to have helper functions and call them in the view

@facundo you can create a (perhaps parameterised) sub which returns the data for the view filtered and in the correct order

ok, so you’d say it’s idiomatic to resort to subs even if you don’t need on external data

like, hey this is the data I got for the view, process it so I can display it

not sure what you are meaning by "external data" - if it's a calendar view it will perhaps have something like the focus-month, which you would have in your app-db... then a sub could work with that to give lists of day/dates etc

the thing here it’s that’s a whole year calendar

I can have a focus year

but then I need a function that takes year/month and shows the month’s calendar

for context:

(defn month-view
  [year month]
  [:div.calendar
   [:div.calendar-nav [:div (format/month-string year month)]]
   [:div.calendar-container
    [:div.calendar-header
     (for [day [“Mon” “Tue” “Wed” “Thu” “Fri” “Sat” “Sun”]]
       [:div.calendar-date day])]
    [:div.calendar-body
     (for [day (month-seq year month)]
       [day-view month day])]]])

that month-seq function is doing a bunch of calculations, that’s the candidate to go into a sub

if you really don't have any state then helper-fns will be fine - if there is some state then you can wrap those helper-fns in subs - it needn't make much difference to your view code

right

that was my initial hunch, I’m using subs to query for stuff like what’s today’s date

thanks

hello! Do you have a living example (source code) of larger re-frame app that has multiple events.cljs etc. ?

@leontalbot i can't think of any, but is there something in particular you are looking to understand?

re-frame is - in practice - pretty simple once you have the cycle clear in your mind, that's not really an issue of app scale although there are some good practice like namespacing your keys

@sandbags Thank you for answering

` src ├── core.cljs <--- entry point, plus history ├── db.cljs <--- schema, validation, etc (data layer) ├── subs.cljs <--- subscription handlers (query layer) ├── views.cljs <--- reagent components (view layer) └── events.cljs <--- event handlers (control/update layer) ├── panel1 ├── db.cljs <--- schema, validation, etc (data layer) ├── subs.cljs <--- subscription handlers (query layer) ├── views.cljs <--- reagent components (view layer) └── events.cljs <--- event handlers (control/update layer) ├── panel2 ├── db.cljs <--- schema, validation. etc (data layer) ├── subs.cljs <--- subscription handlers (query layer) ├── views.cljs <--- reagent components (view layer) └── events.cljs <--- event handlers (control/update layer)

I have something like the following and want to know to manage projet.panel1.events without getting in conflict with projet.events

I don’t see any name conflicts as such but my routing is behaving weirdly and it seems that I sometimes need to call projet.panel1.events in projet.panel1.views and sometime not

only in core.cljs

@leontalbot usually you'd use fully-qualified keywords for larger re-frame apps

@akiroz Thanks! Still i can’t see any name conflicts hmmm…

I am sure it is obvious.

are you using any debugging tools like re-frisk to see what's going on in your app?

yes I use refrisk

@leontalbot "I sometimes need to call projet.panel1.events in projet.panel1.views" <-- means?

One possible interpretation i can make is that you need to :require namespaces with events or subs from core because otherwise they won't get registered

(defn render-chart-placement
   []
   [:div {:style {:min-width "310px" :max-width "800px" 
                 :height "400px" :margin "0 auto"}}])

  (defn render-chart-fn 
   [this]
   (let [config-at (r/children this)]
       (prn "config-at" (pprint config-at))  
      
        #(js/Highcharts.Chart. (r/dom-node this) (clj->js config-at)) ))
  
;;
(defn render-chart []
  (r/create-class
    {:component-did-update render-chart-fn
     :component-did-mount render-chart-fn 
     :reagent-render render-chart-placement
     }))


;; data re-frame subscription test - counter
(defn render-chart-fn-container
    []
    (let [count (re-frame/subscribe [:count])
          config-at (reaction {:chart {:type :bar}
                               :title {:text (str @count)}
                               :xAxis {:categories ["Apples", "Bananas", "Oranges"]}
                               :yAxis {:title {:text "Fruit eaten"}}
                               :series [{:name "Jane" :data [1, 0, 4]}
                                        {:name "John" :data [5, 7, 3]}]})]
    (fn []
        [render-chart @config-at]
        ;(prn config-at) 
         )))

Could you help me? I see at r/children(reagent) nil. I don’t know why.

@sb I know your question is about r/children but perhaps this higher level document will help: https://github.com/Day8/re-frame/blob/master/docs/Using-Stateful-JS-Components.md

@leontalbot for example larger apps see the ExternalResouce docs: https://github.com/Day8/re-frame/blob/master/docs/External-Resources.md

Thanks!