core.cljs

(ns c.m.core
  (:require c.m.mutations
            [untangled.client.data-fetch :as df]
            [untangled.client.core :as uc]
            [c.m.ui :as ui]
            [om.next :as om]))


(defonce app (atom (uc/new-untangled-client
                    :started-callback
                    (fn [{:keys [reconciler]}]
                      (df/load-data reconciler [{:all-items (om/get-query ui/Item)}]
                                    :post-mutation 'fetch/items-loaded)))))

main.cljs

(ns c.m.main
  (:require c.m.core
            dirac.runtime
            devtools.core
            [devcards.core :as dc :refer-macros [defcard defcard-doc]]
            [devcards-om-next.core :refer-macros [om-next-root defcard-om-next]]
            [c.m.ui :as ui]
            [untangled.client.core :as uc]))

(dirac.runtime/install!)
(devtools.core/install!)


(. js/console log "main function")




(defn init []
  (. js/console log "init function")
  (reset! c.m.core/app (uc/mount @c.m.core/app ui/Root "app")))

mutations.cljs

(ns c.m.mutations
  (:require [untangled.client.mutations :as m]
            [untangled.client.core :as uc]
            [c.m.ui :as ui]
            [om.next :as om]))


(defmethod m/mutate 'app/add-item [{:keys [state ref]} k {:keys [id label]}]
  {:remote true})

(defmethod m/mutate 'fetch-items-loaded [{:keys [state]} _ _]
  {:action (fn []
             (let [idents (get @state :all-items)]
               (swap! state (fn [s]
                              (-> s
                                  (assoc-in [:lists/by-title "Initial List" :items] idents)
                                  (dissoc :all-items))))))})

ui.cljs

(ns c.m.ui
  (:require [om.dom :as dom]
            [om.next :as om :refer-macros [defui]]
            [untangled.client.core :as uc]
            [untangled.client.mutations :as m]))

(defui ^:once Item
  static uc/InitialAppState
  (initial-state [clz {:keys [id label]}] {:id id :label label})
  static om/IQuery
  (query [this] [:id :label])
  static om/Ident
  (ident [this {:keys [id]}] [:items/by-id id])
  Object
  (render [this]
    (let [{:keys [label]} (om/props this)]
      (dom/li nil label))))

(def ui-item (om/factory Item {:keyfn :label}))


(defui ^:once MyList
  static uc/InitialAppState
  (initial-state [clz params] {:title "Initial List"
                               :ui/new-item-label ""
                               :items []})
  static om/IQuery
  (query [this] [:ui/new-item-label :title {:items (om/get-query Item)}])
  static om/Ident
  (ident [this {:keys [title]}] [:lists/by-title title])
  Object
  (render [this]
    (let [{:keys [title items ui/new-item-label] :or {ui/new-item-label ""}} (om/props this)]
      (dom/div nil
        (dom/h4 nil title)
        (dom/input #js {:value new-item-label
                        :onChange (fn [evt] (m/set-string! this :ui/new-item-label :event evt))})
        (dom/button #js {:onClick #(do
                                     (m/set-string! this :ui/new-item-label :value "")
                                     (om/transact! this `[(app/add-item {:id ~(om/tempid) :label ~new-item-label})
                                                          (untangled/load {:query [{:all-items ~(om/get-query Item)}]
                                                                           :post-mutation fetch/items-loaded})]))}
          "+")
        (dom/ul nil
          (map ui-item items))))))

(def ui-list (om/factory MyList))

(defui ^:once Root
  static uc/InitialAppState
  (initial-state [clz params] {:list (uc/initial-state MyList {})})
  static om/IQuery
  (query [this] [:ui/react-key :ui/loading-data {:list (om/get-query MyList)}])
  Object
  (render [this]
    (let [{:keys [react-key ui/loading-data list]} (om/props this)]
      (dom/div #js {:key react-key}
        (dom/hd nil "Header" (when loading-data " (LOADING)"))
        (ui-list list)))))