re-frame

https://github.com/Day8/re-frame/blob/master/docs/README.md https://github.com/Day8/re-frame/blob/master/docs/External-Resources.md
superstructor 2021-05-18T03:36:29.000100Z

https://github.com/day8/re-frame-template

superstructor 2021-05-18T03:36:56.000400Z

⬆️ The lein template creates a shadow-cljs project.

Franklin 2021-05-18T07:27:42.001400Z

would a tool like https://enzymejs.github.io/enzyme/ make sense for testing re-frame views?

Franklin 2021-05-18T09:37:55.001600Z

actually got an answer for this after reading the testing section in re-frame documentation

lilactown 2021-05-18T15:21:37.002300Z

we use react-testing-library at work and i enjoy it

1👍
Oliver 2021-05-18T16:41:26.003400Z

Thank you. Looks nice and has a lot of documentation included.

nixin72 2021-05-18T18:06:30.004700Z

Hi, I'm having a really weird issue with Re-frame. Everything was working fine, and I don't know what I changed to make this happen, but when I click on a link on my site it doesn't change pages anymore. Has anyone had this issue before? The URL changes in the browser like there's an event.preventDefault() happening, and the value of my current page changes in my re-frame database, but then Reagent doesn't change the page

nixin72 2021-05-18T18:07:21.005200Z

This is the code in question

;;; events.cljs
(re-frame/reg-event-db ::set-active-panel
 (fn-traced [db [_ active-panel]]
            (assoc db :active-panel active-panel)))

;;; subs.cljs
(re-frame/reg-sub ::active-panel
 (fn [db _]
   (:active-panel db)))

;;; routes.cljs
(defroute "/" []
  (re-frame/dispatch [::events/set-active-panel :login-panel]))

(defroute "/faq" []
  (re-frame/dispatch [::events/set-active-panel :faq-panel]))

(defroute "/alerts" []
  (re-frame/dispatch [::events/set-active-panel :alert-panel])) 
; ...

;;; sidebar.cljs
[:a.flnnc {:href "#/alerts" :style {:color "white"}} [FiAlertCircle] "Alerts"]
[:a.flnnc {:href "#/faq" :style {:color "white"}} [RiQuestionAnswerLine] "FAQ"]

nixin72 2021-05-19T14:50:55.011Z

Ahh, I found the issue, I had one extra (fn [] ...) in the component that my links were in. I'm not sure why it was causing the issue, but it was. Things appear to be working as expected now.

p-himik 2021-05-19T14:56:54.011500Z

In this case, :key would've indeed helped (I think), but it would be an incorrect solution IMO just because the cause of the issue is something else entirely.

p-himik 2021-05-18T18:18:58.005800Z

You're conflating a few topics. Reagent has nothing to do with page changes. If the value in the app-db is changed but you don't see the result, then you simply aren't using that value in a correct way.

nixin72 2021-05-18T18:29:15.006Z

Here's how I'm using it

;;; views.cljs
(defn- panels [panel-name]
  (case panel-name
    :alert-panel   [li/template alert/alert-page]
    :faq-panel     [li/template faq/faq-page]
    ;; ...
    ))

(defn main-panel []
  (let [active-panel (re-frame/subscribe [::subs/active-panel])]
    (println @active-panel) ;; Here I can see the value changing
    [panels @active-panel])))
I don't see how I'm using it wrong. It's the same thing as the re-frame template, and it was working perfectly the other day. All I've changed since then was replacing some hard-coded string with translations from Tempura.

nixin72 2021-05-18T18:29:40.006200Z

In addition, if I click a link, then change my code to allow a hot-reload to happen, the page changes fine.

p-himik 2021-05-18T18:43:59.006400Z

How do you call main-panel?

nixin72 2021-05-18T18:45:41.006600Z

The default code from the template

(defn ^:dev/after-load mount-root []
  (re-frame/clear-subscription-cache!)
  (let [root-el (.getElementById js/document "app")]
    (rdom/unmount-component-at-node root-el)
    (rdom/render [views/main-panel] root-el)))

p-himik 2021-05-18T18:48:51.006800Z

That all does look alright, so I can't really tell what's going on. If you create a repo with a minimal reproducible example then I can take a closer look.

2021-05-18T18:53:07.007100Z

In main-panel, try this:

^{:key (str "panel-" @active-panel)}
  [panel @active-panel]

p-himik 2021-05-18T18:54:07.007300Z

That shouldn't affect anything because panel is a form-1 component. Also, you don't need to convert your keys into strings explicitly - Reagent does that for you.