Identity and normalization

Author: nberger

src/om_tutorial/core.cljs

@@ -3,48 +3,140 @@
             [om.next :as om :refer-macros [defui]]
             [om.dom :as dom]))
 
-(def app-state
-  (atom
-    {:app/title "Animals"
-     :animals/list
-     [[1 "Ant"] [2 "Antelope"] [3 "Bird"] [4 "Cat"] [5 "Dog"]
-      [6 "Lion"] [7 "Mouse"] [8 "Monkey"] [9 "Snake"] [10 "Zebra"]]}))
+(enable-console-print!)
 
-(defmulti read (fn [env key params] key))
+(def init-data
+  {:list/one [{:name "John" :points 0}
+              {:name "Mary" :points 0}
+              {:name "Bob"  :points 0}]
+   :list/two [{:name "Mary" :points 0 :age 27}
+              {:name "Gwen" :points 0}
+              {:name "Jeff" :points 0}]})
 
-(defmethod read :default
-  [{:keys [state] :as env} key params]
+(defmulti read om/dispatch)
+
+(defn get-people [state key]
   (let [st @state]
-    (if-let [[_ value] (find st key)]
-      {:value value}
-      {:value :not-found})))
-
-(defmethod read :animals/list
-  [{:keys [state] :as env} key {:keys [start end]}]
-  {:value (subvec (:animals/list @state) start end)})
-
-(defui AnimalsList
-  static om/IQueryParams
-  (params [this]
-    {:start 0 :end 10})
+    (into [] (map #(get-in st %)) (get st key))))
+
+(defmethod read :list/one
+  [{:keys [state] :as env} key params]
+  {:value (get-people state key)})
+
+(defmethod read :list/two
+  [{:keys [state] :as env} key params]
+  {:value (get-people state key)})
+
+(comment
+
+  ;; IDENTITY
+
+  (in-ns 'om-tutorial.core)
+  (require '[cljs.pprint :as pp])
+  (def norm-data (om/tree->db RootView init-data true))
+
+  ;; normalized data
+  (pp/pprint norm-data)
+
+  (def parser (om/parser {:read read}))
+
+  ;; not normalized
+  (parser {:state (atom norm-data)} '[:list/one])
+
+  )
+
+(defmulti mutate om/dispatch)
+
+(defmethod mutate 'points/increment
+  [{:keys [state]} _ {:keys [name]}]
+  {:action
+   (fn []
+     (swap! state update-in
+       [:person/by-name name :points]
+       inc))})
+
+(defmethod mutate 'points/decrement
+  [{:keys [state]} _ {:keys [name]}]
+  {:action
+   (fn []
+     (swap! state update-in
+       [:person/by-name name :points]
+       #(let [n (dec %)] (if (neg? n) 0 n))))})
+
+
+(comment
+
+  (def parser (om/parser {:read read :mutate mutate}))
+
+  (def st (atom norm-data))
+
+  ;; inc mary points
+  (parser {:state st} '[(points/increment {:name "Mary"})])
+
+  ;; updated in both:
+  (parser {:state st} '[:list/one])
+
+  (parser {:state st} '[:list/two])
+  
+  )
+
+(defui Person
+  static om/Ident
+  (ident [this {:keys [name]}]
+    [:person/by-name name])
+  static om/IQuery
+  (query [this]
+    '[:name :points])
+  Object
+  (render [this]
+    (println "Render Person" (-> this om/props :name))
+    (let [{:keys [points name foo] :as props} (om/props this)]
+      (dom/li nil
+        (dom/label nil (str name ", points: " points))
+        (dom/button
+          #js {:onClick
+               (fn [e]
+                 (om/transact! this
+                   `[(points/increment ~props)]))}
+          "+")
+        (dom/button
+          #js {:onClick
+               (fn [e]
+                 (om/transact! this
+                   `[(points/decrement ~props)]))}
+          "-")))))
+
+(def person (om/factory Person {:keyfn :name}))
+
+(defui ListView
+  Object
+  (render [this]
+    (println "Render ListView" (-> this om/path first))
+    (let [list (om/props this)]
+      (apply dom/ul nil
+        (map person list)))))
+
+(def list-view (om/factory ListView))
+
+(defui RootView
   static om/IQuery
   (query [this]
-    '[:app/title (:animals/list {:start ?start :end ?end})])
+    (let [subquery (om/get-query Person)]
+      `[{:list/one ~subquery} {:list/two ~subquery}]))
   Object
   (render [this]
-    (let [{:keys [app/title animals/list]} (om/props this)]
-      (dom/div nil
-        (dom/h2 nil title)
-        (apply dom/ul nil
-          (map
-            (fn [[i name]]
-              (dom/li nil (str i ". " name)))
-            list))))))
+    (println "Render RootView")
+    (let [{:keys [list/one list/two]} (om/props this)]
+      (apply dom/div nil
+        [(dom/h2 nil "List A")
+         (list-view one)
+         (dom/h2 nil "List B")
+         (list-view two)]))))
 
 (def reconciler
   (om/reconciler
-    {:state app-state
-     :parser (om/parser {:read read})}))
+    {:state  init-data
+     :parser (om/parser {:read read :mutate mutate})}))
 
 (om/add-root! reconciler
-  AnimalsList (gdom/getElement "app"))
+  RootView (gdom/getElement "app"))