ah, yeah, I was thinking on pmutate, but yes, for load its fine on post-mutation (still feels dirty)

@wilkerlucio I agree...I don't like the chained stuff. But in certain circumstances it is unavoidable.

Thanks for the help. I missed the warning section in the docstring 😥, I managed to solve my case with the setTimeout trick

Looking for a way to detect mouse clicks outside of a component so I can close a drop down. A react approach is described here https://www.jamestease.co.uk/blether/detect-clicks-outside-element-with-react-components. Unfortunately, I cannot see a way of passing the same function to both the addEventListener and removeEventListener in the defsc lifecycle methods and have the defsc this supplied to the function (so I can trigger a mutation). Any suggestions?

@mandor2017 what I do on those cases is have some react components that can attach/dettach events on the DOM directly, so you can capture clicks in the body, something like this:

(fp/defsc DomListener [this _]
  {
   :componentDidMount
   (fn []
     (let [{::keys [target event action]} (fp/props this)
           target (get-target target)]
       (assert event "You must provide an event to dom-listener")
       (gobj/set this "handler" action)
       (if target
         (.addEventListener target event action))))
   
   :componentWillUnmount
   (fn []
     (if-let [handler (gobj/get this "handler")]
       (let [{::keys [target event]} (fp/props this)
             target (get-target target)]
         (if target
           (.removeEventListener target event handler)))))}

  (dom/noscript nil))

(def dom-listener (fp/factory DomListener))

so then in your component you cna do: (dom-listener {::target js/document.body ::event "click" ::action (fn [] (do-something))}

@mandor2017 Another trick is to just have your app render a top-level div that covers the screen, and attach event handlers via React to that.

But if you just want to make a method on the component, use the :protocols option to add a method:

(defsc Boo [t p]
  {:protocols [Object
               (handle-click [this] . ..)]}
  ...)

@tony.kay Perfect. Thank you.

you could also use componentDidMount (componentWillMount is being deprecated, so might as well get used to it) to put a function into the object

that’s most often what I do when I need a shared saved function for the instance lifetime:

(gobj/set this "handle-click" (fn [...] ...))

(coming deprecation announced in 16.3 https://reactjs.org/blog/2018/03/29/react-v-16-3.html)

OK.

that also lets you “close over” this, so you shouldn’t need any js bind stuff

@tony.kay juts saying, componentWillMount is going off, but componentWillUnmount stays, so you can still have element handlers 🙂

should prim/integrate-ident have a :remove option? for removing an ident from a list

@wilkerlucio actually you did say about what I said...didn't mean to sound contradictory 🙂

@currentoor bad naming...I would be fine with a remove-ident helper

and some GC support in general...say you want to name the tables to clean...`(clean-ident #{table-names} ident)`

a recursive transform that just wipes them out

probably both...one to clear them from a list, but another to just scan recursively and get rid of them

perhaps the table names could be optional, in which case it cleans all of state

@tony.kay i'll make an issue and submit a PR later

@currentoor this can help with the cleanup: https://github.com/fulcrologic/fulcro-inspect/blob/develop/src/client/fulcro/inspect/helpers.cljs#L123-L140

yeah for sure, thanks!

i guess that would need to be an optional thing right?

@wilkerlucio

cuz we don't have a way to declare component entities like datomic

so we don't know if deletes should go across links?

now i'm thinking it might not be worth it, or we could have a third deep-clean-ident function

yup

https://github.com/fulcrologic/fulcro/issues/216

or deep-clean-entity sounds a little better, and it won't take in table names