Last active
September 29, 2016 18:08
-
-
Save gardnervickers/a1fcbd04132271f9f18e9e6fecb15822 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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