Fork me on GitHub
#om
<
2017-08-21
>
puppybits01:08:11

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?

tony.kay04:08:48

@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?

puppybits12:08:23

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}}}]

bostonaholic13:08:33

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

puppybits16:08:33

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

anmonteiro16:08:16

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

anmonteiro16:08:32

I should actually list that in the readme sometime

anmonteiro16:08:54

Why are you reaching for set-query!?

puppybits16:08:54

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)))))

puppybits16:08:59

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.

casualuser18:08:10

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

casualuser18:08:54

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

casualuser18:08:39

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

casualuser18:08:08

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

sundarj19:08:36

@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"))
or
[:div [:p "woo"]]

casualuser19:08:33

@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...

sundarj19:08:49

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

casualuser19:08:09

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

sundarj19:08:35

no worries 🙂