Om Next Query, Read & Mutate in a Devcard

query-read-mutate-example.cljs

(ns cards.query-read-mutate-example
  (:require
    [om.next :as om :refer-macros [defui]]
    [om.dom :as dom]
    [devcards.core :refer-macros [defcard dom-node]]
    [devcards.util.edn-renderer :refer [html-edn]]))

(def item-list-init-data
  {:current-user {:email "bob.smith@gmail.com" :username "bobsmith"}
   :items        [{:id 0 :title "Foo"}
                  {:id 1 :title "Bar"}
                  {:id 2 :title "Baz"}]})

(defn item-list-read
  [{:keys [query state]} key _]
  (let [db @state
        lookup (get db key)
        data (om/db->tree query lookup db)]
    (println "\n-----\n\nQUERY:" key query)
    (println "CLIENT DATABASE:" db)
    (println "COMPONENT UI DATA:" data)
    {:value data}))

(defui Item

       static om/Ident
       (ident [_ {:keys [id]}] [:db/id id])

       static om/IQuery
       (query [_] '[:id :title [:current-user _]])

       Object
       (render [this]
               (dom/div nil
                        (dom/h3 nil "Sub-component")
                        (html-edn (om/props this)))))

(def item (om/factory Item))

(defui ItemList

       static om/IQuery
       (query [_] [{:items (om/get-query Item)}])

       Object
       (render [this]
               (dom/div nil
                        (dom/h2 nil "Root component")
                        (html-edn (om/props this))
                        (map item (-> this om/props :items)))))

(def item-list-reconciler
  (om/reconciler
    {:state  item-list-init-data
     :parser (om/parser {:read item-list-read})}))

(defcard ident-example
         "#Idents"
         (dom-node
           (fn [data-atom node]
             (om/add-root! item-list-reconciler ItemList node))))