Fork me on GitHub
#reagent
<
2020-03-22
>
wimomisterx11:03:45

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])))

p-himik11:03:42

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/

p-himik11:03:57

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

wimomisterx12:03:53

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

p-himik12:03:50

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.

juhoteperi14:03:08

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

juhoteperi14:03:12

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.

juhoteperi14:03:37

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

wimomisterx15:03:50

I agree, that's a better approach. Thanks

juhoteperi14:03:43

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

👏 4
Pavel KlavĂ­k19:03:32

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>
          ),
        }}
      />

Pavel KlavĂ­k19:03:23

I was trying to have to have something like

[:> TextField {:input-props {:startAdornment (r/create-element InputAdornment #js {:position "start"} "Test")}}]
But I am not getting anything rendered.

p-himik19:03:09

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

Pavel KlavĂ­k19:03:10

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.

Pavel KlavĂ­k19:03:01

Also the following does not work

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

Pavel KlavĂ­k19:03:43

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