🐛 Fix problem exporting shapes from handoff mode

CHANGES.md

@@ -17,6 +17,7 @@
 - Fix problem when importing in shared libraries [#1362](https://github.com/penpot/penpot/issues/1362)
 - Fix problem with join nodes [#1422](https://github.com/penpot/penpot/issues/1422)
 - After team onboarding importing a file will import into the team drafts [Taiga #2408](https://tree.taiga.io/project/penpot/issue/2408)
+- Fix problem exporting shapes from handoff mode [Taiga #2386](https://tree.taiga.io/project/penpot/issue/2386)
 
 ### :arrow_up: Deps updates
 ### :heart: Community contributions by (Thank you!)

frontend/resources/styles/main/layouts/handoff.scss

@@ -1,6 +1,7 @@
 $width-settings-bar: 16rem;
 
 .handoff-layout {
+  height: 100vh;
   display: grid;
   grid-template-rows: 40px auto;
   grid-template-columns: 1fr;

frontend/src/app/main/ui/viewer/handoff/exports.cljs

@@ -7,36 +7,17 @@
 (ns app.main.ui.viewer.handoff.exports
   (:require
    [app.common.data :as d]
-   [app.main.data.messages :as dm]
-   [app.main.store :as st]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.menus.exports :as we]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
-   [beicon.core :as rx]
    [rumext.alpha :as mf]))
 
 (mf/defc exports
   [{:keys [shape page-id file-id] :as props}]
   (let [exports  (mf/use-state (:exports shape []))
-        loading? (mf/use-state false)
 
-        on-download
+        [on-download loading?] (we/use-download-export shape page-id file-id @exports)
-        (mf/use-callback
-         (mf/deps shape @exports)
-         (fn [event]
-           (dom/prevent-default event)
-           (swap! loading? not)
-           (->> (we/request-export (assoc shape :page-id page-id :file-id file-id) @exports)
-                (rx/subs
-                 (fn [{:keys [status body] :as response}]
-                   (js/console.log status body)
-                   (if (= status 200)
-                     (dom/trigger-download (:name shape) body)
-                     (st/emit! (dm/error (tr "errors.unexpected-error")))))
-                 (constantly nil)
-                 (fn []
-                   (swap! loading? not))))))
 
         add-export
         (mf/use-callback
@@ -118,10 +99,10 @@
             i/minus]])
 
         [:div.btn-icon-dark.download-button
-         {:on-click (when-not @loading? on-download)
+         {:on-click (when-not loading? on-download)
-          :class (dom/classnames :btn-disabled @loading?)
+          :class (dom/classnames :btn-disabled loading?)
-          :disabled @loading?}
+          :disabled loading?}
-         (if @loading?
+         (if loading?
            (tr "workspace.options.exporting-object")
            (tr "workspace.options.export-object"))]])]))
 

frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs

@@ -30,24 +30,18 @@
     :name (:name shape)
     :exports exports}))
 
-(mf/defc exports-menu
+(defn use-download-export
-  [{:keys [shape page-id file-id] :as props}]
+  [shape page-id file-id exports]
-  (let [exports  (:exports shape [])
+  (let [loading? (mf/use-state false)
-        loading? (mf/use-state false)
 
         filename (cond-> (:name shape)
                    (and (= (count exports) 1)
                         (not (empty (:suffix (first exports)))))
                    (str (:suffix (first exports))))
 
-        scale-enabled?
+        on-download-callback
         (mf/use-callback
-          (fn [export]
+         (mf/deps filename shape exports)
-            (#{:png :jpeg} (:type export))))
-
-        on-download
-        (mf/use-callback
-         (mf/deps shape)
          (fn [event]
            (dom/prevent-default event)
            (swap! loading? not)
@@ -59,7 +53,19 @@
                    (swap! loading? not)
                    (st/emit! (dm/error (tr "errors.unexpected-error"))))
                  (fn []
-                   (swap! loading? not))))))
+                   (swap! loading? not))))))]
+    [on-download-callback @loading?]))
+
+(mf/defc exports-menu
+  [{:keys [shape page-id file-id] :as props}]
+  (let [exports  (:exports shape [])
+
+        scale-enabled?
+        (mf/use-callback
+          (fn [export]
+            (#{:png :jpeg} (:type export))))
+
+        [on-download loading?] (use-download-export shape page-id file-id exports)
 
         add-export
         (mf/use-callback
@@ -143,11 +149,11 @@
             i/minus]])
 
         [:div.btn-icon-dark.download-button
-         {:on-click (when-not @loading? on-download)
+         {:on-click (when-not loading? on-download)
           :class (dom/classnames
-                  :btn-disabled @loading?)
+                  :btn-disabled loading?)
-          :disabled @loading?}
+          :disabled loading?}
-         (if @loading?
+         (if loading?
            (tr "workspace.options.exporting-object")
            (tr "workspace.options.export-object"))]])]))