From 756b6d4fbd2d106077e4af160374a47182c4adce Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Tue, 9 Aug 2022 13:30:07 +0200
Subject: [PATCH] :lipstick: Minor cosmetic changes on resize and thumbnail
 render

---
 frontend/src/app/main/ui/hooks/resize.cljs    | 58 +++++++++----------
 .../shapes/frame/thumbnail_render.cljs        |  2 +-
 2 files changed, 28 insertions(+), 32 deletions(-)

diff --git a/frontend/src/app/main/ui/hooks/resize.cljs b/frontend/src/app/main/ui/hooks/resize.cljs
index d640fd81b4..101d84b219 100644
--- a/frontend/src/app/main/ui/hooks/resize.cljs
+++ b/frontend/src/app/main/ui/hooks/resize.cljs
@@ -8,6 +8,7 @@
   (:require
    [app.common.geom.point :as gpt]
    [app.common.logging :as log]
+   [app.common.spec :as us]
    [app.main.ui.context :as ctx]
    [app.main.ui.hooks :as hooks]
    [app.util.dom :as dom]
@@ -73,43 +74,38 @@
 
 (defn use-resize-observer
   [callback]
-  (assert (some? callback))
+  (us/assert! (some? callback) "the `callback` is mandatory")
 
   (let [prev-val-ref (mf/use-ref nil)
-        current-observer-ref (mf/use-ref nil)
-
-        callback-ref (hooks/use-update-var {:callback callback})
+        observer-ref (mf/use-ref nil)
+        callback     (hooks/use-ref-callback callback)
 
         ;; We use the ref as a callback when the dom node is ready (or change)
-        node-ref
-        (mf/use-callback
-         (fn [^js node]
-           (when (some? node)
-             (let [^js current-observer (mf/ref-val current-observer-ref)
-                   ^js prev-val         (mf/ref-val prev-val-ref)]
+        node-ref     (mf/use-fn
+                      (fn [^js node]
+                        (when (some? node)
+                          (let [^js observer (mf/ref-val observer-ref)
+                                ^js prev-val (mf/ref-val prev-val-ref)]
 
-               (when (and (not= prev-val node) (some? current-observer))
-                 (log/debug :action "disconnect" :js/prev-val prev-val :js/node node)
-                 (.disconnect current-observer)
-                 (mf/set-ref-val! current-observer-ref nil))
+                            (when (and (not= prev-val node) (some? observer))
+                              (log/debug :action "disconnect" :js/prev-val prev-val :js/node node)
+                              (.disconnect observer)
+                              (mf/set-ref-val! observer-ref nil))
 
-               (when (and (not= prev-val node) (some? node))
-                 (let [^js observer
-                       (js/ResizeObserver.
-                        #(let [callback (get @callback-ref :callback)]
-                           (callback last-resize-type (dom/get-client-size node))))]
-                   (mf/set-ref-val! current-observer-ref observer)
-                   (log/debug :action "observe"  :js/node node :js/observer observer)
-                   (.observe observer node))))
+                            (when (and (not= prev-val node) (some? node))
+                              (let [^js observer (js/ResizeObserver.
+                                                  #(callback last-resize-type (dom/get-client-size node)))]
+                                (mf/set-ref-val! observer-ref observer)
+                                (log/debug :action "observe"  :js/node node :js/observer observer)
+                                (.observe observer node))))
 
-             (mf/set-ref-val! prev-val-ref node))))]
+                          (mf/set-ref-val! prev-val-ref node))))]
+
+    (mf/with-effect []
+      ;; On dismount we need to disconnect the current observer
+      (fn []
+        (when-let [observer (mf/ref-val observer-ref)]
+          (log/debug :action "disconnect")
+          (.disconnect ^js observer))))
 
-    (mf/use-effect
-     (fn []
-       ;; On dismount we need to disconnect the current observer
-       (fn []
-         (let [current-observer (mf/ref-val current-observer-ref)]
-           (when (some? current-observer)
-             (log/debug :action "disconnect")
-             (.disconnect current-observer))))))
     node-ref))
diff --git a/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs b/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs
index 9a3f0d0782..28c72adf2f 100644
--- a/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs
@@ -79,7 +79,7 @@
 
         shape-bb-ref (hooks/use-update-var shape-bb)
 
-        updates-str (mf/use-memo #(rx/subject))
+        updates-str  (mf/use-memo #(rx/subject))
 
         thumbnail-data-ref (mf/use-memo (mf/deps page-id id) #(refs/thumbnail-frame-data page-id id))
         thumbnail-data     (mf/deref thumbnail-data-ref)