Fork me on GitHub
#re-frame
<
2017-03-10
>
curlyfry07:03:28

@petr What does the :set-active-panel event handler look like? And the :active-panel subscription?

gklijs09:03:23

Anybody knows if re-frame can be used with reagent 0.6.1?

alanspringfield11:03:31

@petr shouldn't it be (re-frame/subscribe [:active-panel])?

PB14:03:44

@curlyfry @alanspringfield

[
:set-active-panel
:job-panel
:CleverTraining
]
is what I see in frisk, however I have this sub
(re-frame/reg-sub
 :active-panel
 (fn [db _]
   (:active-panel db)))
When I try to do anythign similar to this, the page breaks
(let [moo (re-frame/subscribe :active-panel)]
    ;;(js/alert moo)
    (js/console.log (first moo))
    [re-com/v-box
     :gap "1em"
     :children [[re-com/title
                 :label (str "This is the moo Page." moo "JKFKDJF")
                 :level :level1] [link-to-home-page]]])

curlyfry15:03:09

@petr For starters, it should be (re-frame/subscribe [:active-panel]) (like @alanspringfield said)

PB15:03:53

@curlyfry I'm confused, if you look at this line,that's what I'm doing: moo (re-frame/subscribe :active-panel)

curlyfry15:03:29

Where is the :set-active-panel event handler?

PB15:03:36

@curlyfry

(re-frame/reg-event-db
 :set-active-panel
 (fn [db [_ active-panel]]
   (assoc db :active-panel active-panel)))

curlyfry15:03:59

So you wanted to include job in your dispatch, right? Try logging active-panel and I think you'll see that it just evaluates to :job-panel. You have to set up your parameter list correctly!

curlyfry15:03:46

Your event handler does not expect a job parameter as it is defined now, and no job is assocd anywhere in the db

PB15:03:43

Yes, it does. Would it make sense to create a different event handler?

PB15:03:07

I guess i would, at some point to find a good way of handling params passed to each route

curlyfry15:03:35

What do you mean by "yes, it does"?

PB15:03:48

Sorry. I meant in reply to Try logging active-panel and I think you'll see that it just evaluates to :job-panel

PB15:03:37

In essence, I could do this:

(re-frame/reg-event-db
 :set-active-panel
 (fn [db [_ active-panel params]]
   (assoc db :active-panel active-panel :params params)))

PB15:03:51

Then I would have access to the params through the :params key

PB15:03:59

Is this the correct way of doing this though?

curlyfry15:03:31

That should work for what you're trying to do! 🙂

curlyfry15:03:23

re-frame lets you choose how to do stuff like this this yourself, it's not coupled to any routing library

PB15:03:44

That's fair. I was wondering if there was a better way

PB15:03:01

It seems odd to update a "database" with my set of parameters

curlyfry15:03:05

You could possibly also use something like secretary/decode-query-params and just look at whatever value is in the url in the browser

curlyfry15:03:11

(secretary/decode-query-params (subs js/location.search 1))

PB15:03:07

I may investigate that. I apprecaite your help

PB15:03:05

I do have one question regarding correctness. Let's pretend I went with my current solution. Would it be more correct to add additional params to the :set-active-panel or to do another dispatch?

curlyfry17:03:52

I'm not sure, honestly. I think it's more a question of preference.

curlyfry17:03:18

I think I'd personally add more parameters to the same dispatch.

qqq15:03:48

I did something very stupid. Now, I get a react error of : "Error: Invalid arity: 1" clearly this is my fault with my Hiccup somewhere. Problem is: I have no idea where.

PB15:03:02

@curlyfry So one error I was making is that I needed to deref. However, moo now returns :job-panel. Is there a way to get the last element of the vector?

curlyfry15:03:20

I replied inline!

burke19:03:15

Hello everyone, I use the standard re-frame template with +routes. I have a route "/items/new" which opens a panel with a form for adding new items. If the user clicks on a save button I add the new element to the database and call "dispatch [:set-active-panel :items-index]" to redirect the user to a panel which shows all saved items. My problem is, that this does not change the route (url in the address bar). What is the right way to handle the panel change after clicking on the button?

caryfitzhugh19:03:54

i typically force everything through the router

caryfitzhugh19:03:27

so, after adding the element, you change the URL with ... can't remmber the function off hand, (secretary/dispatch!) or something like that

caryfitzhugh19:03:45

in the defroute, that is where you would dispatch the [:set-active-panel :items-index]

burke19:03:33

Thank you, yes the dispatch in the defroute was already defined but I did not know about the dispatch functionality of secretary. This should solve my problem - thank you 🙂

burke20:03:33

It seems as if secretary/dispatch! will only call the function which is defined via defroute, but will not change the url in the address bar

shaun-mahood20:03:54

@burke: https://github.com/yogthos/memory-hole/blob/master/src/cljs/memory_hole/routes.cljs might help as an example of how to use secretary and re-frame together

kishanov20:03:58

alternatively you can use bide (https://github.com/funcool/bide) which can be integrated with re-frame easily

kishanov20:03:55

we’re using it on a fairly large re-frame app, very easy to see all routes in 1 place + we have 2nd router for REST API calls

burke20:03:41

thanks for the help! @kishanov But this will only handle URLs which are navigated by the browser (a-href links or address bar). In my case the navigation should be invoked if the user clicks on a button (which has no links defined via html). So the missing part for me, was the accountant library which is used in the example from @shaun-mahood

kishanov21:03:23

@burke quick solution would be to define an event handler that can do that, something like this

(re-frame/reg-event-db
  ::redirect!
  (fn [db [_ name params query]]
    (let [ui-router (get-in db ui-router-db-path)]
      (set! js/window.location.hash (ui-path-for ui-router name params query)))
    db))

kishanov21:03:49

there is definitely cleaner way to write this handler, just showing a concept

kishanov21:03:59

or if you don’t want to have permalink for every view in your screen - just set something like :active-panel in db

kishanov21:03:17

we pretty much adopted the philosopy of keechma (https://keechma.com/guides/router/) for routing and translated it to re-frame.

owen21:03:43

wow, I never knew about accountant, that's so nice

burke21:03:58

@kishanov yes, thats similar how I've implemented it. The difference is, that I dont want to use "js/window....". I prefer having some kind of abstraction layer between my application and the "native" js calls - therefore I replaced the "set! js/window..." part with accountant/navigate!

isak22:03:50

nice tip about bide, this looks smarter than bidi

timgilbert22:03:23

There's also sibiro if you're looking for routing libraries that don't drive you insane with weird, unnecessary complexity: https://github.com/aroemers/sibiro

timgilbert22:03:06

One nice feature is that it works on the CLJ side as well if that's something you need

timgilbert22:03:03

Also there's pushy which is a nicer interface to the HTML5 history stuff: https://github.com/kibu-australia/pushy