From 58afa7498e3a7439238e54644c486c7b625e9a1b Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 24 Nov 2023 15:33:59 +0100 Subject: [PATCH] :recycle: Move card width calculation to hook --- frontend/src/app/main/ui/dashboard/files.cljs | 29 +-------------- .../src/app/main/ui/dashboard/libraries.cljs | 30 +-------------- .../src/app/main/ui/dashboard/projects.cljs | 30 +-------------- .../src/app/main/ui/dashboard/search.cljs | 30 +-------------- frontend/src/app/main/ui/hooks.cljs | 37 +++++++++++++++++++ 5 files changed, 45 insertions(+), 111 deletions(-) diff --git a/frontend/src/app/main/ui/dashboard/files.cljs b/frontend/src/app/main/ui/dashboard/files.cljs index 1ad4e9ada..d7646d5b6 100644 --- a/frontend/src/app/main/ui/dashboard/files.cljs +++ b/frontend/src/app/main/ui/dashboard/files.cljs @@ -6,7 +6,6 @@ (ns app.main.ui.dashboard.files (:require - [app.common.math :as mth] [app.main.data.dashboard :as dd] [app.main.data.events :as ev] [app.main.refs :as refs] @@ -14,13 +13,12 @@ [app.main.ui.dashboard.grid :refer [grid]] [app.main.ui.dashboard.inline-edition :refer [inline-edition]] [app.main.ui.dashboard.project-menu :refer [project-menu]] + [app.main.ui.hooks :as hooks] [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.keyboard :as kbd] [app.util.router :as rt] - [app.util.webapi :as wapi] - [beicon.core :as rx] [cuerdas.core :as str] [rumext.v2 :as mf])) @@ -126,16 +124,8 @@ [{:keys [project team] :as props}] (let [files-map (mf/deref refs/dashboard-files) project-id (:id project) - width (mf/use-state nil) - rowref (mf/use-ref) - itemsize (if (>= @width 1030) - 280 - 230) - ratio (if (some? @width) (/ @width itemsize) 0) - nitems (mth/floor ratio) - limit (min 10 nitems) - limit (max 1 limit) + [rowref limit] (hooks/use-dynamic-grid-item-width) files (mf/with-memo [project-id files-map] (->> (vals files-map) @@ -160,21 +150,6 @@ (st/emit! (-> (dd/create-file (with-meta params mdata)) (with-meta {::ev/origin origin}))))))] - (mf/with-effect [] - (let [node (mf/ref-val rowref) - mnt? (volatile! true) - sub (->> (wapi/observe-resize node) - (rx/observe-on :af) - (rx/subs (fn [entries] - (let [row (first entries) - row-rect (.-contentRect ^js row) - row-width (.-width ^js row-rect)] - (when @mnt? - (reset! width row-width))))))] - (fn [] - (vreset! mnt? false) - (rx/dispose! sub)))) - (mf/with-effect [project] (when project (let [pname (if (:is-default project) diff --git a/frontend/src/app/main/ui/dashboard/libraries.cljs b/frontend/src/app/main/ui/dashboard/libraries.cljs index 84070ad55..fa14becee 100644 --- a/frontend/src/app/main/ui/dashboard/libraries.cljs +++ b/frontend/src/app/main/ui/dashboard/libraries.cljs @@ -7,16 +7,14 @@ (ns app.main.ui.dashboard.libraries (:require [app.common.data :as d] - [app.common.math :as mth] [app.main.data.dashboard :as dd] [app.main.features :as features] [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.dashboard.grid :refer [grid]] + [app.main.ui.hooks :as hooks] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] - [app.util.webapi :as wapi] - [beicon.core :as rx] [rumext.v2 :as mf])) (mf/defc libraries-page @@ -35,16 +33,7 @@ components-v2 (features/use-feature "components/v2") - width (mf/use-state nil) - rowref (mf/use-ref) - - itemsize (if components-v2 - 350 - (if (>= @width 1030) 280 230)) - ratio (if (some? @width) (/ @width itemsize) 0) - nitems (mth/floor ratio) - limit (min 10 nitems) - limit (max 1 limit)] + [rowref limit] (hooks/use-dynamic-grid-item-width 350)] (mf/with-effect [team] (when team @@ -57,21 +46,6 @@ (st/emit! (dd/fetch-shared-files) (dd/clear-selected-files))) - (mf/with-effect [] - (let [node (mf/ref-val rowref) - mnt? (volatile! true) - sub (->> (wapi/observe-resize node) - (rx/observe-on :af) - (rx/subs (fn [entries] - (let [row (first entries) - row-rect (.-contentRect ^js row) - row-width (.-width ^js row-rect)] - (when @mnt? - (reset! width row-width))))))] - (fn [] - (vreset! mnt? false) - (rx/dispose! sub)))) - [:* [:header.dashboard-header {:ref rowref} [:div.dashboard-title#dashboard-libraries-title diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs index 7ffcad547..0455c4aaf 100644 --- a/frontend/src/app/main/ui/dashboard/projects.cljs +++ b/frontend/src/app/main/ui/dashboard/projects.cljs @@ -8,7 +8,6 @@ (:require [app.common.data :as d] [app.common.geom.point :as gpt] - [app.common.math :as mth] [app.config :as cf] [app.main.data.dashboard :as dd] [app.main.data.events :as ev] @@ -20,14 +19,13 @@ [app.main.ui.dashboard.grid :refer [line-grid]] [app.main.ui.dashboard.inline-edition :refer [inline-edition]] [app.main.ui.dashboard.project-menu :refer [project-menu]] + [app.main.ui.hooks :as hooks] [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.keyboard :as kbd] [app.util.router :as rt] [app.util.time :as dt] - [app.util.webapi :as wapi] - [beicon.core :as rx] [cuerdas.core :as str] [okulary.core :as l] [potok.core :as ptk] @@ -168,16 +166,7 @@ :menu-pos nil :edition? (= (:id project) edit-id)}) - width (mf/use-state nil) - rowref (mf/use-ref) - itemsize (if (>= @width 1030) - 280 - 230) - - ratio (if (some? @width) (/ @width itemsize) 0) - nitems (mth/floor ratio) - limit (min 10 nitems) - limit (max 1 limit) + [rowref limit] (hooks/use-dynamic-grid-item-width) on-nav (mf/use-fn @@ -258,21 +247,6 @@ (dd/fetch-projects (:id team)) (dd/clear-selected-files))))] - (mf/with-effect - (let [node (mf/ref-val rowref) - mnt? (volatile! true) - sub (->> (wapi/observe-resize node) - (rx/observe-on :af) - (rx/subs (fn [entries] - (let [row (first entries) - row-rect (.-contentRect ^js row) - row-width (.-width ^js row-rect)] - (when @mnt? - (reset! width row-width))))))] - (fn [] - (vreset! mnt? false) - (rx/dispose! sub)))) - [:article.dashboard-project-row {:class (when first? "first")} [:header.project {:ref rowref} diff --git a/frontend/src/app/main/ui/dashboard/search.cljs b/frontend/src/app/main/ui/dashboard/search.cljs index bcbcfd710..97644bcbc 100644 --- a/frontend/src/app/main/ui/dashboard/search.cljs +++ b/frontend/src/app/main/ui/dashboard/search.cljs @@ -6,16 +6,14 @@ (ns app.main.ui.dashboard.search (:require - [app.common.math :as mth] [app.main.data.dashboard :as dd] [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.dashboard.grid :refer [grid]] + [app.main.ui.hooks :as hooks] [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] - [app.util.webapi :as wapi] - [beicon.core :as rx] [rumext.v2 :as mf])) (mf/defc search-page @@ -37,31 +35,7 @@ (dd/clear-selected-files)))) (let [result (mf/deref refs/dashboard-search-result) - width (mf/use-state nil) - rowref (mf/use-ref) - itemsize (if (>= @width 1030) - 280 - 230) - - ratio (if (some? @width) (/ @width itemsize) 0) - nitems (mth/floor ratio) - limit (min 10 nitems) - limit (max 1 limit)] - (mf/use-effect - (fn [] - (let [node (mf/ref-val rowref) - mnt? (volatile! true) - sub (->> (wapi/observe-resize node) - (rx/observe-on :af) - (rx/subs (fn [entries] - (let [row (first entries) - row-rect (.-contentRect ^js row) - row-width (.-width ^js row-rect)] - (when @mnt? - (reset! width row-width))))))] - (fn [] - (vreset! mnt? false) - (rx/dispose! sub))))) + [rowref limit] (hooks/use-dynamic-grid-item-width)] [:* [:header.dashboard-header [:div.dashboard-title#dashboard-search-title diff --git a/frontend/src/app/main/ui/hooks.cljs b/frontend/src/app/main/ui/hooks.cljs index 4963043db..dd0babf9f 100644 --- a/frontend/src/app/main/ui/hooks.cljs +++ b/frontend/src/app/main/ui/hooks.cljs @@ -8,6 +8,7 @@ "A collection of general purpose react hooks." (:require [app.common.files.focus :as cpf] + [app.common.math :as mth] [app.main.broadcast :as mbc] [app.main.data.shortcuts :as dsc] [app.main.refs :as refs] @@ -16,6 +17,7 @@ [app.util.dom.dnd :as dnd] [app.util.storage :refer [storage]] [app.util.timers :as ts] + [app.util.webapi :as wapi] [beicon.core :as rx] [goog.functions :as f] [rumext.v2 :as mf])) @@ -345,3 +347,38 @@ state)) +(defn use-dynamic-grid-item-width + ([] + (use-dynamic-grid-item-width nil)) + + ([itemsize] + (let [width (mf/use-state (:items-width @storage)) + rowref (mf/use-ref) + + itemsize (cond + (some? itemsize) itemsize + (>= @width 1030) 280 + :else 230) + + ratio (if (some? @width) (/ @width itemsize) 0) + nitems (mth/floor ratio) + limit (min 10 nitems) + limit (max 1 limit)] + + (mf/with-effect + (let [node (mf/ref-val rowref) + mnt? (volatile! true) + sub (->> (wapi/observe-resize node) + (rx/observe-on :af) + (rx/subs (fn [entries] + (let [row (first entries) + row-rect (.-contentRect ^js row) + row-width (.-width ^js row-rect)] + (when @mnt? + (reset! width row-width) + (swap! storage assoc :items-width row-width))))))] + (fn [] + (vreset! mnt? false) + (rx/dispose! sub)))) + + [rowref limit])))