This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2023-10-18
Channels
- # announcements (12)
- # babashka (6)
- # beginners (62)
- # calva (3)
- # cider (41)
- # clerk (5)
- # clojure (192)
- # clojure-bay-area (1)
- # clojure-europe (14)
- # clojure-norway (97)
- # clojure-uk (6)
- # clojuredesign-podcast (4)
- # clojurescript (30)
- # code-reviews (7)
- # cursive (32)
- # datahike (4)
- # datomic (35)
- # docker (8)
- # emacs (8)
- # events (1)
- # fulcro (13)
- # helix (19)
- # hoplon (4)
- # hyperfiddle (37)
- # jobs-discuss (10)
- # membrane (11)
- # missionary (19)
- # off-topic (28)
- # polylith (8)
- # portal (10)
- # practicalli (8)
- # re-frame (31)
- # reitit (6)
- # shadow-cljs (39)
- # timbre (3)
- # vim (1)
- # xtdb (6)
Question to everyone: How do you prevent yourself and your collaborators from accidentally reusing state paths? Maybe the question can be rephrased more generally: how to you organize the overall application state so that you don't accidentally reuse paths, and maybe conversely so that you can discover paths that would be sensible to reuse?
Common storage for common data. Namespaced or composite keys for the rest. Discovery via documented functions that wrap usage of those keys.
Just to expand; is your common data then not namespaced?
Ah. So you have paths like [:common/data :user-name]
?
Thanks 🙂 I asked the question expecting answers like that, and it's great to hear it confirmed. Always dig your input, @U2FRKM4TW
Related data shares related prefix in a predictable way so that can help with “discovery”. That said, when things get big enough, “discovery” of what already exists can be tricky still.
AgGridReact need for help 😞 I want to use ag-grid (https://www.ag-grid.com/react-data-grid/) in my web-app according to https://day8.github.io/re-frame/Using-Stateful-JS-Components/ I have below code (which works - displays ag-grid on a page)
(defn data-grid-inner []
(let [ref (react/useRef)]
(r/create-class
{:display-name "ag-grid"
:reagent-render
(fn []
[:div {:className :ag-theme-alpine
:style {:height 500}}
[c/ag-grid
{:ref ref
:defaultColDef {:type :numericColumn
:sortable false
:cellEditorParams {:showStepperButtons true}}}]])
:component-did-mount
(fn [comp]
(let [[_ rows columns] (r/argv comp)]
(log/debug :api-update (.. ref -current -api))
#_(.setColumnDefs @api columns)))
#_#_:component-did-update update})))
(defn data-grid-outer []
(let [rows @(rf/subscribe [:table/rows :trajectory/points])]
(fn [] [:f> data-grid-inner rows columns])))
but the problematic line is
(log/debug :api-update (.. ref -current -api))
it shows undefined
(screenshot attached)
but when I remove -api
->
(log/debug :api-update (.. ref -current))
it looks ok (screenshot):
I looked for solution on Slack and Google, tried different forms of interop (^js, #js, goog.object, oops. threading macros, dotdot)
Could you help me, please?It might be related to the fact that log shows not the state of object at the moment of logging: https://developer.mozilla.org/en-US/docs/Web/API/console/log#logging_objects
@U071CG4QY - I've uncomment and change line below to: (.setColumnDefs (.. ref -current -api) columns)
and it gives: Cannot read properties of undefined (reading 'setColumnDefs')
(log/debug :api-update (.. ref -current -columnApi))
also gives undefined
, but, i.e.:
(log/debug :api-update (.. ref -current -props))
returns the actual valueCould you please provide me with require for ag-grid
and the way you’ve used r/adapt-react-class
on AgGrid
?
["ag-grid-react" :as ag]
(def ag-grid (r/adapt-react-class ag/AgGridReact))
After trying to reproduce and fast search it looks an issue with documentation. I’ve seen a few mentions of onGridReady
.
There is some discussion mentioning useEffect
or onGridReady
: https://github.com/ag-grid/ag-grid/issues/4915#issuecomment-1057181487
It seems like the easiest possible way is to use :onGridReady
and store a reference to API in atom.
Ah, and there is also useGridApi
hook: https://github.com/ag-grid/ag-grid/blob/bea75ab74d547117ddda71fa97cb12d1c7fcf218/grid-packages/ag-grid-react/src/useGridApi.ts
@U071CG4QY - I tried, failed, but finally I removed AgGridReact in favour of vanilla JS and now it looks like that:
...
[reagent.core :as r]
["ag-grid-community" :as ag]
...
(defn- data-grid-inner []
(let [data-grid (atom nil)
update #(let [[_ cols rows] (r/argv %)
api (.. @data-grid -gridOptions -api)]
(.setColumnDefs api (clj->js cols))
(.setRowData api (clj->js rows)))]
(r/create-class
{:display-name "data-grid"
:reagent-render #(vector :div {:id "data-grid"
:className :ag-theme-alpine
:style {:height 350}})
:component-did-mount #(do (reset! data-grid
(ag/Grid. (.getElementById js/document "data-grid") {}))
(update %))
:component-did-update update})))
(defn data-grid [columns rows]
[data-grid-inner columns @rows])
...
(def columns [{...} ... {...}])
...
...
[data-grid columns (rf/subscribe [rows points])]
...
@U0580SHBHQ9 where you failed?
With using ag-grid react component and error like "Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks"