Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2020-12-23

Channels

#reagent
<
2020-12-23
>
dgb2313:12:40

this announcement is potentially interesting to #reagent #fulcro #re-frame and others who build on react. https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html

David Pham14:12:37

@juhoteperi thanks a lot for you work on reagent. It is extremely useful :)

Ian Fernandez21:12:52

I have a selectable box declared like: 

(defn read-ui [crud-state]
  (let [{:person/keys [by-id]
         :keys        [selected-person]} @crud-state
        data                             (vals by-id)]
    [:ul {:style {:list-style-type "none"
                  :padding         0
                  :margin          0}}
     (for [{:keys [id
                   name
                   surname]} data]
       [:li {:style    (if (= selected-person (get by-id id))
                         selection-style
                         {})
             :on-click #(swap! crud-state assoc :selected-person (get by-id id))}
        [:a {:style (if (= selected-person (get by-id id))
                      (assoc a-style :color "white")
                      a-style)
             :href  "#"}
         (str surname ", " name)]])]))

Ian Fernandez21:12:26

how can I dissoc from :selected-person when I click outside of this read-ui?

Ian Fernandez21:12:35

there's a way to do this?

p-himik21:12:03

Assuming crud-state is a regular ratom, you can just swap! it inside some handler. In your case, it should be the :on-blur or the :on-focusout handler, depending on your React version. I think.

Ian Fernandez22:12:04

it's a regular atom

p-himik22:12:38

You should replace it with a ratom, otherwise the component will not be re-rendered when its value changes.

Ian Fernandez22:12:55

it's a regular ratom

Ian Fernandez22:12:25

:on-focusout #(swap! crud-state dissoc :selected-person) like this?

Ian Fernandez22:12:39

on the same component that has :on-click?

p-himik22:12:16

Something like this, yes. Ah, hold on - I might've misunderstood the intent. Do you want to listen for all clicks outside of read-ui or just for when the focus is lost?

Ian Fernandez22:12:51

I think it's just for when the focus is lost

p-himik22:12:39

Ah, OK. Then it should be the top level :ul, I think. If it doesn't work, read about how focus/blur events are bubbled - it's been some time, I don't recall much.

Ian Fernandez22:12:14

didn't worked, but I'll try to read some about focus

Ian Fernandez22:12:40

it was :on-blur thanks @U2FRKM4TW 😄

👍 9
achikin22:12:11

Just came across Reagent 1.0.0 https://github.com/reagent-project/reagent/blob/master/CHANGELOG.md#100-2020-12-21 and looking at the @juhoteperi https://github.com/reagent-project/reagent/blob/master/examples/functional-components-and-hooks/src/example/core.cljs I have a question: were functional components introduced only to allow react hooks in reagent components or there any other benefits of using them (apart from custom compiler stuff)?

p-himik22:12:38

FWIW I think there are some performance measurements (perhaps, with an older version of Reagent) that show that if you switch the default Hiccup compiler from class-based to function-based components then performance degrades slightly.

achikin22:12:26

Yes, I’ve seen that. I’m trying to imagine some cases where I can get benefits from switching to functional components in my current codebase.

p-himik22:12:10

Right, just wanted to mention just in case.

David Pham05:12:55

I would switch to it to reuse new packages in JS land.

p-himik08:12:30

If those packages don't require their users to use hooks then you can use them as is with no problems.

juhoteperi09:12:42

I should probably make this clearer somewhere in the docs: I think Reagent hooks support is currently useful for interop or "small use". A few hooks like useContext, useLayoutEffect could be quite useful used together with RAtoms. But if you want to use Hooks to store the app state and everything. Helix is probably better fit.

juhoteperi09:12:38

And :f> can be used to make just certain components "functions components" so they work with hooks, no need to switch everything over. (Yes, this is a bit backwards, you need to turn the component to function component on the use place, instead of where it is defined. I think I had some reason to do it like this...)

David Pham14:12:27

Do you think it might be interesting to have a quick example in the doc of interactoin with helix?

David Pham14:12:11

I am interested to use this library https://github.com/pmndrs/react-three-fiber and I believe the new functional components will be reallllyyy useful. Would you go with reagent of with helix?