Refactor

reagent-reitit-demo/src/demo/core.cljs

@@ -32,7 +32,7 @@
      [:header.b--black-70.pv4 {:class (when tagline "bb")}
       [:h3.f2.fw7.ttu.tracked.lh-title.mt0.mb3.avenir title]
       (when tagline [:h4.f3.fw4.i.lh-title.mt0 tagline])]
-     [:section.pt5.pb4 [:p.times.lh-copy.measure.f4.mt0 description]]]]])
+     [:section.pt5.pb4 [:p.times.lh-copy.measure.f5.mt0 description]]]]])
 
 ;; form one component to render article tiles
 (defn articles [{:keys [title body articles]}]
@@ -66,10 +66,7 @@
 (defn circle [{:keys [img alt]}]
   [:div.pa4.tc [:img.br-100.ba.h3.w3.dib {:src img :alt alt}]])
 
-
+;; form one component to render a nav link
-;; form one component ro render a nav link
-
-
 (defn navbar-link [{:keys [href title text] :or {text nil title nil}}]
   [:a.link.dim.white.dib.mr3 {:key href :href href :title title} text])
 
@@ -79,11 +76,13 @@
    [:nav.f6.fw6.ttu.tracked
     (map navbar-link links)]])
 
-(defn my-component [title]
+;; form2 component notice the render function takes the same param as the component function
-  (let [local-state (reagent/atom true)]
+;; this is important, you can hit issues if you forget this in form 2 components.
-    (fn []
+(defn my-component [title value]
-      [:h1 {:class (when @local-state "hid")
+  (let [local-state (reagent/atom value)]
-            :on-click (fn [] (swap! local-state not))} title])))
+    (fn [title]
+      [:h1 {:class (when @local-state "hide")
+            :on-click (fn [] (swap! local-state inc))} (str title " " @local-state)])))
 
 
 ;; form one homepage component
@@ -121,19 +120,16 @@
        [:div.mw7.center.avenir  @content]])))
 
 ;; form one render about page component
-
-
 (defn about-page []
   [:main.mt4
    [:section.mw7.center.avenir
     [:h1 "Clojure library examples to aid learning"]
     [:p "Selection of clojure demos, rendered in reagent which itself is an example of using reagent."]
-    [my-component "component 1"]
+    [my-component "Clickable component" 1]
-    [my-component "component 2"]
+    [my-component "Clickable component" 2]
-    [circle {:alt "test"}]
+    [:p "Image circle componenet"]
-    [article {:title "Article"
+    [circle {:img "http://placekitten.com/g/300/300" :alt "test"}]
-              :description (-> site-data :lorem)
+    [:p "Product card component"]
-              :tagline "tagline here"}]
     [:div.flex.flex-column.flex-row-ns
      [product-card
       {:title "Cat 01"
@@ -144,11 +140,17 @@
       {:title "Cat 02"
        :amount "£10.59"
        :description "Cat description here"
-       :link "http://placekitten.com/g/600/300"}]]]])
+       :link "http://placekitten.com/g/600/300"}]]
+    [:p "Article component"]
+    [article {:title "Example Article component"
+              :description (-> site-data :lorem)
+              :tagline "https://tachyons.io/components/"}]]])
 
 ;; form 3 component wrap rendering to catch errors and render them
 ;; or just render the rest of the page if all is good
 ;; this uses =create-class= and a hash map of life cycle functions
+
+
 (defn err-boundary
   [& children]
   (let [err-state (reagent/atom nil)]