♻️ Move card width calculation to hook

This commit is contained in:
alonso.torres 2023-11-24 15:33:59 +01:00
parent a9fc46f7e6
commit 58afa7498e
5 changed files with 45 additions and 111 deletions

View file

@ -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