From 97697be14be8a4fcffae621108d1bfa5d96dc2f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matti=20H=C3=A4nninen?= <matti@mjhanninen.com>
Date: Thu, 16 Apr 2020 13:31:20 +0300
Subject: [PATCH] Fix BMI example in introduction

Used to have a glitch when the user first dragged the BMI control and
then the weight control.
---
 demo/reagentdemo/intro.cljs | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/demo/reagentdemo/intro.cljs b/demo/reagentdemo/intro.cljs
index 2aed198..b55907a 100644
--- a/demo/reagentdemo/intro.cljs
+++ b/demo/reagentdemo/intro.cljs
@@ -67,25 +67,28 @@
     [simple-component]
     (.-body js/document)))
 
-(def bmi-data (r/atom {:height 180 :weight 80}))
-
-(defn calc-bmi []
-  (let [{:keys [height weight bmi] :as data} @bmi-data
-        h (/ height 100)]
+(defn calc-bmi [{:keys [height weight bmi] :as data}]
+  (let [h (/ height 100)]
     (if (nil? bmi)
       (assoc data :bmi (/ weight (* h h)))
       (assoc data :weight (* bmi h h)))))
 
-(defn slider [param value min max]
+(def bmi-data (r/atom (calc-bmi {:height 180 :weight 80})))
+
+(defn slider [param value min max invalidates]
   [:input {:type "range" :value value :min min :max max
            :style {:width "100%"}
            :on-change (fn [e]
-                        (swap! bmi-data assoc param (.. e -target -value))
-                        (when (not= param :bmi)
-                          (swap! bmi-data assoc :bmi nil)))}])
+                        (let [new-value (js/parseInt (.. e -target -value))]
+                          (swap! bmi-data
+                                 (fn [data]
+                                   (-> data
+                                     (assoc param new-value)
+                                     (dissoc invalidates)
+                                     calc-bmi)))))}])
 
 (defn bmi-component []
-  (let [{:keys [weight height bmi]} (calc-bmi)
+  (let [{:keys [weight height bmi]} @bmi-data
         [color diagnose] (cond
                           (< bmi 18.5) ["orange" "underweight"]
                           (< bmi 25) ["inherit" "normal"]
@@ -95,14 +98,14 @@
      [:h3 "BMI calculator"]
      [:div
       "Height: " (int height) "cm"
-      [slider :height height 100 220]]
+      [slider :height height 100 220 :bmi]]
      [:div
       "Weight: " (int weight) "kg"
-      [slider :weight weight 30 150]]
+      [slider :weight weight 30 150 :bmi]]
      [:div
       "BMI: " (int bmi) " "
       [:span {:style {:color color}} diagnose]
-      [slider :bmi bmi 10 50]]]))
+      [slider :bmi bmi 10 50 :weight]]]))
 
 (def ns-src (s/syntaxed "(ns example
   (:require [reagent.core :as r]))"))
@@ -292,7 +295,7 @@
    [demo-component {:comp bmi-component
                     :src [:pre
                           ns-src
-                          (s/src-of [:bmi-data :calc-bmi :slider
+                          (s/src-of [:calc-bmi :bmi-data :slider
                                      :bmi-component])]}]])
 
 (defn complete-simple-demo []