Clojurians Log v2

I’m calling a set-query! inside a nested child component. It runs through the reconciler but I can’t figure out why it won’t re-render the component once it’s retrieved the new value. Any idea why?

@puppybits All sorts of reasons. There is no magic to refresh. It refreshes the component that issued the set-query. So: 1. the data didn’t change. 2. The data you’re querying for didn’t change, or maybe the new query is wrong?

It looks like my read function is returning the new object but the component is receiving the old version. Is there something with compassus that I need to do different?

(defn spending-date!
  [this date]
  (prn "set query" date)
  (om/set-query!
    this
    {:params {:date date
              :budget (om/get-query budgeting/Budget)}}))

(defui SpendingPage
  static om/IQueryParams
  (params [this]
    {:budget (om/get-query budgeting/Budget)
     :date (t/minus (t/at-midnight (t/now)) (t/days 7))})

  static om/IQuery
  (query [this]
    '[({:budget/by-date ?budget} {:date ?date})])
  Object
  (render [this]
    (let [{:keys [owner factory props]} (om/get-computed this)
          {:keys [title budget/by-date app/txn]} props
          date (:date by-date)
          on-active #(do (prn "setting" date %) 
                       (when (not= date %) 
                         (spending-date! this %)))]
      (debug (om/get-computed this))
      (go (<! (timeout 5000)) (on-active (t/minus date (t/days 1))))
      (ui/view {:style {:flex 1 :alignItems "center"}}
        (budgeting/view by-date)))))

(def page (om/factory SpendingPage))

; ----- console log ------
"setting" #inst "2017-08-14" #inst "2017-08-13"
"set query" #inst "2017-08-13"

fskl.data.budet <-- this is from my read function
[{:date #inst "2017-08-13",
  :budget 160823}]

[  7.002s] [app] fskl.pages.spending/SpendingPage query took 18.239999994635582 msecs

fskl.pages.spending <---- but the refresh has the same object
[{:owner #object[compassus.core.ui_34607],
  :factory #object[Function],
  :props
  {:budget/by-date
   {:date #inst "2017-08-14",
    :budget 160823}}}]

and interesting read -> https://medium.com/@raulk/if-youre-a-startup-you-should-not-use-react-reflecting-on-the-bsd-patents-license-b049d4a67dd2

tl;dr Advise against using React if you’re planning to sue Facebook for patent infringement

I found why it was off. On set-query the new data was comes through compassus.core/route-data instead of computed.

@puppybits the Compassus model doesn't play very well with set-query!

I should actually list that in the readme sometime

Why are you reaching for set-query!?

I have a sub-view that I’m wanting to switch to a different item.

(defn spending-date!
  [this date]
  (om/set-query!
    this
    {:params {:date date
              :budget (om/get-query budgeting/Budget)}}))

(defui SpendingPage
  static om/IQueryParams
  (params [this]
    {:budget (om/get-query budgeting/Budget)
     :date (t/minus (t/at-midnight (t/now)) (t/days 7))})

  static om/IQuery
  (query [this]
    '[({:budget/by-date ?budget} {:date ?date})])
  Object
  (render [this]
    (let [{:keys [owner factory props]} (om/get-computed this)
          {:keys [title budget/by-date app/txn]} props
          date (:date by-date)
          on-active #(when (not= date %) (spending-date! this %)))]
      (ui/view {:style {:flex 1 :alignItems "center"}}
        (budgeting/view by-date)))))

It doesn’t seem like a mutate is proper because I don’t want to change the data source, just view a different item in the list.

greetings one! newbie for clojure and react but have experience with other web techs. so have a simple question - how to create side menu ? simple side menu with fixed width

right now have existing project crafted by some guru and required to make few tweaks there to show it

there is exists top navbar menu and I need to get extra left side navbar

is there simple answer or should I invent it with divs/classes?

@casualuser there's no Om-specific way to create a sidebar, if that's what you're asking. if you know how to create a sidebar with divs and classes, then i'd say do that. depending on how the guru wrote the app, the html will either look like

(dom/div nil
  (dom/p nil "woo"))

[:div [:p "woo"]]

@sundarj it looks like

[:ul.nav.navbar-nav
                  (make-nav-link data :item-list "Item Desk" (routes/item-list))
                  (make-nav-link data :item-form "Create New Item" (routes/item-form))
etc...

right, so it's https://github.com/r0man/sablono i imagine

(which is essentially the clojurescript version of https://github.com/weavejester/hiccup)

@sundarj thx for tips, going to check this resources for reference

no worries 🙂

@casualuser you could also give this a whirl: http://htmltohiccup.herokuapp.com/