From 8af46ac7fccb3fd84eb95caeea4764df5bc21157 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Tue, 31 Aug 2021 15:22:32 +0200 Subject: [PATCH] :sparkles: Minor improvements on section initialization. --- frontend/src/app/main/data/workspace.cljs | 53 +++++++++---------- .../main/data/workspace/notifications.cljs | 10 ++-- .../src/app/main/ui/dashboard/file_menu.cljs | 8 ++- frontend/src/app/main/ui/dashboard/files.cljs | 15 ++++-- frontend/src/app/main/ui/dashboard/fonts.cljs | 1 - .../src/app/main/ui/dashboard/libraries.cljs | 9 ++-- .../src/app/main/ui/dashboard/projects.cljs | 14 ++--- .../src/app/main/ui/dashboard/search.cljs | 29 +++++----- frontend/src/app/main/ui/workspace.cljs | 25 +++++---- .../main/ui/workspace/sidebar/sitemap.cljs | 8 +-- frontend/src/app/util/websockets.cljs | 6 ++- 11 files changed, 96 insertions(+), 82 deletions(-) diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index 0ea2d6805..1a1be8e92 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/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 diff --git a/frontend/src/app/main/data/workspace/notifications.cljs b/frontend/src/app/main/data/workspace/notifications.cljs index 93dcf9229..f62eedc70 100644 --- a/frontend/src/app/main/data/workspace/notifications.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/dashboard/file_menu.cljs b/frontend/src/app/main/ui/dashboard/file_menu.cljs index 265e0bc1f..7e1b6cabc 100644 --- a/frontend/src/app/main/ui/dashboard/file_menu.cljs +++ b/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] diff --git a/frontend/src/app/main/ui/dashboard/files.cljs b/frontend/src/app/main/ui/dashboard/files.cljs index 4b44e09ef..0fa684312 100644 --- a/frontend/src/app/main/ui/dashboard/files.cljs +++ b/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)))) diff --git a/frontend/src/app/main/ui/dashboard/fonts.cljs b/frontend/src/app/main/ui/dashboard/fonts.cljs index 72d65eb27..1b12fc298 100644 --- a/frontend/src/app/main/ui/dashboard/fonts.cljs +++ b/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])) diff --git a/frontend/src/app/main/ui/dashboard/libraries.cljs b/frontend/src/app/main/ui/dashboard/libraries.cljs index 7130c9721..98ff52fae 100644 --- a/frontend/src/app/main/ui/dashboard/libraries.cljs +++ b/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) diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs index 768599da7..681ab8f9f 100644 --- a/frontend/src/app/main/ui/dashboard/projects.cljs +++ b/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) [:* diff --git a/frontend/src/app/main/ui/dashboard/search.cljs b/frontend/src/app/main/ui/dashboard/search.cljs index 56bc7439f..12b6e628d 100644 --- a/frontend/src/app/main/ui/dashboard/search.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index a4e3f0355..e2eaf6136 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/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)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs index 65cf1c0fe..9acacb977 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs +++ b/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 diff --git a/frontend/src/app/util/websockets.cljs b/frontend/src/app/util/websockets.cljs index 8bac58168..32346b555 100644 --- a/frontend/src/app/util/websockets.cljs +++ b/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]