@tony.kay: Can we add a guarantee that the TabUnion's initial state is the last one to be merged into global atom, (all the other Tab's initial state are merged first)

since you're offline , i think i'll post a github issue

https://github.com/untangled-web/untangled-client/issues/20

Hi Newb here - Working along with the third video on Unions. I've been staring at this for ages and can't find the error - help!

(ns app.ui
  (:require [om.dom :as dom]
            [om.next :as om :refer-macros [defui]]
            yahoo.intl-messageformat-with-locales
            [untangled.client.core :as uc]))

(defui ^:once Main
  static uc/InitialAppState
  (initial-state [clz params] {:id 1 :type :main-tab :extra "MAIN STUFF"})
  static om/IQuery
  (query [this] [:id :type :extra])
  Object
  (render [this]
    (let [{:keys [extra]} (om/props this)]
      (dom/p nil "MAIN: " extra))))

(def ui-main (om/factory Main {:keyfn :id}))

(defui ^:once Settings
  static uc/InitialAppState
  (initial-state [clz params] {:id 1 :type :settings-tab :args {:a 1}})
  static om/IQuery
  (query [this] [:id :type :args])
  Object
  (render [this]
    (let [{:keys [args]} (om/props this)]
      (dom/p nil "Settings: " (pr-str args)))))

(def ui-settings (om/factory Settings {:keyfn :id}))

(defui Switcher
  static uc/InitialAppState
  (initial-state [clz params] (uc/initial-state Main {}))
  static om/IQuery
  (query [this] [{:main-tab (om/get-query Main) :settings-tab (om/get-query Settings)}])
  static om/Ident
  (ident [this {:keys [type id]}](js/console.log :t type :i id) [type id])
  Object
  (render [this]
    (let [{:keys [type] :as props} (om/props this)]
    (case type
      :main-tab (ui-main props)
      :settings-tab (ui-settings props)
      (dom/p nil "NO TAB"))
    )))

(def ui-switcher (om/factory Switcher))


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

@peter.wilkins: Tony ran into a similar issue in the video didn’t he? I don’t remember the exact fix but I’m pretty sure he explained it

if you upload a complete project I wouldn’t mind cloning to take a quick look

Thanks, he did have a similar issue earlier on. I'll have another go in the morning when I'm fresh. Here's the project . Hope I didn't gitignore anything essential. https://github.com/peter-wilkins-mayden/getting-started

@peter.wilkins: your query in Switcher is close, just needs one minor tweak

(query [this] [{:main-tab (om/get-query Main) :settings-tab (om/get-query Settings)}])

needs to be

(query [this] {:main-tab (om/get-query Main) :settings-tab (om/get-query Settings)})

subtle but extremely important — components with union queries are maps, it’s the only exception to all queries being vectors

also fyi, you can’t exclude the whole resources directory in your .gitignore because you need to hold on to index.html at the bare minimum. if you have any custom css or javascript, you’ll want to make sure those directories are included in your repo as well