Clojurians Log v2

Hi, is this the recommended way of rendering a minutes since component?

(defn mins-since [start-time]
  (let [mins (r/atom (mins start-time))]
    (fn [start-time]
      (js/setTimeout #(swap! mins inc) 60000)
      [:span @mins])))

IIRC the render function may potentially be called multiple times, so I wouldn't do it like that. Reagent has a very similar example right on its landing page: https://reagent-project.github.io/

Search for the words "Hello world, it is now".

Thought so, is with-let a better use here?

If you really want to avoid having a global counter, then I think you need to create a proper class component, use setInterval, and dispose of that interval once the component is unmounted.

Instead of yourself counting the minutes, trigger update every x seconds, and calculate difference between start and end timestamps.

https://github.com/metosin/komponentit/blob/master/src/cljs/komponentit/timeago.cljs#L49 this is maybe unnecessarily too complex, but might give some idea. with-let is probably good way to create and destry interval.

(It uses timeout instead of interval to optimize how often it is called, based on the previous difference.)

I got test coverage reports working with Cljs tests: https://github.com/reagent-project/reagent/pull/484 🎉

I agree, that's a better approach. Thanks

How should I translate startAdornment in the following React code into Reagent?

<TextField
        className={classes.margin}
        id="input-with-icon-textfield"
        label="TextField"
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <AccountCircle />
            </InputAdornment>
          ),
        }}
      />

I was trying to have to have something like

[:> TextField {:input-props {:startAdornment (r/create-element InputAdornment #js {:position "start"} "Test")}}]

Also the following does not work

(r/as-element [:> InputAdornment {:position "start"} "Test"])

From API documentation, startAdornment should be a node: https://material-ui.com/api/input/

inputProps != InputProps. Stupid naming IMO, given that inputProps are actually attributes. :input-props is translated into inputProps. And you need :InputProps.

Ya, thx.

I was confused since read-only property was working with both inputProps and InputProps, so I didn't consider that there is a problem with this.