Fork me on GitHub
#reagent
<
2019-05-23
>
vinurs07:05:31

this is the error msg

borkdude16:05:25

what’s :<> again in Reagent? it’s hard to google for

lilactown16:05:59

React fragment

lilactown16:05:00

@haiyuan.vinurs you’ll have to use (r/as-element item-title)

lilactown16:05:07

(defn main-page
  []
  [:div
   [:> Accordion {:allowMultiple true}
    [:> AccordionItem
     {:titleTag "div" :title (r/as-element [item-title])}
     [item]]]])

borkdude16:05:55

aah, fragments. TIL

juhoteperi18:05:12

Ah, I had forgotten to mention Fragments in React Features documentation page, added now: https://github.com/reagent-project/reagent/blob/master/doc/ReactFeatures.md#fragments @borkdude

👍 8
manandearth19:05:59

just posted this in #re-frame. likely better here..

lilactown19:05:17

@adamgefen not enough information to help you

lilactown19:05:42

it's not clear how you're trying to update your component after the AJAX request completes

jimberlage19:05:02

You probably need to do something in :component-did-mount or :component-will-unmount

jimberlage19:05:15

I can probably give you a toy example in a bit

manandearth19:05:15

I do create a component-did-mount function.. which works fine with static data

(defn homes-did-mount []
  (fn []
    (let [atm (r/atom  nil)
          map (.setView (.map js/L "map") #js [36.253 -5.965] 17)
          centered (-> (.tileLayer js/L  URL-OSM
                                   (clj->js {:attribution attribution
                                             :maxZoom     19}))
                       (.addTo map))]
      (fetch-data! atm)
      (for [e @atm]
        (-> (circle e)
            (.addTo map))))))

manandearth19:05:25

excuse the detailed example ...

manandearth19:05:25

the fetch-data calls the ajax

manandearth19:05:38

(GET "/transit" {:response-format    :json
                   :keywords? true
                   :handler   (fn [response] (reset! a (transform-df response)))}))

manandearth19:05:00

(again sorry for the details, I'm drowning in code...

jimberlage19:05:06

Ah. You may need (doseq [e @atm] ...) instead of for

manandearth19:05:26

yes yes... I did use doseq

jimberlage19:05:27

The body of that for statement might not be evaluated

manandearth19:05:51

same with doseq.

manandearth19:05:10

I am not experienced with calls from the client side so I was thinking that perhaps it's some ajax peculiarity ( i.e that I'm doing something wrong.. 🙂)

jimberlage19:05:32

If you’re using re-frame I’d make an event that handles the response coming back

jimberlage19:05:49

Rather than just reset!-ing that atom directly

jimberlage19:05:28

Actually I don’t think you need atoms for this at all. I’ll give a code snippet in a bit

👍 4
jimberlage19:05:30

(let [leaflet-map (.map js/L "map")]
  (doseq [e (transform-df response)]
    (.addTo leaflet-map (circle e))))

jimberlage19:05:54

That should happen when fetch-data! returns

manandearth19:05:06

just consider that the atom doesn't update in this component (tested with print) and it does in a simple reagent component (div)

jimberlage19:05:19

Since leaflet is managing state on its end you don’t need to try and have react handle it

jimberlage19:05:25

Your for/doseq statement always runs before your AJAX call returns. And since component-did-mount only happens once, you never actually get your update

manandearth19:05:27

where then does this doseq go for the fetch! to happen first?

jimberlage19:05:14

(defn homes-did-mount []
  (fn []
    (let [atm (r/atom  nil)
          map (.setView (.map js/L "map") #js [36.253 -5.965] 17)
          centered (-> (.tileLayer js/L  URL-OSM
                                   (clj->js {:attribution attribution
                                             :maxZoom     19}))
                       (.addTo map))]
      (fetch-data! atm))))

jimberlage19:05:05

(GET "/transit" {:response-format    :json
                   :keywords? true
                   :handler   (fn [response]
                                (let [leaflet-map (.map js/L "map")]
                                  (doseq [e (transform-df response)]
                                    (.addTo leaflet-map (circle e)))))}))

jimberlage19:05:29

Putting it in that callback is the only way to ensure you add the points after your AJAX call completes

👍 4
manandearth19:05:34

missing one more step @jimberlage. my then class is defined here:

(defn home 
   []
    (r/create-class
     {:display-name        "reactive-map"
      :component-did-mount (ajax-did-mount)
      :reagent-render      (fn [] [:div#map {:style {:height "640px" :width "1024px"}}])})))

manandearth19:05:55

and home then is just added to an (r/render [:div,,,])

jimberlage20:05:36

What does that code look like?

manandearth20:05:53

(defn mount-root []
  (r/render
   [:div
    [:div
     [home]
     [testing-homes]
     [:h1 "Distibution of nests:"]
     [oz-viz2]]]
   (.getElementById js/document "app")))

jimberlage20:05:59

I’d start by logging (transform-df response) to ensure it’s not empty

👍 4
manandearth20:05:15

the doseq loop doesn't get evaluated. but the same ajax fetch! call in a form 1 does, so the problem is in the did-mount

jimberlage20:05:23

But the handler is definitely getting stepped into? Granted I didn’t see all the code but cljs-ajax has an :error-handler callback option that may be getting run instead of your handler

manandearth20:05:07

now I'm getting some XhrIo,,, errors so I'll take care of the externs and get back once I solve that.

manandearth20:05:59

Thank you very much. It was just a bit of a tweak.

manandearth20:05:16

Really appreciate it 😃 @jimberlage

😎 4
felipebarros21:05:34

Is there something like a create-react-app equivalent for a simple reagent app based on CLI Tools?