Fork me on GitHub
#reagent
<
2016-08-25
>
stbgz18:08:59

hey guys is it possible to do an ajax call conditionally before rendering an component

stbgz18:08:50

(defn render-env-details [env env-name render?] (let [ data (r/atom nil) sanitaized-name (clojure.string/replace-all env-name #"_" "-")] (log "here") (d/get-env-data sanitaized-name data) (fn [] (if render? [:p (-> @data keys)] [:p "nothing to see"]))))

stbgz18:08:42

I only want to do the (get-env-data if render is set, render is another atom. The problem I’m having is that the atom never updates

gadfly36118:08:59

@stbgz this is not working with your specific example, but think it might be helpful:

(defn bar [ratom arg1]
  (get-baz arg1)
  (fn []
    (let [some-data (:some-data @ratom)]
      [:p some-data])))

(defn foo [ratom arg1]
  (let [render? (:render? @ratom)]
    [:div
     (if render?
       [bar ratom arg1]
       [:p "nothing to see"])]))

gadfly36118:08:56

if you put the get-env-data call in the bar component, then it will only run on component-will-mount (for bar) if the render? is true

stbgz18:08:07

(defn render-env-details [env env-name render?] (let [ data (r/atom nil) sanitaized-name (clojure.string/replace-all env-name #"_" "-")] (if render? (do (d/get-env-data sanitaized-name data) [:div.p "some-data"]) [:div.p "no"] )))

stbgz18:08:13

I am getting close

stbgz18:08:05

that renders every time the render atom changes, which is triggered through a mouse event

stbgz18:08:55

the problem comes when I do this: [:div.p (str @data)] instead of “some-data"

stbgz18:08:09

it goes into a infine rendering loop

gadfly36118:08:18

try to pull it out like i showed

gadfly36118:08:44

think your do block may run every time render-env-details is rendered

gadfly36119:08:00

@stbgz If you run this, you can see that "Getting stuff" only prints to the console once, no matter how many times you update the the atom.

stbgz19:08:35

I am still learning different parts of reagent

gadfly36119:08:18

no problem! yeah, it is a a subtlety. the difference between the above snippet and writing foo like this

(defn foo [ratom]
  (let [render? (:render? @ratom)]
    [:div
     (if render?
       (do
         (println "Getting stuff")
         (let [number (:number @ratom)]
           [:p number]))
       [:p "nothing to see yet"])]))
Is just that the former runs the println on bars component-will-mount lifecycle, and the latter runs the println every time on foos render lifecycle

lsenta20:08:01

Hi guys, has anyone implemented drag&drop for reagent on mobile? I’m looking at jqueryui + the touch punch plugin, but the import order is so specific, I’m not sure where to start (http://touchpunch.furf.com/)

gadfly36120:08:33

@lsenta Take a look at at the draggable recipe in reagent cookbook (https://github.com/reagent-project/reagent-cookbook/tree/master/recipes/draggable) ... if you add the UI Touch Punch to index.html, should work

lsenta21:08:36

@gadfly361 what I don’t understand is that the example includes the raw js files, which means that this will break as soon as I compile in release mode with optimizations

lsenta21:08:34

That’d be solved by using a cljsjs package, but then I’m pretty sure the touch punch code is not imported at the right time

gadfly36121:08:36

@lsenta The cookbook recipe doesn't include the raw js files, they are the min version thru a cdn. I did include the touch punch code directly tho. The example also has you compile with minified version, and in this specific case, no externs were needed. You can see other recipes that do include externs tho. Cljsjs is great, and it has jquery-ui if you wanted to use it. I prefer hand rolling externs tho, makes me feel like i know what is used in my code - just a preference.

mihaelkonjevic21:08:48

@lsenta I’ve encountered weird behavior when combining jquery-ui and react, basically re-rendering on drop was wonky unless the list items had unique keys. This is the project in question (when you click on links in the sidebar, you’ll create sortable columns) http://retroaktive.me/mapillary/ - and here is the hack I did to make it work as expected https://gist.github.com/retro/9bdcc432082c76bf09905eb52bfad7e2#file-sortable-cljs-L9

lsenta22:08:23

I got it working: used the cljsjs package for jquery-ui, and included the touchpunch code after my app.js, that was easier than I expected

lsenta22:08:44

<script src="js/compiled/app.js"></script>
<script src="/assets/jquery.ui.touch-punch.min.js"></script>
<script>frontend.core.init();</script>

lsenta22:08:35

Thanks for the guidance @gadfly361, tbh everything that touches the cljs compiler, externs and cljsjs has been more of an annoyance so far, I’m trying to avoid it as much as possible. 😕

lsenta22:08:35

And thanks for the warning @mihaelkonjevic! I encountered something similar when working with reframe subscriptions, it’s nice to have your code as a starting point 🙂

gadfly36122:08:30

@lsenta You may have seen this, but just in case, it is a great tutorial on javascript dependencies. Think it walks thru externs really well: https://github.com/clojure/clojurescript/wiki/Dependencies