Fork me on GitHub
#reagent
<
2016-05-14
>
gadfly36118:05:36

@lewix probably need to update your handler.clj file

lewix18:05:59

I must say that getting started with reagent can be frustrating as opposed to react/redux there are so many moving parts

lewix18:05:22

@gadfly361: yup that was handler.clj

gadfly36118:05:56

the reagent template that you are using is great for making a production-ready applications. However, there are lighter-weight templates out there that you may find useful when starting out. For example: https://github.com/gadfly361/reagent-figwheel

gadfly36118:05:38

for what you are doing you may want to try: lein new reagent-figwheel myproject +routes

gadfly36118:05:33

if you use that, there is no handler - it is purely client-side

lewix18:05:56

@gadfly361: I want to basically go over the very basic examples on the reagent page, then graduallly make more complex apps

lewix18:05:38

@gadfly361: I'll test the water for about a month before deciding whether I stick with react/redux or i go with clojurescript

gadfly36118:05:51

@lewix: if you are wanting to go over basic examples, then I think you should do lein new reagent-figwheel myproject. I find it to be the smallest amount of setup to get reagent and figwheel working with no other bloat. (and i don't think cljs development is the same without fighweel - it is awesome!)

lewix18:05:30

gadfly361: I am using figwheel

lewix18:05:54

gadfly361: I just find it frustrating to make the connection between all those libs in a given template

lewix19:05:02

@gadfly361: i,e I just asked a veteran clojure guy what I'm doing wrong,and he couldn't figure that out because he didn't know what secretary was

lewix19:05:35

how does reagent compare to hoplon?

gadfly36119:05:19

@lewix: Yeah, that makes sense, i understand where you are coming from. I do encourage you to check out reagent-figwheel (instead of the template you are currently using, reagent-template). By default it is bare bones, and does not come with any unnecessary libs such as secretary - it only comes with reagent and figwheel and is meant for people wanting to 'check out' reagent 🙂

lewix19:05:40

@gadfly361: thank you I'll make sure to use it

lewix20:05:21

;(defn lister [items]
;  [:ul
;   (for [item items]
;     ^{:key item} [:li "Item " item])]

(defn lister [items]
  [:ul
    (map #([:li "Item " %]) items)])

How would you rewrite this with a map?

lewix20:05:05

@madstap: thanks - it makes sense

lewix20:05:11

(defn lister [items]
  [:ul
    (map #(identity ^{:key %} [:li "Item " %]) items)])

lewix20:05:19

@madstap: where did you get that snippet? care for a link?

madstap21:05:22

@lewix I wrote it just now....

madstap21:05:42

I think the style guide has something about this

lewix21:05:27

madstap: I see thanks/ so it explains why they stick to the for form in the doc

madstap21:05:44

not exactly the same situation, but close. I think either the for version or the (map (fn [])) version will be less surprising for other people looking at the code

lewix22:05:13

(defn timer-component []
  (let [seconds-elapsed (r/atom 0)]
    (fn []
      (js/setTimeout #(swap! seconds-elapsed inc) 1000)
      [:div
       "Seconds Elapsed: " @seconds-elapsed])))
how to do the same thing with react lifecycle methods?

lewix22:05:01

(def seconds-elapsed (r/atom 0))
(defn ^{:component-did-mount 
        (fn []
          (js/setTimeout #(swap! seconds-elapsed inc) 1000))}
      timer-component []
  [:div [:h2 "This is a timer"]
    "Seconds Elapsed: " @seconds-elapsed])
;; my attempt

gadfly36123:05:08

@lewix: try this:

(def seconds-elapsed (r/atom 0))

(defn render [ratom]
  [:div "Seconds Elapsed: " @ratom])

(defn set-timeout! [ratom]
  (js/setTimeout #(swap! ratom inc) 1000))

(defn component [ratom]
  (r/create-class
   {:reagent-render       #(render ratom)
    :component-did-mount  #(set-timeout! ratom)
    :component-did-update #(set-timeout! ratom)}))

gadfly36123:05:26

And then use it like:

[component seconds-elapsed]

lewix23:05:17

I'll check it out

lewix23:05:21

in the meantime this version work:

lewix23:05:26

(def seconds-elapsed (r/atom 0))
(def set-timeout!
  (js/setInterval #(swap! seconds-elapsed inc) 1000))

(defn
  ^{:component-did-mount (set-timeout!)}
  timer-component []
    [:div [:h2 "This is a timer"]
      "Seconds Elapsed: " @seconds-elapsed])

lewix23:05:46

@gadfly361: have you tried your version?

gadfly36123:05:42

here are the steps to reproduce: 1) create a new project: lein new reagent-figwheel myproject 2) replace the contents of core.cljs with:

(ns myproject.core
  (:require [reagent.core :as reagent]))

(def seconds-elapsed (reagent/atom 0))

(defn render [ratom]
  [:div "Seconds Elapsed: " @ratom])

(defn set-timeout! [ratom]
  (js/setTimeout #(swap! ratom inc) 1000))

(defn component [ratom]
  (reagent/create-class
   {:reagent-render       #(render ratom)
    :component-did-mount  #(set-timeout! ratom)
    :component-did-update #(set-timeout! ratom)}))

(defn reload []
  (reagent/render [component seconds-elapsed]
                  (.getElementById js/document "app")))

(defn ^:export main []
  (reload))
3) start up figwheel, lein figwheel dev 4) go to localhost:3449

lewix23:05:57

I see you use both did-mount and did-update

lewix23:05:04

your version simplified:

gadfly36123:05:06

i did, so if i didn't use component-did-update, it would only count to 1 because component-did-update only happens once

lewix23:05:10

(def seconds-elapsed (r/atom 0))
(def set-timeout!
  (js/setTimeout #(swap! seconds-elapsed inc) 1000))

(defn
  ^{:component-did-mount (set-timeout!)
    :component-did-update (set-timeout!)}
  timer-component []
    [:div [:h2 "This is a timer"]
      "Seconds Elapsed: " @seconds-elapsed])

lewix23:05:31

You said that did mount take a reference but it seems to work?

gadfly36123:05:18

so (set-timeout!) isn't how you want to go, there are extra parens there

lewix23:05:49

javascript setTimeout is a function

lewix23:05:29

so both should work I think; with or without the extra parens

gadfly36123:05:49

so regarding component-did-mount and component-did-update, it works like this: component renders --> executes component-did-mount function.... now because our component-did-mount function does a swap! on our ratom and it is dereferenced (i.e., @ratom), it will now executre the function in component-did-update, which in turn will swap! and go into a loop calling itself over and over

lewix23:05:04

@gadfly361: did you mean "execute the function in component-did-update" ?

lewix23:05:26

@gadfly361: How does it work when the component returns a function?

gadfly36123:05:59

yeah i did, thanks - should be edited above now

lewix23:05:11

Also, I assume that your example can be rewritten as such:

(defn component [ratom]
  (reagent/create-class
   {:reagent-render       #(render ratom)
    :component-did-mount  (set-timeout! ratom) ;;(set-timeout!) returns a function
    :component-did-update (set-timeout! ratom)}))

gadfly36123:05:25

also, the example you gave above shouldn't work - i just tried it and it doesn't appear to increment past 1 (in the case of with parens, or at all in the case without).

gadfly36123:05:44

the # is necessary in create-class because component-did-mount needs a function reference, to be executed at a later time. without the #, it will execute the function right then and there .. and that doesn't return a function, bc it will in turn execute the timeout immediately

lewix23:05:21

@gadfly361: that's so weird - it works fine on my side

jfntn23:05:15

Hi folks, I’m trying to model an app-db atom to keep track of component selection, I’ve played with the two following approaches and they both have issues:

{:search
 {:tabs
  {:selected [:foo]
   :foo {...}
   :bar {...}}}}

{:search
 {:tabs
  [{:type :foo :selected true ...}
   {:type :bar ...}]}}
Has anyone come up with something better?