From dcd428d3b23bd8bf13a9d414b8053b1b2de17392 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 28 Jul 2023 16:11:50 +0200 Subject: [PATCH] :recycle: Add minor refactor to dashboard export dialog components --- .../src/app/main/ui/dashboard/export.cljs | 169 ++++++++++-------- 1 file changed, 94 insertions(+), 75 deletions(-) diff --git a/frontend/src/app/main/ui/dashboard/export.cljs b/frontend/src/app/main/ui/dashboard/export.cljs index 509f6ae60e..f0d3f82422 100644 --- a/frontend/src/app/main/ui/dashboard/export.cljs +++ b/frontend/src/app/main/ui/dashboard/export.cljs @@ -7,6 +7,7 @@ (ns app.main.ui.dashboard.export (:require [app.common.data :as d] + [app.common.data.macros :as dm] [app.main.data.modal :as modal] [app.main.features :as features] [app.main.store :as st] @@ -20,8 +21,8 @@ (def ^:const options [:all :merge :detach]) (mf/defc export-entry + {::mf/wrap-props false} [{:keys [file]}] - [:div.file-entry {:class (dom/classnames :loading (:loading? file) @@ -35,72 +36,89 @@ [:div.file-name-label (:name file)]]]) -(defn mark-file-error [files file-id] - (->> files - (mapv #(cond-> % - (= file-id (:id %)) - (assoc :export-error? true - :loading? false))))) +(defn- mark-file-error + [files file-id] + (mapv #(cond-> % + (= file-id (:id %)) + (assoc :export-error? true + :loading? false)) + files)) -(defn mark-file-success [files file-id] - (->> files - (mapv #(cond-> % - (= file-id (:id %)) - (assoc :export-success? true - :loading? false))))) +(defn- mark-file-success + [files file-id] + (mapv #(cond-> % + (= file-id (:id %)) + (assoc :export-success? true + :loading? false)) + files)) + +(def export-types + [:all :merge :detach]) (mf/defc export-dialog {::mf/register modal/components - ::mf/register-as :export} + ::mf/register-as :export + ::mf/wrap-props false} [{:keys [team-id files has-libraries? binary?]}] - (let [state (mf/use-state {:status :prepare - :files (->> files (mapv #(assoc % :loading? true)))}) - selected-option (mf/use-state :all) + (let [components-v2 (features/use-feature :components-v2) + state* (mf/use-state + #(let [files (mapv (fn [file] (assoc file :loading? true)) files)] + {:status :prepare + :selected :all + :files files})) - components-v2 (features/use-feature :components-v2) + state (deref state*) + selected (:selected state) + status (:status state) start-export - (fn [] - (swap! state assoc :status :exporting) - (->> (uw/ask-many! - {:cmd (if binary? :export-binary-file :export-standard-file) - :team-id team-id - :export-type @selected-option - :files files - :components-v2 components-v2}) - (rx/delay-emit 1000) - (rx/subs - (fn [msg] - (when (= :error (:type msg)) - (swap! state update :files mark-file-error (:file-id msg))) + (mf/use-fn + (mf/deps team-id selected files components-v2) + (fn [] + (swap! state* assoc :status :exporting) + (->> (uw/ask-many! + {:cmd (if binary? :export-binary-file :export-standard-file) + :team-id team-id + :export-type selected + :files files + :components-v2 components-v2}) + (rx/delay-emit 1000) + (rx/subs + (fn [msg] + (cond + (= :error (:type msg)) + (swap! state* update :files mark-file-error (:file-id msg)) - (when (= :finish (:type msg)) - (swap! state update :files mark-file-success (:file-id msg)) - (dom/trigger-download-uri (:filename msg) (:mtype msg) (:uri msg))))))) + (= :finish (:type msg)) + (do + (swap! state* update :files mark-file-success (:file-id msg)) + (dom/trigger-download-uri (:filename msg) (:mtype msg) (:uri msg))))))))) - cancel-fn - (mf/use-callback + on-cancel + (mf/use-fn (fn [event] (dom/prevent-default event) (st/emit! (modal/hide)))) - accept-fn - (mf/use-callback - (mf/deps @selected-option) + on-accept + (mf/use-fn + (mf/deps start-export) (fn [event] (dom/prevent-default event) (start-export))) - on-change-handler - (mf/use-callback - (fn [_ type] - (reset! selected-option type)))] + on-change + (mf/use-fn + (fn [event] + (let [type (-> (dom/get-target event) + (dom/get-data "type") + (keyword))] + (swap! state* assoc :selected type))))] - (mf/use-effect - (fn [] - (when-not has-libraries? - ;; Start download automatically - (start-export)))) + (mf/with-effect [has-libraries?] + ;; Start download automatically when no libraries + (when-not has-libraries? + (start-export))) [:div.modal-overlay [:div.modal-container.export-dialog @@ -109,52 +127,53 @@ [:h2 (tr "dashboard.export.title")]] [:div.modal-close-button - {:on-click cancel-fn} i/close]] + {:on-click on-cancel} i/close]] (cond - (= (:status @state) :prepare) + (= status :prepare) [:* [:div.modal-content [:p.explain (tr "dashboard.export.explain")] [:p.detail (tr "dashboard.export.detail")] - (for [type [:all :merge :detach]] - (let [selected? (= @selected-option type)] - [:div.export-option {:class (when selected? "selected")} - [:label.option-container - ;; Execution time translation strings: - ;; dashboard.export.options.all.message - ;; dashboard.export.options.all.title - ;; dashboard.export.options.detach.message - ;; dashboard.export.options.detach.title - ;; dashboard.export.options.merge.message - ;; dashboard.export.options.merge.title - [:h3 (tr (str "dashboard.export.options." (d/name type) ".title"))] - [:p (tr (str "dashboard.export.options." (d/name type) ".message"))] - [:input {:type "radio" - :checked selected? - :on-change #(on-change-handler % type) - :name "export-option"}] - [:span {:class "option-radio-check"}]]]))] + (for [type export-types] + [:div.export-option {:class (when (= selected type) "selected") + :key (name type)} + [:label.option-container + ;; Execution time translation strings: + ;; dashboard.export.options.all.message + ;; dashboard.export.options.all.title + ;; dashboard.export.options.detach.message + ;; dashboard.export.options.detach.title + ;; dashboard.export.options.merge.message + ;; dashboard.export.options.merge.title + [:h3 (tr (dm/str "dashboard.export.options." (d/name type) ".title"))] + [:p (tr (dm/str "dashboard.export.options." (d/name type) ".message"))] + [:input {:type "radio" + :checked (= selected type) + :data-type (name type) + :on-change on-change + :name "export-option"}] + [:span {:class "option-radio-check"}]]])] [:div.modal-footer [:div.action-buttons [:input.cancel-button {:type "button" :value (tr "labels.cancel") - :on-click cancel-fn}] + :on-click on-cancel}] [:input.accept-button {:class "primary" :type "button" :value (tr "labels.continue") - :on-click accept-fn}]]]] + :on-click on-accept}]]]] - (= (:status @state) :exporting) + (= status :exporting) [:* [:div.modal-content - (for [file (:files @state)] - [:& export-entry {:file file}])] + (for [file (:files state)] + [:& export-entry {:file file :key (dm/str (:id file))}])] [:div.modal-footer [:div.action-buttons @@ -162,5 +181,5 @@ {:class "primary" :type "button" :value (tr "labels.close") - :disabled (->> @state :files (some :loading?)) - :on-click cancel-fn}]]]])]])) + :disabled (->> state :files (some :loading?)) + :on-click on-cancel}]]]])]]))