anyone using secretary for routing.? I’m trying to figure how to set a route programatically

I use it in combination with accountant for html5 history routing

yeah I’ve got a project that was created with the luminus starter, have a few routes, etc setup with the goog.History stuff. Working fine when I say click to “#/help”, but don’t see say an api where I can programatically (go "help") or something

I think you do (secretary/dispatch! path)

with accountant you do (accountant/navigate! path)

ok. let me try that, I’m just getting back to this, but I think when I tried it, the route function fired but the url didn’t change

If you wanted to do it manually, you could

(defn set-hash! [hash]
  (set! (.-hash (.-location js/window))
        (str "#" hash)))

I use secretary and do it that way ... I dont bother with the built in stuff lol

yeah window.location was where I was going next lol

ah heck, now I just remember the other problem I was having lol. so, anyone using it with re-frame? i’m trying to figure out the best way to make all that work together. I have a say a :current-page key in the db, when you first hit the app it’s set to :login. in my login sucess handler event, I want to set :current-page :home. So that works fine of course, and my ‘top’ render function displays the current page, etc etc. But the url hasn’t changed at that point. So i guess that’s the real question. Should be calling (set-hash..) or (dispatch.. as a co-effect or something ?

@eoliphant you can also ask about re-frame in #re-frame and you may get more insight. If it is re-frame oriented of a question. Just in case you didn’t know

yeah i just thouught I should maybe post it there lol

@eoliphant I'd create a new effect (not a coeffect)

(defn- scroll-to-top! []
  (.scroll js/window 0 0))

(defn- set-hash! [hash]
  (set! (.-hash (.-location js/window))
        (str "#" hash)))

(rf/reg-fx
 :set-hash
 (fn [hash]
   (set-hash! hash)
   (scroll-to-top!)))

ah, havent really messed with my own effect handlers so far. ok cool thx. So though, that would be ‘called’ from the map returned by an event-fx ?

Yup :)

one more quick question 😉 this my current handler

(reg-event-db
  :set-active-page
  (fn [db [_ page]]
    (assoc db :page page)))

(secretary/defroute "/login" []
                    (rf/dispatch [:set-active-page :login]))

I'd separate them. Have an event-fx that sets just the hash ... And then have your route dispatch to set the active page like you have it

ah right ok, that makes more sense

Hey all, I have a question about dynamic children and passing keys: In React, one could do this:

var ResultList = () => (
      <ul>
        {this.props.results.map(function(result) {
           return <ResultItem key={result.id} result={result}/>;
        })}
      </ul>
);

var ResultItem = () => (
      <li>return {this.props.result};</li>
);

hmmm it seems that the way to make this happen would be

(defn result-list 
   []
   [:ul
     (for [item items)
        ^{:key (:id item)}
        (result-item )])

Do I have to use the meta macro or is it possible to pass :key as an argument like in react? For example:

(for [item items)
    (result-item {:key (:id item) } )])

@tkjone As far as I know, using the meta variant is the idiomatic/most common way of doing this

From https://reagent-project.github.io/

(defn lister [items]
  [:ul
   (for [item items]
     ^{:key item} [:li "Item " item])])

Yeah, I saw that way of doing it..it just struck me as out of place considering that it looks so different from how arguments would be passed, but I can see that it is just an idiom I would need to get used to

I'm a lot more used to reagent than react at this point, but I quite like the separation. 🙂 The :key is metadata that react uses for optimization, and the arguments to the function/component are the ones that it actually uses to render itself.

Also, a heads up: You'll want to use square brackets rather than parens when calling reagent components to avoid unneeed re-rendering: https://github.com/reagent-project/reagent/blob/master/docs/UsingSquareBracketsInsteadOfParens.md

What’s the best way to run a reagent app in production? I’ve always started with a full-stack template, but this is just a re-frame app, so there’s no jetty built in.

Express?

Good tip. Thanks @curlyfry

@tkjone I suspect it is done that way because “props” are optional in the reagent paradigm. If the first argument is a map, then it is treated as “props”. I suspect the meta variant is done so that you can skip the props map if you need to.

That makes sense. Its one of those React->Reagent things I need to wrap my head around

The distinction is actually nice

Because I imagine it would be odd for beginner to see that key is passed as a prop, but never explicitly used in the component it is being passed to

@jmckitrick I don’t think there is anything specific to reagent in terms of running it in production. I will run mine on express but that’s because I have a JS api server already.

yes i agree, the way key is used is strange

I actually hate that reagent calls itself a “simple react binding” or whatever it says on the readme. Reagent is quite complicated and subtle. The code you write is elegant, but pretending it is simple is a mistake.

@lee.justin.m I guess my question is how to start the project in production mode locally. Silly question, I know, but I’ve not deployed front-end-only apps before.

well that’s more a question of what tool chain you are using. i use shadow-cljs, so I’d ask for a release build, which will create a javascript bundle that I can just copy to the public resouces directory of an express server

lein should have some way of doing a release too.

if you use jetty, I think some folks like to make an uberjar, which zips up your built code and all static resources (html, images, etc..).

I don’t use java if i can help it so you’ll have to do some investigation on that

Ah, I think I found something…

I appreciate your help!

hello! running into some issues getting a component to re-render based on state changes

the value of the input field is re-rendered (using reagent form), but the :class key seems to only run once.

@mcama200 are you sure the state is getting updated the way you think it is? try sticking a (js/console.log error) as the first line of the let block just to make sure

oh. change those calls to inputs to use square brackets

same thing with the dropdown