beefed up the example with better lazy loads and a bit more css

dev/server/user.clj

@@ -17,7 +17,8 @@
 ;;FIGWHEEL
 
 (def figwheel-config
-  {:figwheel-options {:css-dirs ["resources/public/css"]}
+  {:figwheel-options {:css-dirs ["resources/public/css"]
+                      :open-file-command "/Users/tonykay/projects/team/scripts/figwheel-intellij.sh"}
    :build-ids        ["dev" "test" "cards"]
    :all-builds       (figwheel-sidecar.repl/get-project-cljs-builds)})
 

project.clj

@@ -44,7 +44,7 @@
                                :output-to            "resources/public/js/compiled/app.js"
                                :output-dir           "resources/public/js/compiled/dev"
                                :optimizations        :none
-                               :parallel-build       true
+                               :parallel-build       false
                                :verbose              false
                                :recompile-dependents true
                                :source-map-timestamp true}}
@@ -99,7 +99,8 @@
                                :output-dir    "i18n/out"
                                :optimizations :whitespace}}]}
 
-  :figwheel {:css-dirs ["resources/public/css"]}
+  :figwheel {:css-dirs ["resources/public/css"]
+             :open-file-command "/Users/tonykay/projects/team/scripts/figwheel-intellij.sh"}
 
   :untangled-i18n {:default-locale        "en-US"
                    :translation-namespace "app.i18n"

src/client/app/core.cljs

@@ -12,15 +12,21 @@
                      :initial-state (atom {
                                            :data-item   {42 {:text (tr "Nothing loaded...")}}
 
-                                           :main        {:singleton {:id :singleton :tab/label (tr "Main") :tab/type :main}}
-                                           :settings    {:singleton {:id :singleton :tab/label (tr "Settings") :tab/type :settings}}
+                                           :main        {:singleton {:id         :singleton
+                                                                     :tab/label  (tr "Main")
+                                                                     :tab/type   :main
+                                                                     :data-items nil}}
 
-                                           :current-tab [:main :singleton] ; switch to :settings :singleton to change tabs
+                                           :settings    {:singleton {:id :singleton :tab/label (tr "Settings") :tab/type :settings}}
 
-                                           :some-data   [:ui :data-item]})
+                                           :current-tab [:main :singleton] ; switch to [:settings :singleton] to change tabs
+                                           })
                      ; Called right after the app has loaded and mounted on the DOM
                      :started-callback
                      (fn [{:keys [reconciler]}]
                        ; Load a query from the server into app state, eliding any of the :without keywords (recursively)
-                       (df/load-singleton reconciler (om/get-query ui/Root) :without #{:current-tab :comments})))))
+                       (df/load-collection reconciler
+                         [{:data-items (om/get-query ui/DataItem)}]
+                         :without #{:comments}
+                         :post-mutation 'post-initial-load)))))
 

src/client/app/ui.cljs

@@ -33,12 +33,12 @@
 
 (defui ^:once DataItem
   static om/IQuery
-  (query [this] [:ui/fetch-state :text {:comments (om/get-query Comment)}])
+  (query [this] [:ui/fetch-state :db/id :item/text {:item/comments (om/get-query Comment)}])
   static om/Ident
-  (ident [this props] [:data-item 42])
+  (ident [this props] [:data-item (:db/id props)])
   Object
   (render [this]
-    (let [{:keys [text comments]} (om/props this)]
+    (let [{:keys [item/text item/comments]} (om/props this)]
       (dom/div nil
         (dom/span nil text)
         (dom/div #js {:className "comments"}
@@ -47,10 +47,10 @@
             ; roots it via the component's ident, and places state markers in the app state (so you can render spinners/loading).
             ; lazily-loaded (read the source) is an example of how to leverage this.
             ; IMPORTANT: The component to load MUST include :ui/fetch-state in order for you to see these state markers.
-            (dom/button #js {:className "show-button" :onClick #(df/load-field this :comments)} (tr "Show comments")))
+            (dom/button #js {:className "show-button" :onClick #(df/load-field this :item/comments)} (tr "Show comments")))
           (df/lazily-loaded render-comments comments))))))
 
-(def ui-data-item (om/factory DataItem))
+(def ui-data-item (om/factory DataItem {:keyfn :db/id}))
 
 (defui ^:once SettingsTab
   static om/IQuery
@@ -63,15 +63,17 @@
 
 (def ui-settings-tab (om/factory SettingsTab))
 
+(defn render-data-items [items] (map ui-data-item items))
+
 (defui ^:once MainTab
   static om/IQuery
-  (query [this] [:id :tab/type :tab/label {:some-data (om/get-query DataItem)}])
+  (query [this] [:id :tab/type :tab/label {:data-items (om/get-query DataItem)}])
   Object
   (render [this]
-    (let [{:keys [some-data]} (om/props this)]
+    (let [{:keys [data-items]} (om/props this)]
       (dom/div nil
-        (dom/h1 nil "Main")
-        (df/lazily-loaded ui-data-item some-data)))))
+        (dom/h1 nil (tr "Main: Data Items"))
+        (df/lazily-loaded render-data-items data-items)))))
 
 (def ui-main-tab (om/factory MainTab))
 
@@ -95,16 +97,16 @@
   (query [this] [:ui/locale :ui/react-key {:current-tab (om/get-query Tab)}])
   Object
   (render [this]
-    (let [{:keys [current-tab ui/locale ui/react-key some-data] :or {ui/react-key "ROOT"} :as props} (om/props this)]
-      (dom/div #js {:key react-key} ; needed for forced re-render to work on locale changes and hot reload
+    (let [{:keys [current-tab ui/locale ui/react-key] :or {ui/react-key "ROOT"} :as props} (om/props this)]
+      (dom/div #js {:key react-key}                         ; needed for forced re-render to work on locale changes and hot reload
         (dom/div nil
           (dom/ul nil
             (dom/li nil (dom/a #js {:onClick #(om/transact! this '[(nav/change-tab {:target :main})])} (tr "Main")))
             (dom/li nil (dom/a #js {:onClick #(om/transact! this '[(nav/change-tab {:target :settings})])} (tr "Settings"))))
           (ui-tab current-tab))
 
         ;; the build in mutation for setting locale triggers re-renders of translated strings
-        (dom/select #js {:className "locale-selector" :value locale :onChange (fn [evt] (om/transact! this `[(app/change-locale {:lang ~(.. evt -target -value)})]))}
+        (dom/select #js {:className "locale-selector" :value locale :onChange (fn [evt] (om/transact! this `[(ui/change-locale {:lang ~(.. evt -target -value)})]))}
           (dom/option #js {:value "en-US"} "English")
           (dom/option #js {:value "es-MX"} "Español"))
         ))))

src/server/app/api.clj

@@ -10,11 +10,15 @@
   (timbre/error "Unrecognized mutation " k))
 
 ;; your query entry point (feel free to make multimethod). Standard Om fare here.
-(defn api-read [{:keys [query]} k params]
-  (Thread/sleep 1000)
-  (case k
-    :some-data {:value {:text "Hello from the server!"}}
-    :data-item {:value {:comments [{:id 1 :text "Hi there!" :author "Sam"}
-                                   {:id 2 :text "Hooray!" :author "Sally"}
-                                   {:id 3 :text "La de da!" :author "Mary"}]}}
-    (timbre/error "Unrecognized query for " k " : " query)))
+(defn api-read [{:keys [ast query] :as env} dispatch-key params]
+  (Thread/sleep 10)
+  (case dispatch-key
+    :data-items {:value [{:db/id 1 :item/text "Data Item 1"}
+                         {:db/id 2 :item/text "Data Item 2"}]}
+    :data-item (let [{:keys [key]} ast]
+                 (if (= (second key) 1)
+                   {:value {:item/comments [{:id 1 :text "Hi there!" :author "Sam"}
+                                       {:id 2 :text "Hooray!" :author "Sally"}
+                                       {:id 3 :text "La de da!" :author "Mary"}]}}
+                   {:value {:item/comments [{:id 4 :text "Ooops!" :author "Sam"}]}}))
+    (timbre/error "Unrecognized query for " dispatch-key " : " query)))