Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
(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))))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment