Improve autoselect collection with icons.

frontend/src/uxbox/main/data/icons.cljs

@@ -57,7 +57,10 @@
 
 ;; --- Collections Fetched
 
-(defrecord CollectionsFetched [items]
+(deftype CollectionsFetched [items]
+  cljs.core/IDeref
+  (-deref [_] items)
+
   ptk/UpdateEvent
   (update [_ state]
     (reduce (fn [state {:keys [id user] :as item}]

frontend/src/uxbox/main/data/workspace.cljs

@@ -16,6 +16,7 @@
             [uxbox.main.data.projects :as dp]
             [uxbox.main.data.pages :as udp]
             [uxbox.main.data.shapes :as uds]
+            [uxbox.main.data.icons :as udi]
             [uxbox.main.data.shapes-impl :as shimpl]
             [uxbox.main.data.lightbox :as udl]
             [uxbox.main.data.history :as udh]
@@ -143,6 +144,54 @@
   [flag]
   (ToggleFlag. flag))
 
+;; --- Icons Toolbox
+
+(deftype SelectIconsToolboxCollection [id]
+  ptk/UpdateEvent
+  (update [_ state]
+    (assoc-in state [:workspace :icons-toolbox] id))
+
+  ptk/WatchEvent
+  (watch [_ state stream]
+    (rx/of (udi/fetch-icons id))))
+
+(defn select-icons-toolbox-collection
+  [id]
+  {:pre [(or (nil? id) (uuid? id))]}
+  (SelectIconsToolboxCollection. id))
+
+(deftype InitializeIconsToolbox []
+  ptk/UpdateEvent
+  (update [_ state]
+    state)
+
+  ptk/WatchEvent
+  (watch [_ state stream]
+    (letfn [(get-first-with-icons [colls]
+              (->> (sort-by :name colls)
+                   (filter #(> (:num-icons %) 0))
+                   (first)
+                   (:id)))
+            (on-fetched [event]
+              (let [coll (get-first-with-icons @event)]
+                (println "first" coll)
+                (select-icons-toolbox-collection coll)))]
+      (rx/merge
+       (rx/of (udi/fetch-collections)
+              (udi/fetch-icons nil))
+
+       ;; Only perform the autoselection if it is not
+       ;; previously already selected by the user.
+       (when-not (contains? (:workspace state) :icons-toolbox)
+         (->> stream
+              (rx/filter udi/collections-fetched?)
+              (rx/take 1)
+              (rx/map on-fetched)))))))
+
+(defn initialize-icons-toolbox
+  []
+  (InitializeIconsToolbox.))
+
 ;; --- Copy to Clipboard
 
 (defrecord CopyToClipboard []

frontend/src/uxbox/main/ui/workspace/sidebar/icons.cljs

@@ -11,7 +11,7 @@
             [potok.core :as ptk]
             [uxbox.store :as st]
             [uxbox.main.lenses :as ul]
-            [uxbox.main.data.workspace :as dw]
+            [uxbox.main.data.workspace :as udw]
             [uxbox.main.data.icons :as udi]
             [uxbox.main.ui.shapes.icon :as icon]
             [uxbox.main.ui.workspace.base :as wb]
@@ -30,6 +30,10 @@
   change."
   (l/derive ul/selected-drawing st/state))
 
+(def ^:private icons-toolbox-ref
+  (-> (l/in [:workspace :icons-toolbox])
+      (l/derive st/state)))
+
 ;; --- Icons (Component)
 
 (mx/defc icon-wrapper
@@ -39,58 +43,30 @@
 
 (defn- icons-toolbox-will-mount
   [own]
-  (let [local (:rum/local own)]
+  (st/emit! (udw/initialize-icons-toolbox))
-    (st/emit! (udi/fetch-collections))
+  own)
-    (st/emit! (udi/fetch-icons nil))
-    (add-watch local ::key (fn [_ _ _ {:keys [id]}]
-                             (st/emit! (udi/fetch-icons id))))
-    own))
 
-(defn- icons-toolbox-will-unmount
+(mx/defc icons-toolbox
-  [own]
+  {:mixins [mx/static mx/reactive]
-  (let [local (:rum/local own)]
+   :will-mount icons-toolbox-will-mount}
-    (remove-watch local ::key)
+  []
-    own))
-
-(defn- get-first-with-icons
-  "Get a first collection with icons."
-  [colls-map]
-  (->> (vals colls-map)
-       (sort-by :name)
-       (filter #(> (:num-icons %) 0))
-       (first)))
-
-(defn- get-or-select-coll
-  [local colls]
-  {:pre [(map? colls)]}
-  (let [selected (:id @local)]
-    (if selected
-      (get colls selected)
-      (let [coll (get-first-with-icons colls)]
-        (swap! local assoc :id (:d coll))
-        coll))))
-
-(mx/defcs icons-toolbox
-  {:mixins [(mx/local) mx/reactive]
-   :will-mount icons-toolbox-will-mount
-   :will-unmount icons-toolbox-will-unmount}
-  [{:keys [rum/local] :as own}]
   (let [drawing (mx/react drawing-shape-ref)
-        colls-map (mx/react icons/collections-ref)
+        selected (mx/react icons-toolbox-ref)
-        selected-coll (get-or-select-coll local colls-map)
+        colls (mx/react icons/collections-ref)
-        colls (->> (vals colls-map)
+        selected-coll (get colls selected)
+
+        colls (->> (vals (mx/react icons/collections-ref))
                    (sort-by :name))
         icons (->> (vals (mx/react icons/icons-ref))
                    (filter #(= (:id selected-coll) (:collection %))))]
     (letfn [(on-close [event]
-              (st/emit! (dw/toggle-flag :icons)))
+              (st/emit! (udw/toggle-flag :icons)))
             (on-select [icon event]
-              (st/emit! (dw/select-for-drawing icon)))
+              (st/emit! (udw/select-for-drawing icon)))
             (on-change [event]
-              (let [value (-> (dom/event->value event)
+              (let [value (read-string (dom/event->value event))]
-                              (read-string))]
+                (st/emit! (udw/select-for-drawing nil)
-                (swap! local assoc :id value)
+                          (udw/select-icons-toolbox-collection value))))]
-                (st/emit! (dw/select-for-drawing nil))))]
       [:div#form-figures.tool-window
        [:div.tool-window-bar
         [:div.tool-window-icon i/icon-set]