Fork me on GitHub
#reagent
<
2020-03-13
>
frozar11:03:49

Hi, does anyone use the last version of reagent 0.10.0 ? Because after this update on my tiny project, I realised that the function http://reagent.com/render doesn't do the job anymore. In the result page, the tag "app" is empty, and I wonder if I miss something... I also change the require in the beginning of my file obviously (:require [reagent.dom :as reagent])

ouvasam12:03:30

you could use it like this :

(require [reagent.core :as r]
[reagent.dom :as rd])
(rd/render ...)

ouvasam12:03:35

reagent .core is always needed

frozar13:03:10

Thank you for the rely. Even with these indications I experience the same issue with the render function...

ouvasam13:03:36

do you have some code ?

frozar13:03:28

Yes, I have, the time I make a commit and I send it to you 😉

frozar13:03:39

I'm generating svg hiccup node in my project, and after a quick test, I think that my code is slightly buggy. I have to check it. By the way my project is : https://github.com/frozar/roughcljs The buggy code is not commited on the repo, not yet at least

frozar14:03:06

Ok, it was a silly mistake in my code. I just learn there is a difference between using '(...) or (list ...) 🙃

frozar14:03:00

Also the namespace reagent.core is not required to make the render function works. The namespace reagent.dom is enough 😉

jplaza11:03:13

Hi! I just created a demo project with the default lein template and changed the version to 0.10.0 and it’s working

frozar13:03:36

Thank for the effort @jplaza,as I still experiment issue with render function, I will create a small shadow-cljs based example to check this out.

frozar13:03:33

I made a basic example of reagent with shadow-cljs and the render function works well 🙂

jplaza13:03:57

:thumbsup:

worlds-endless15:03:33

Does anyone have a working "confirm you want to leave the page?" solution in Reagent or re-frame for when they are leaving (link or back-button) a page that has data on it?

p-himik15:03:07

It's trivial - just start listening to the beforeunload event when there's data and stop listening to it when there's no data.

worlds-endless16:03:52

I'm not familiar with "stop listening" in js. I take it it doesn'tm atter much where you put this js?

p-himik16:03:08

It matters when that code is executed. Where it physically ends up in the JS bundle doesn't matter.

worlds-endless20:03:43

I tried this before asking my question and took your suggestion as a sanity check and tried again. Unfortunately, the beforeunload event doesn't seem to fire when navigating SPAs; I could only get it to fire when I hit "refresh".

p-himik21:03:38

Ah, I see, you also want to handle situations when the HTML5 history is changed. It's this event: https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event But I don't think you can cancel it. And even if you could, it would not be robust. E.g. consider this function:

(defn set-page [page-id]
  (reset! current-page page-id)
  (set-html5-history-state (get-page-url page-id)))
With this example, even if you were able to cancel the event, the current-page would now be in an inconsistent state. A robust approach is to do it at your application's level and not with JS events.

mbarillier18:03:06

seeing weirdness on safari with reagent/re-frame + bootstrap:

[:select.form-control {:on-click #(js/alert "clicked")} ...items...]
works on linux chrome and firefox but doesn't work on safari. (this is just a debugging on-click handler, the real one gets the id and does something useful.) is there a known issue with bootstrap/react/reagent on mac?

p-himik18:03:21

Just a guess, and probably based on some outdated knowledge - try replacing #(js/alert ...) with (fn [] (js/alert ...) nil).

mbarillier18:03:05

unfortunately, nope: didn't work. :)

p-himik18:03:06

The next guess is that WebKit browsers just don't like having :on-click on :select. Dunno.

mbarillier20:03:45

second guess was correct: I changed :on-click to :on-change and it works on linux+mac/chrome+safari+firefox. thanks!

otwieracz20:03:02

I am trying to create formatter component for React Data Grid in Reagent: https://adazzle.github.io/react-data-grid/docs/examples/cell-formatting

otwieracz20:03:09

Each of my columns definition looks like: ^{:key id} {:key id :name text :editable true :formatter formatter}) and I thought that simple (defn formatter [data] (str (.-value data))) will be enough

otwieracz20:03:32

Howver, trying to use any formatter produces error: react-dom.development.js:13436 Uncaught Error: Objects are not valid as a React child (found: object with keys {key, val, __hash, cljs$lang$protocol_mask$partition0$, cljs$lang$protocol_mask$partition1$}). If you meant to render a collection of children, use an array instead.

p-himik20:03:03

Can you provide the rest of the code that instantiates ReactDataGrid?

otwieracz20:03:30

(defn formatter [data]
  [:div (str (.-value data))])

(defn- columns
  [notes tags]
  (let [number-of-columns (reduce max (map (comp count #(:note/objects %)) notes))
        columns-tags-list (columns-tags notes tags)
        column-names (seq-overlay (range 0 number-of-columns)
                                  (map #(string/join ", " %)
                                       columns-tags-list))]
    (map (fn [id text]
           ^{:key id} {:key id :name text :editable true :formatter formatter})
         (range))
    column-names))

(defn- row-getter
  [notes i]
  (when (>= i 0)
    (->> (nth notes i)
         (:note/objects)
         (zipmap (range)))))


(defn index []
  (let [notes @(rf/subscribe [:notes/notes])
        tags @(rf/subscribe [:tags/tags])]
    [:> ReactDataGrid
     {:columns (columns notes tags)
      :rowGetter (partial row-getter notes)
      :rowsCount (count notes)
      :enableCellSelect true}]))

otwieracz20:03:39

That's everything that's important.

p-himik20:03:03

Your columns function just returns column-names.

p-himik20:03:31

Also, your row-getter returns a map of integers to the elements in :note/objects for each row. But ReactDataGrid expects it to be a JS object.

p-himik20:03:12

(TBH, I don't recall if Reagent converts props from CLJS to JS recursively for :> components)

p-himik20:03:32

Also, you don't need ^{:key id} in there since what you return is not a React child.

p-himik20:03:15

Start with the smallest JS example possible and convert it to CLJS as is, without anything advanced. Then, gradually make it more "CLJS-ey", while making sure that it still works.

otwieracz20:03:03

Everything works fine if only I remove :formatter formatter from column map.

otwieracz20:03:07

Fomratter is the issue here.

otwieracz20:03:48

I just noticed that I made a mistake in this paste. There was :formatter true where it should be :formatter formatter.

otwieracz20:03:49

Ok - sorry for bad examples.

otwieracz20:03:45

(defn formatter [data]
  (let [props (.-value data)]
    [:div (str props)]))

(defn- columns
  [notes tags]
  (let [number-of-columns (reduce max (map (comp count #(:note/objects %)) notes))
        columns-tags-list (columns-tags notes tags)
        column-names (seq-overlay (range 0 number-of-columns)
                                  (map #(string/join ", " %)
                                       columns-tags-list))]
    (map (fn [id text]
           {:key id :name text :editable true #_#_:formatter formatter})
         (range)
         column-names)))

(defn- row-getter
  [notes i]
  (when (>= i 0)
    (->> (nth notes i)
         (:note/objects)
         (map str)
         (zipmap (range)))))


(defn index []
  (let [notes @(rf/subscribe [:notes/notes])
        tags @(rf/subscribe [:tags/tags])]
    [:> ReactDataGrid
     {:columns (columns notes tags)
      :rowGetter (partial row-getter notes)
      :rowsCount (count notes)
      :enableCellSelect true}]))
this works fine, while this:
(defn formatter [_data]
  [:div "foo"])

(defn- columns
  [notes tags]
  (let [number-of-columns (reduce max (map (comp count #(:note/objects %)) notes))
        columns-tags-list (columns-tags notes tags)
        column-names (seq-overlay (range 0 number-of-columns)
                                  (map #(string/join ", " %)
                                       columns-tags-list))]
    (map (fn [id text]
           {:key id :name text :editable true :formatter formatter})
         (range)
         column-names)))
fails with:

p-himik21:03:45

OK, so you also fixed the columns returning just column-names. :) What you see is caused by the fact that :formatter is expected to be a function that returns a React component. But you provide it a function that returns a CLJS vector. Read this: https://github.com/reagent-project/reagent/blob/master/doc/InteropWithReact.md#creating-react-components-from-reagent-components

otwieracz21:03:51

Thank you! I've expected something like that 🙂

otwieracz21:03:55

Hmm, but somehow :value in props end up as string..

otwieracz21:03:39

And everything is working. Thank you very, very much!

👍 1