thing.clj

;; A Working Thing (singleton)

(defsc Thing [this {:thing/keys [label contents] :as props}]
  {:query         [:thing/label :thing/contents]
   :ident         (fn [_] [:component/id :thing])
   :initial-state (fn [{:keys [label contents]}]
                    {:thing/label label :thing/contents contents})}
  (div :.ui.container.segment
    (h3 (str "Thing " label))
    (dom/input {:value    contents
                :onChange #(m/set-string! this :thing/contents :event %)})))

(def ui-thing (comp/factory Thing))

(defsc Root [this {:component/keys [id] :as props}]
  {:query         [:component/id {:thing (comp/get-query Thing)}]
   :initial-state (fn [_] {:component/id
                           {:thing
                            (comp/get-initial-state Thing {:label "1"
                                                           :contents "empty"})}})}
  (ui-thing (:thing id)))


;;; Working Things (plural, not singleton)

(defsc Thing [this {:thing/keys [id label contents] :as props}]
  {:query         [:thing/id :thing/label :thing/contents]
   :ident         :thing/id
   :initial-state (fn [{:keys [id label contents]}]
                    {:thing/id id :thing/label label :thing/contents contents})}
  (div :.ui.container.segment
    (h3 (str "Thing " label))
    (dom/input {:value    contents
                :onChange #(m/set-string! this :thing/contents :event %)})))

(def ui-thing (comp/factory Thing))

(defsc Root [this {:root/keys [things] :as props}]
  {:query         [{:root/things (comp/get-query Thing)}]
   :initial-state (fn [_] {:root/things [(comp/get-initial-state Thing {:id       1
                                                                        :label    "1"
                                                                        :contents "empty"})
                                         (comp/get-initial-state Thing {:id       2
                                                                        :label    "Other"
                                                                        :contents "buttons"})]})}
  (map ui-thing things))