follow-on-read-issue.cljs

(ns cards.union-follow-on-reads
  (:require [devcards.core :as dc :refer-macros [defcard dom-node]]
            [om.dom :as dom]
            [om.util :as util]
            [om.next :as om :refer [defui]]

            [untangled.client.core :as uc :refer [initial-state InitialAppState]]))

(defmulti mutate om/dispatch)

(defmethod mutate 'app/choose-tab [{:keys [state]} k {:keys [tab]}]
  {:action (fn [] (swap! state assoc-in [:current-tab 0] tab))})

(defmethod mutate 'app/choose-setting-tab [{:keys [state ref]} k {:keys [setting]}]
  {:action (fn [] (swap! state assoc-in (conj ref :settings-viewer-tab) setting))})

(defmethod mutate 'app/increment-active-users
  [{:keys [state ref]} k _]
  {:action (fn [] (swap! state update-in [:active-users :tab :active-users] inc))})

(defmethod mutate 'app/increment-high-score
  [{:keys [state]} k _]
  {:action (fn []
             (swap! state update-in [:high-score :tab :high-score] inc))})

(defui ^:once ActiveUsersTab
  static InitialAppState
  (initial-state [clz params]
                 {:which-tab :active-users
                  :active-users 0})
  static om/IQuery
  (query [this] [:which-tab
                 :active-users])

  static om/Ident
  (ident [this props]
         [(:which-tab props) :tab])

  Object
  (render [this]
          (dom/h3 nil (str (:active-users (om/props this))))))

(defui ^:once HighScoreTab
  static InitialAppState
  (initial-state [clz params]
                 {:which-tab :high-score
                  :high-score 100})
  static om/IQuery
  (query [this] [:which-tab :high-score])

  static om/Ident
  (ident [this props]
         [(:which-tab props) :tab])
  Object
  (render [this]
          (dom/h3 nil (str (:high-score (om/props this))))))

(def ui-a (om/factory ActiveUsersTab))
(def ui-b (om/factory HighScoreTab))

(defui ^:once SettingsViewerUnion
  static InitialAppState
  (initial-state [clz params]
                 (initial-state ActiveUsersTab nil))

  static om/IQuery
  (query [this]
         {:active-users (om/get-query ActiveUsersTab)
          :high-score (om/get-query HighScoreTab)})

  static om/Ident
  (ident [this props]
         [(:which-tab props) :tab])
  Object
  (render [this]
          (dom/div
           #js {:style #js {:backgroundColor "yellow"}}
           (dom/button #js {:onClick (fn [_] ((om/get-computed this :switch-settings-tab!)
                                              [:active-users :tab]))} "Show Active Users")
           (dom/button #js {:onClick (fn [_] ((om/get-computed this :switch-settings-tab!)
                                              [:high-score :tab]))} "Show High Score")
           (case (:which-tab (om/props this))
             :active-users (ui-a (om/props this))
             :high-score (ui-b (om/props this))))))

(def ui-settings-viewer (om/factory SettingsViewerUnion))

(defui ^:once SettingsChooser
  static InitialAppState
  (initial-state [clz params]
                 {:val 10})
  static om/IQuery
  (query [this] [:val])

  Object
  (render [this]
          (dom/div
           #js {:style #js {:backgroundColor "blue"}}
           (dom/button
            #js {:onClick
                 (fn [_]
                   (om/transact!
                    this '[(app/increment-active-users) :active-users]))} "Increment Active Users")
           (dom/button
            #js {:onClick
                 (fn [_]
                   (om/transact!
                    this '[(app/increment-high-score) :random-follow-read]))} "Increment High Score"))))

(def ui-settings-chooser (om/factory SettingsChooser))

(defui ^:once SettingsTab
  static InitialAppState
  (initial-state [clz params]
                 {:id :tab
                  :which-tab :settings
                  :settings-content "Settings Tab"
                  :settings-chooser (initial-state SettingsChooser nil)
                  :settings-viewer-tab (initial-state SettingsViewerUnion nil)})
  static om/IQuery
  (query [this] [:which-tab
                 :settings-content
                 {:settings-chooser (om/get-query SettingsChooser)}
                 {:settings-viewer-tab (om/get-query SettingsViewerUnion)}])
  static om/Ident
  (ident [this props]
         [(:which-tab props) :tab])
  Object
  (render [this]
          (let [{:keys [settings-content
                        settings-chooser
                        settings-viewer-tab]} (om/props this)
                switch-settings-tab! (fn [tab]
                                       (om/transact! this `[(app/choose-setting-tab {:setting ~tab})]))]
            (dom/div #js {:style #js {:backgroundColor "red"}}
                     settings-content
                     (ui-settings-chooser settings-chooser)
                     (ui-settings-viewer (om/computed settings-viewer-tab {:switch-settings-tab! switch-settings-tab!}))))))

(def ui-settings-tab (om/factory SettingsTab))

(defui ^:once MainTab
  static InitialAppState
  (initial-state [clz params] {:id :tab
                               :which-tab :main
                               :main-content "Main Tab"})
  static om/IQuery
  (query [this] [:which-tab :main-content])
  Object
  (render [this]
          (let [{:keys [main-content]} (om/props this)]
            (dom/div nil main-content))))

(def ui-main-tab (om/factory MainTab))

(defui ^:once TabUnion
  static InitialAppState
  (initial-state [clz params] (initial-state MainTab nil))
  static om/IQuery
  (query [this] {:main (om/get-query MainTab) :settings (om/get-query SettingsTab)})
  static om/Ident
  (ident [this props] [(:which-tab props) :tab])
  Object
  (render [this]
          (let [{:keys [which-tab] :as props} (om/props this)]
            (dom/div nil
                     (case which-tab
                       :main (ui-main-tab props) ; note props are just passed straight through
                       :settings (ui-settings-tab props)
                       (dom/p nil "Missing tab!"))))))

(def ui-tabs (om/factory TabUnion))

(defui ^:once Root
  static InitialAppState
  (initial-state
   [clz params]
   {:ui/react-key "initial" :current-tab (initial-state TabUnion nil)})
  static om/IQuery
  (query [this] [:ui/react-key {:current-tab (om/get-query TabUnion)}])
  Object
  (render [this]
          (let [{:keys [ui/react-key current-tab] :as props} (om/props this)]
            (dom/div #js {:key react-key}
                     (dom/ul nil
                             (dom/button #js {:onClick #(om/transact! this '[(app/choose-tab {:tab :main})])} "Main")
                             (dom/button #js {:onClick #(om/transact! this '[(app/choose-tab {:tab :settings})])} "Settings"))
                     (ui-tabs current-tab)))))

(defn read-local
  [{:keys [query target state ast]} dkey _]
  (when (not target)
    (case dkey
      (let [top-level-prop (nil? query)
            key (or (:key ast) dkey)
            by-ident? (util/ident? key)
            union? (map? query)
            data (if by-ident? (get-in @state key) (get @state key))]
        {:value
         (cond
           union? (get (om/db->tree [{key query}] @state @state) key)
           top-level-prop data
           :else (om/db->tree query data @state))}))))

(defonce state (atom {:ui/react-key "initial",
                      :active-users
                      {:tab {:which-tab :active-users, :active-users 0}},
                      :high-score {:tab {:which-tab :high-score, :high-score 100}},
                      :ui/locale "en-US",
                      :settings
                      {:tab {:id :tab, :which-tab :settings,
                             :settings-content "settings tab",
                             :settings-chooser {:val 10},
                             :settings-viewer-tab [:active-users :tab]}},
                      :om.next/tables #{:high-score},
                      :current-tab [:settings :tab],
                      :main {:tab {:id :tab, :which-tab :main, :main-content "Main Tab"}}}))

(defonce reconciler
  (om/reconciler
   {:state state
    :parser (om/parser {:mutate mutate
                        :read read-local})}))
(defcard ReactSelect
  ""
  (dom-node
   (fn [_ node]
     (om/add-root! reconciler Root node))))