✨ Minor improvements on section initialization.

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

@@ -49,7 +49,6 @@
    [potok.core :as ptk]))
 
 ;; (log/set-level! :trace)
-;; --- Specs
 
 (s/def ::shape-attrs ::cp/shape-attrs)
 (s/def ::set-of-string
@@ -88,7 +87,7 @@
     :snap-grid
     :dynamic-alignment})
 
-(def layout-names
+(def layout-presets
   {:assets
    {:del #{:sitemap :layers :document-history }
     :add #{:assets}}
@@ -122,22 +121,31 @@
    :picked-color nil
    :picked-color-select false})
 
-(declare ensure-layout)
-
-(defn initialize-layout
-  [layout-name]
-  (us/verify (s/nilable ::us/keyword) layout-name)
-  (ptk/reify ::initialize-layout
+(defn ensure-layout
+  [lname]
+  (ptk/reify ::ensure-layout
     ptk/UpdateEvent
     (update [_ state]
       (update state :workspace-layout
-              (fn [layout]
-                (or layout default-layout))))
+              (fn [stored]
+                (let [todel (get-in layout-presets [lname :del] #{})
+                      toadd (get-in layout-presets [lname :add] #{})]
+                  (-> stored
+                      (set/difference todel)
+                      (set/union toadd))))))))
+
+(defn setup-layout
+  [lname]
+  (us/verify (s/nilable ::us/keyword) lname)
+  (ptk/reify ::setup-layout
+    ptk/UpdateEvent
+    (update [_ state]
+      (update state :workspace-layout #(or % default-layout)))
 
     ptk/WatchEvent
     (watch [_ _ _]
-      (if (and layout-name (contains? layout-names layout-name))
-        (rx/of (ensure-layout layout-name))
+      (if (and lname (contains? layout-presets lname))
+        (rx/of (ensure-layout lname))
         (rx/of (ensure-layout :layers))))))
 
 (defn initialize-file
@@ -225,8 +233,10 @@
 
     ptk/WatchEvent
     (watch [_ _ _]
-      (rx/of (dwn/finalize file-id)
-             ::dwp/finalize))))
+      (rx/merge
+       (rx/of (dwn/finalize file-id))
+       (->> (rx/of ::dwp/finalize)
+            (rx/observe-on :async))))))
 
 (defn initialize-page
   [page-id]
@@ -519,21 +529,6 @@
 
 ;; --- Toggle layout flag
 
-(defn ensure-layout
-  [layout-name]
-  (assert (contains? layout-names layout-name)
-          (str "unexpected layout name: " layout-name))
-  (ptk/reify ::ensure-layout
-    ptk/UpdateEvent
-    (update [_ state]
-      (update state :workspace-layout
-              (fn [stored]
-                (let [todel (get-in layout-names [layout-name :del] #{})
-                      toadd (get-in layout-names [layout-name :add] #{})]
-                  (-> stored
-                      (set/difference todel)
-                      (set/union toadd))))))))
-
 (defn toggle-layout-flags
   [& flags]
   (ptk/reify ::toggle-layout-flags

frontend/src/app/main/data/workspace/notifications.cljs

@@ -59,7 +59,8 @@
     ptk/WatchEvent
     (watch [_ state stream]
       (let [wsession (get-in state [:ws file-id])
-            stoper   (rx/filter #(= ::finalize %) stream)
+            stoper   (->> stream
+                          (rx/filter (ptk/type? ::finalize)))
             interval (* 1000 60)]
         (->> (rx/merge
               ;; Each 60 seconds send a keepalive message for maintain
@@ -122,11 +123,10 @@
 (defn finalize
   [file-id]
   (ptk/reify ::finalize
-    ptk/WatchEvent
-    (watch [_ state _]
+    ptk/EffectEvent
+    (effect [_ state _]
       (when-let [ws (get-in state [:ws file-id])]
-        (ws/-close ws))
-      (rx/of ::finalize))))
+        (ws/-close ws)))))
 
 ;; --- Handle: Presence
 

frontend/src/app/main/ui/dashboard/file_menu.cljs

@@ -172,7 +172,10 @@
                      {:type :export
                       :team-id current-team-id
                       :has-libraries? (->> files (some :has-libraries?))
-                      :files files})))))))]
+                      :files files})))))))
+
+        ;; NOTE: this is used for detect if component is still mounted
+        mounted-ref (mf/use-ref true)]
 
     (mf/use-effect
      (mf/deps show?)
@@ -180,7 +183,8 @@
        (when show?
          (->> (rp/query! :all-projects)
               (rx/map group-by-team)
-              (rx/subs #(reset! teams %))))))
+              (rx/subs #(when (mf/ref-val mounted-ref)
+                          (reset! teams %)))))))
 
     (when current-team
       (let [sub-options (conj (vec (for [project current-projects]

frontend/src/app/main/ui/dashboard/files.cljs

@@ -101,12 +101,17 @@
                        (reverse))]
 
     (mf/use-effect
-     (mf/deps (:id project))
+     (mf/deps project)
+     (fn []
+       (when project
+         (let [pname (if (:is-default project)
+                       (tr "labels.drafts")
+                       (:name project))]
+           (dom/set-html-title (tr "title.dashboard.files" pname))))))
+
+    (mf/use-effect
+     (mf/deps project)
      (fn []
-       (dom/set-html-title (tr "title.dashboard.files"
-                              (if (:is-default project)
-                                (tr "labels.drafts")
-                                (:name project))))
        (st/emit! (dd/fetch-files {:project-id (:id project)})
                  (dd/clear-selected-files))))
 

frontend/src/app/main/ui/dashboard/fonts.cljs

@@ -19,7 +19,6 @@
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
    [app.util.logging :as log]
-   ;; [app.util.router :as rt]
    [beicon.core :as rx]
    [cuerdas.core :as str]
    [rumext.alpha :as mf]))

frontend/src/app/main/ui/dashboard/libraries.cljs

@@ -23,10 +23,11 @@
     (mf/use-effect
      (mf/deps team)
      (fn []
-       (dom/set-html-title (tr "title.dashboard.shared-libraries"
-                               (if (:is-default team)
-                                 (tr "dashboard.your-penpot")
-                                 (:name team))))))
+       (when team
+         (let [tname (if (:is-default team)
+                       (tr "dashboard.your-penpot")
+                       (:name team))]
+           (dom/set-html-title (tr "title.dashboard.shared-libraries" tname))))))
 
     (mf/use-effect
      (st/emitf (dd/fetch-shared-files)

frontend/src/app/main/ui/dashboard/projects.cljs

@@ -163,14 +163,16 @@
     (mf/use-effect
      (mf/deps team)
      (fn []
-       (dom/set-html-title (tr "title.dashboard.projects"
-                              (if (:is-default team)
-                                (tr "dashboard.your-penpot")
-                                (:name team))))))
+       (when team
+         (let [tname (if (:is-default team)
+                       (tr "dashboard.your-penpot")
+                       (:name team))]
+           (dom/set-html-title (tr "title.dashboard.projects" tname))))))
 
     (mf/use-effect
-     (st/emitf (dd/fetch-recent-files)
-               (dd/clear-selected-files)))
+     (fn []
+       (st/emit! (dd/fetch-recent-files)
+                 (dd/clear-selected-files))))
 
     (when (seq projects)
       [:*

frontend/src/app/main/ui/dashboard/search.cljs

@@ -17,20 +17,23 @@
 
 (mf/defc search-page
   [{:keys [team search-term] :as props}]
-  (let [result (mf/deref refs/dashboard-search-result)]
-    (mf/use-effect
-     (mf/deps team)
-     (fn []
-       (dom/set-html-title (tr "title.dashboard.search"
-                              (if (:is-default team)
-                                (tr "dashboard.your-penpot")
-                                (:name team))))))
-    (mf/use-effect
-     (mf/deps search-term)
-     (fn []
-       (st/emit! (dd/search {:search-term search-term})
-                 (dd/clear-selected-files))))
 
+  (mf/use-effect
+   (mf/deps team)
+   (fn []
+     (when team
+       (let [tname (if (:is-default team)
+                     (tr "dashboard.your-penpot")
+                     (:name team))]
+         (dom/set-html-title (tr "title.dashboard.search" tname))))))
+
+  (mf/use-effect
+   (mf/deps search-term)
+   (fn []
+     (st/emit! (dd/search {:search-term search-term})
+               (dd/clear-selected-files))))
+
+  (let [result (mf/deref refs/dashboard-search-result)]
     [:*
      [:header.dashboard-header
       [:div.dashboard-title

frontend/src/app/main/ui/workspace.cljs

@@ -26,7 +26,6 @@
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.object :as obj]
-   [app.util.timers :as ts]
    [okulary.core :as l]
    [rumext.alpha :as mf]))
 
@@ -116,27 +115,31 @@
         project (mf/deref refs/workspace-project)
         layout  (mf/deref refs/workspace-layout)]
 
+    ;; Setting the layout preset by its name
     (mf/use-effect
      (mf/deps layout-name)
-     #(st/emit! (dw/initialize-layout layout-name)))
+     (fn []
+       (st/emit! (dw/setup-layout layout-name))))
+
 
     (mf/use-effect
      (mf/deps project-id file-id)
      (fn []
        (st/emit! (dw/initialize-file project-id file-id))
        (fn []
-         ;; Schedule to 100ms so we can do the update before the file is finalized
-         (st/emit! ::dwp/force-persist)
-         (ts/schedule 100 (st/emitf (dw/finalize-file project-id file-id))))))
+         (st/emit! ::dwp/force-persist
+                   (dw/finalize-file project-id file-id)))))
 
+    ;; Close any non-modal dialog that may be still open
     (mf/use-effect
+     (fn [] (st/emit! dm/hide)))
+
+    ;; Set properly the page title
+    (mf/use-effect
+     (mf/deps (:name file))
      (fn []
-       ;; Close any non-modal dialog that may be still open
-       (st/emit! dm/hide)))
-
-    (mf/use-effect
-     (mf/deps file)
-     #(dom/set-html-title (tr "title.workspace" (:name file))))
+       (when (:name file)
+         (dom/set-html-title (tr "title.workspace" (:name file))))))
 
     [:& (mf/provider ctx/current-file-id) {:value (:id file)}
      [:& (mf/provider ctx/current-team-id) {:value (:team-id project)}

frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs

@@ -28,8 +28,7 @@
   (let [local       (mf/use-state {})
         input-ref   (mf/use-ref)
         id          (:id page)
-
-        state (mf/use-state {:menu-open false})
+        state       (mf/use-state {:menu-open false})
 
         delete-fn   (mf/use-callback (mf/deps id) #(st/emit! (dw/delete-page id)))
         navigate-fn (mf/use-callback (mf/deps id) #(st/emit! (dw/go-to-page id)))
@@ -199,8 +198,9 @@
   (let [file        (mf/deref refs/workspace-file)
         create      (mf/use-callback
                      (mf/deps file)
-                     (st/emitf (dw/create-page {:file-id (:id file)
-                                                :project-id (:project-id file)})))
+                     (fn []
+                       (st/emit! (dw/create-page {:file-id (:id file)
+                                                  :project-id (:project-id file)}))))
         show-pages? (mf/use-state true)
 
         toggle-pages

frontend/src/app/util/websockets.cljs

@@ -40,11 +40,13 @@
         (when (.isOpen ^js ws)
           (.send ^js ws msg)))
       (-close [_]
-        (.close ws)
         (rx/end! sb)
         (ev/unlistenByKey lk1)
         (ev/unlistenByKey lk2)
-        (ev/unlistenByKey lk3)))))
+        (ev/unlistenByKey lk3)
+        (.close ^js ws)
+        (.dispose ^js ws)))))
+
 
 (defn message?
   [msg]