re-frame

https://github.com/Day8/re-frame/blob/master/docs/README.md https://github.com/Day8/re-frame/blob/master/docs/External-Resources.md
Oliver George 2021-01-11T03:42:31.221100Z

Had a quick scan of my code for an example. Here's one I found which might help clarify where I'm coming from. This is wrapped as a "promise based" fx handler. https://gist.github.com/olivergeorge/86b1626b7241018d7439462fc4349a77 Turns out I do store the token in app-db in this app so it's more an example of where the IO/API interactions make more sense bundled together rather than driving every individual API call via an event handler request/response pair.

Oliver George 2021-01-11T03:51:59.222300Z

In conclusion... perhaps I can't answer your question directly! Oops.

rap1ds 2021-01-11T08:28:56.222600Z

Does anyone remember what's the original source of this code? (defmacro def-sub [name & args] {:pre [(symbol? name)]} (let [kw (keyword (ns-name *ns*) (str name "|sub"))] (do` (def ~name ~kw) ~(macroexpand (rf/reg-sub ~kw ~@args)))))` Someone posted here on this channel list to Gist with this piece of code some time ago. I wrote down this piece of code and a link to the discussion (https://clojurians.slack.com/archives/C073DKH9P/p1591371104264100) where it was discussed but I can't access it anymore because it's too old.

rap1ds 2021-01-11T08:30:36.222900Z

Oh haha, nvm, problem solved πŸ˜„ Even though I can't access the link the with my browser, the moment I posted it here Slack embedded the message here and I can now see the link to the Gist πŸ˜„

tugh 2021-01-11T09:14:34.225600Z

Is there a lib for interacting with dom elements? Something like predefined coeffects and effects like :get-element-by-id :set-inner-html

p-himik 2021-01-11T09:28:54.225800Z

I've never seen it. And I would be very cautious about mixing DOM manipulation and re-frame machinery. What's the underlying problem - why do you need to alter DOM manually when you're using React?

lassemaatta 2021-01-11T09:35:23.226Z

I'm doing some maintenance work on an old re-frame app, where the original author has used the following pattern several times (in addition to more traditional reg-sub subscriptions). This was the authors first clojure(script) project. Am I right to assume that this could be replaced with a simpler reg-sub subscription or does the reg-sub-raw + reaction do something special here?

lassemaatta 2021-01-11T09:40:07.227600Z

This is pretty much identical to the examples given for reg-sub-raw in the re-frame docs, but I'm slightly confused why go through all this when reg-sub does the same thing.

2021-01-11T09:41:51.228Z

reg-sub wasn't there for very early re-frame

lassemaatta 2021-01-11T09:43:17.228200Z

that might explain it, based on the git history the initial version used was 0.4.1

2021-01-11T09:44:20.228400Z

Maybe the author originally used register-sub (now deprecated) and then moved to reg-sub-raw and never made the jump to the new reg-sub

2021-01-11T09:44:37.228600Z

But you are right ... that should now be written as something like:

(reg-sub 
  :something 
  (fn [db [_ & path]    ;;  <-- note the underscore
     (get-in db path)))

lassemaatta 2021-01-11T09:48:20.228900Z

yeah, I found a commit where a bunch of register-sub s where changed to either reg-sub or reg-sub-raw (when calls to subscribe were needed)

lassemaatta 2021-01-11T09:49:52.229100Z

perhaps it wasn't possible to provide the signal function back then, so reg-sub-raw was the only possibility

lassemaatta 2021-01-11T09:50:08.229300Z

in any case, this solves my problem, thanks πŸ™‚

tugh 2021-01-11T11:02:24.229500Z

I have a div with many children and want to set all of their width to the widest one. I've a :component-did-mount callback like below:

{:component-did-mount #(dispatch [::events/assoc-current-state
                                     :option-style
                                     {:width   (utils/max-child-width (str key "-options"))
                                      :opacity 1}])
:reagent-render ...)

tugh 2021-01-11T11:02:52.229700Z

:option-style is passed through the corresponding functions

tugh 2021-01-11T11:03:27.229900Z

which means i'm not creating side-effects by manipulation dom/dom properties. it is received from subscription

tugh 2021-01-11T11:04:20.230100Z

the problem is utils/max-child-width is not pure:

(defn- children
  "Finds child nodes of a DOM element by id."
  [id]
  (some-> id
          dom/getElement
          .-childNodes
          array-seq))

(defn max-child-width
  "Finds width of the widest child. Returns nil when there are no children."
  [id]
  (->> (children id)
       (map #(.-offsetWidth %))
       (apply max)))

p-himik 2021-01-11T11:05:14.230300Z

> I have aΒ divΒ with many children and want to set all of their width to the widest one. I am almost 100% sure that you can do that with CSS. Even if it's not possible for some reason - don't use re-frame for that. Use Reagent, especially since you're already using lifecycle methods.

tugh 2021-01-11T11:07:06.230600Z

Well, I was also very believed in that I can solve this via CSS but no luck. All children contain an arbitrary text and I won't be able to know which child takes how much space before render.

tugh 2021-01-11T11:07:31.230800Z

To clarify, I don't want all children to take all of the width of the parent

tugh 2021-01-11T11:07:39.231Z

so flex is not an option

tugh 2021-01-11T11:08:14.231200Z

I want to find(or calculate beforehand, if possible) the widest child's width

tugh 2021-01-11T11:09:06.231400Z

Can you eloborate on "don't use re-frame for that. Use Reagent,"

tugh 2021-01-11T11:09:34.231600Z

Should I avoid using events&subs for this kind of thing?

p-himik 2021-01-11T11:17:59.231800Z

> To clarify, I don't want all children to take all of the width of the parent Is introducing an intermediate div not an option? The you won't touch the parent div that you don't want to touch. Also, there are other solutions than flexbox. One that I know of is grid. Maybe there are others. Hard to come up with something without knowing your markup and requirements. > Should I avoid using events&subs for this kind of thing? Absolutely. Re-frame is for managing your app's state. A width of a particular div just to make it look nice is not your app's state, it's just some incidental representation.

tugh 2021-01-11T12:55:41.232Z

Introducing an intermediate dive is an option but I don't understand how it could solve my problem.

tugh 2021-01-11T12:57:16.232200Z

I also keep some flags in my app state. one example is :show-more? which stores a boolean for a switch button

tugh 2021-01-11T12:57:58.232400Z

is that also bad? I was using local states with reagent atoms but it feel cleaner to use the app db

tugh 2021-01-11T12:58:29.232600Z

another reason is not losing the switch's state after hot reload

p-himik 2021-01-11T13:01:33.232800Z

You said it yourself - it's switch's state. When something is a state that you care about, store it in app-db. IMO when the width of some element is not representative of anything in your domain model, it shouldn't be considered state. YMMV.

1πŸ™ƒ
tugh 2021-01-11T14:11:54.233100Z

Thanks for your help! πŸ™Œ

1πŸ‘