re-frame 2019-08-06 | Slack Archive

Ashley Smith12:08:29

Hey everyone, I need some help. I'm using https://github.com/oconn/re-frame-routing by @oconn and I'm trying to improve my current routing. My current goal is to have a dynamic URL that I don't have to hard code - I want to do things when the user visits /forum/page-2 or /post/somepostid123. On my back end, I am using compojure and that allows routes that look like this: (c/GET "/forum/page-:page" [page] (validate page db/get-forum-page)), and I was wondering if there was anything like this for CLJS with re-frame routing so what I can show different pages depending on the URL without writing them in advance. Here's what I have so far with regards to routing:

;; Determine what URLs match to what view
(def routes 
  ["/" {"" :forum
        "forum" :forum
        "tags" :tags
        "members" :members
        "admin" :admin}])

;; Import routing events
(rfr/register-events {:routes routes})

;; Choose which component function to use depending on route
(defmulti get-page-content identity)
(defmethod get-page-content :forum [] forum/forum)
(defmethod get-page-content :tags [] tags)
(defmethod get-page-content :members [] members)
(defmethod get-page-content :admin [] admin)
(defmethod get-page-content :default [] not-found)

Thank you in advance for your help! I'm going to go for a shower quickly but I'll be back in a couple of minutes!

oconn12:08:44

You can do something like

(def routes 
  ["/" {"" :forum
        "forum" :forum
        "tags" :tags
        "members" :members
        "admin" :admin
        "posts" :posts
        ["posts/" :post-id] :post}])

oconn12:08:03

and then re-frame-routing will pass the path params into the container view for you.

oconn12:08:20

@ashley It’s built ontop of https://github.com/juxt/bidi - so you’ll want to reference their docs for constructing routes.

Ashley Smith12:08:50

ohhhh thank you!!

Ashley Smith15:08:46

@oconn thank you for your help, I got it working. One thing I am struggling though, is that pagination doesn't seem to actually change the look of the page.

(def routes 
  ["/" {"" :forum
        "forum/"    { "" :forum
                      ["page-" [#"\d+" :page-number]] :forum}
    ....

(defmulti get-page-content identity)
(defmethod get-page-content :forum [] forum/forum)
...

Having a tag href to (str "/forum/page-" p) doesn't change the view of the page, is it because they're all using the same forum route? I tested it by separating the / and /forum/ from /forum/page-n and introduced :forum-page, but this didn't seem to do anything either. Any ideas?

oconn15:08:48

Does hard page refresh show the correct pages?

Ashley Smith15:08:07

It does indeed

oconn15:08:39

So it sounds like the view is possibly implementing a form-2 component?

Ashley Smith15:08:43

But its weird as using a tags like normal works usually, its just the pagination links I have (presumably because its going from :forum to :forum ?

oconn15:08:00

Can you share the forum view

Ashley Smith15:08:09

Sure. Let me make a gist

Ashley Smith15:08:47

https://gist.github.com/Ashe/59f9c6ff0fa7f1cdecc7f60b76d2f775

Ashley Smith15:08:53

So route.cljs is the first port of call

Ashley Smith15:08:09

routed-page combines common elements like the navbar, footer, notifiations and finally the dynamic body as selected by get-page-content. forum gets selected by get-page-content and draws everything specific to the forum browsing pages

Ashley Smith15:08:19

Thank you for all of your help by the way!

oconn15:08:09

So my guess is that f/dispatch-fetch-posts is only called once for your first page load. If there is no logic that re-mounts this view then on nav there will be no change I believe. If you move {:keys [route-key path-params query-params]} into the function params on line 7 and log path-params on line 8 and also on line 6 you will probably see two logs printed on initial render and one log line 8 on page navigation.

oconn15:08:22

So I don’t think additional network requests are being made.

Ashley Smith15:08:48

that would make sense - if the db isn't being changed, then there'd be no reason to redraw

Ashley Smith15:08:19

You nailed it

Ashley Smith15:08:20

thank you so much

Ashley Smith15:08:29

I need to remember how these views work sometimes

oconn22:08:11

Np glad it worked

akond15:08:23

is animation even possible in re-frame?

oconn15:08:24

re-frame gives you state management - reagent (react wrapper) is your view layer which does support animations.

oconn15:08:50

I use react-transition-group but you can probably try something like https://github.com/timothypratley/reanimated

akond15:08:17

thank you. i'll give it a go

rende1116:08:23

Hello! Can someone help? I have some problems with https://github.com/Day8/re-frame-async-flow-fx , can it used in cljc files?

2019-08-06

Channels