https://gist.github.com/6ewis/43b7c96a7f9514f6c2ebe8a358c5cd3f what am I doing wrong

@lewix probably need to update your handler.clj file

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

@gadfly361: yup that was handler.clj

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

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

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

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

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

@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!)

gadfly361: I am using figwheel

👍

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

@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

how does reagent compare to hoplon?

@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 🙂

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

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

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

@madstap: thanks - it makes sense

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

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

@lewix I wrote it just now....

I think the style guide has something about this

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

https://github.com/bbatsov/clojure-style-guide#no-multiple-forms-fn-literals

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

`

(defn timer-component []
  (let [seconds-elapsed (r/atom 0)]
    (fn []
      (js/setTimeout #(swap! seconds-elapsed inc) 1000)
      [:div
       "Seconds Elapsed: " @seconds-elapsed])))

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

@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)}))

And then use it like:

[component seconds-elapsed]

hmm

I'll check it out

in the meantime this version work:

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

@gadfly361: have you tried your version?

yes

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

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

your version simplified:

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

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

not quite

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

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

javascript setTimeout is a function

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

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

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

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

yeah i did, thanks - should be edited above now

this will be able to explain it better than i can: https://github.com/Day8/re-frame/wiki/Creating%20Reagent%20Components

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

it can't

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

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

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

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 ...}]}}