core.cljs

(ns om-tutorial.core
  (:require
    [goog.dom :as gdom]
    [om.next :as om :refer-macros [defui]]
    [datascript.core :as d]
    [om.dom :as dom]
    [cljs.pprint :as pprint]))

(enable-console-print!)

;; -----------------------------------------------------------------------------
;; DB

(def norm-tree-data (d/create-conn {:tree {:db/valueType :db.type/ref :db/cardinality :db.cardinality/many}
                                    :children {:db/valueType :db.type/ref :db/cardinality :db.cardinality/many}
                                    :node/by-id {:db/unique :db.unique/identity}}))

(d/transact! norm-tree-data
             [{:node/by-id 3
               :node-value 2
               :children []}
              {:node/by-id 4
               :node-value 2
               :children []}
              {:node/by-id 2
               :node-value 2
               :children [[:node/by-id 4]]}
              {:node/by-id 1
               :node-value 1
               :children [[:node/by-id 2]
                          [:node/by-id 3]]}
              {:db/id 0 ;; my convention: 0 = root
               :tree [[:node/by-id 1]]}])

;; -----------------------------------------------------------------------------
;; read / mutate

(declare norm-node)

(defmulti norm-tree-read om/dispatch)

(defmethod norm-tree-read :tree
  [{:keys [state query] :as env} key _]
  (let [st @state]
    {:value (-> (d/pull st [{key query}] 0)
                (get :tree)) }))

(defmethod norm-tree-read :node/by-id
  [{:keys [state query query-root]} _ _]
  (println "query-root: " query-root)
  (d/pull @state query query-root))

(defmulti norm-tree-mutate om/dispatch)

(defmethod norm-tree-mutate 'tree/increment
  [{:keys [state]} _ {:keys [id node-value]}]
  {:action
   (fn []
     (d/transact! state [[:db/add id :node-value (inc node-value)]]))})

(defmethod norm-tree-mutate 'tree/decrement
  [{:keys [state]} _ {:keys [id node-value]}]
  {:action
   (fn []
     (d/transact! state [[:db/add id :node-value (max 0 (dec node-value))]]))})

(defn increment! [c id node-value]
  (fn [e]
    (om/transact! c `[(tree/increment {:id ~id :node-value ~node-value})])))

(defn decrement! [c id node-value]
  (fn [e]
    (om/transact! c `[(tree/decrement {:id ~id :node-value ~node-value})])))

;; -----------------------------------------------------------------------------
;; Components

(defui NormNode
       static om/Ident
       (ident [this {:keys [db/id]}]
              [:node/by-id id])
       static om/IQuery
       (query [this]
              '[:db/id :node-value {:children ...}])
       Object
       (render [this]
               (let [{:keys [db/id node-value children]} (om/props this)]
                 (dom/li nil
                         (dom/div nil
                                  (dom/label nil (str "Node value:" node-value))
                                  (dom/button #js {:onClick (increment! this id node-value)} "+")
                                  (dom/button #js {:onClick (decrement! this id node-value)} "-"))
                         (dom/ul nil
                                 (map norm-node children))))))

(def norm-node (om/factory NormNode))

(defui NormTree
       static om/IQuery
       (query [this]
              [{:tree (om/get-query NormNode)}])
       Object
       (render [this]
               (let [{:keys [tree]} (om/props this)]
                 (dom/ul nil
                         (norm-node (first tree))))))

;; -----------------------------------------------------------------------------
;; Setup

(def norm-tree-parser
  (om/parser {:read   norm-tree-read
              :mutate norm-tree-mutate}))

(def norm-tree-reconciler
  (om/reconciler
    {:state   norm-tree-data
     :parser  norm-tree-parser
     :pathopt true}))

(om/add-root! norm-tree-reconciler
              NormTree (gdom/getElement "app"))

(pprint/pprint @(-> norm-tree-reconciler :config :indexer))