Improvement: support clear after

[ken-kost]

Option clear_after, an integer representing milliseconds when to :clear_flash on self()

[srcrip]

@ken-kost sorry I'm coming back to this now, but can you remind me, did we have an issue discussing this one? I'm kind of hesitant to merge it cause its such a small bit of code that you can add to your projects if you want flashes to not last.

[srcrip]

Well, there is another issue where people seem to want this so I will go ahead with it, but I just want to test it locally first.

[ken-kost]

not sure, might be some issue. I'll check tomorrow. 👍

[luislhsc]

My toasts never goes away on version 0.8, I tried to use the default duration as mentioned on docs, but it didn't work
e.g. const liveToastHook = createLiveToastHook(duration, maxItems)

Would this PR help in this case?

[ken-kost]

@srcrip There is a problem with this. The self() is directed to live view from which it was called - which means you need to have handle info for clearing flash on each of them. That's not good. But I'm not sure how would you encapsulate the clearing of the flash in LiveToast itself... 🤔 There is a clear handle event in live toast live component, maybe somehow utilize that? wdyt?

[srcrip]

@luislhsc That doesn't sound related... could you open an issue with a repro?

[srcrip]

@ken-kost Hi, I have checked out the PR now and I see what you mean. The simplest thing to do would be to rely on JS to solve this. There's already a mechanism in place to clear the flashes from the frontend--it get's used to make toasts fall back to flashes properly across navigations by emitting a flash and a toast and just removing the duplicate flash from the frontend (I know that's kinda complicated). I can probably just implement it on this PR.

[srcrip]

ok I've implemented it now in the way I think makes the most sense. @ken-kost please test and let me know if it works ok for you.

[ken-kost]

ok I've implemented it now in the way I think makes the most sense. @ken-kost please test and let me know if it works ok for you.

Looks good, I'll check it out tomorrow. 👍

[ken-kost]

I did git pull and started my project. I have

    <LiveToast.toast_group
      flash={@flash}
      connected={assigns[:socket] != nil}
      corner={:top_left}
      toasts_sync={assigns[:toasts_sync]}
      flash_duration={3000}
    />

It's not working for me. I plugged a console log into live_toast.ts but no logs. Am I missing some extra configuration or something?

[ken-kost]

Also, unrelated: I suggest putting {:phoenix, "~> 1.7"} to make it more lax.

[srcrip]

Also, unrelated: I suggest putting {:phoenix, "~> 1.7"} to make it more lax.

Yeah I set it like that when I had some issues with the formatter and thought specifying a different phoenix version may have had some changes to it... I can try and relax it and see if it all works fine. I know there was some formatter plugin changes in a recent LV version too I think?

It's not working for me. I plugged a console log into live_toast.ts but no logs. Am I missing some extra configuration or something?

Ah yes you're right, I added the new setting to the lower level components but not to toast_group. I'll need to make a change with that.

[srcrip]

ok @ken-kost you can try it out now

[ken-kost]

Briefly I tried it and it still didn't work. 🤷

[srcrip]

@ken-kost how about I make a commit on this branch with the demo, setting flash_duration in the toast_group, and you can just run the demo locally and see?

[srcrip]

ok @ken-kost, if you have this branch locally, you can run mix phx.server from the /demo directory, and click the 'add flash' button on the frontpage of the demo to test the timeout on a LV. You should also be able to see it work on the deadview demo page.

[ken-kost]

@srcrip Okay, I tried again in my app - doesn't work. I started demo and toasted me and it didn't disappear after 3 seconds.

[srcrip]

@ken-kost can you confirm that you're testing these buttons:

These are the ones in the demo that emit flashes, which are the only thing that would be affected by this feature... the "Toast Me" button at the top emits a LiveToast toast

[ken-kost]

@ken-kost can you confirm that you're testing these buttons:

These are the ones in the demo that emit flashes, which are the only thing that would be affected by this feature... the "Toast Me" button at the top emits a LiveToast toast

oh, my bad. I'll try better. 🙇

[ken-kost]

Yep, I can confirm that it's working in demo. 👍 What I wanted is for it to be related to put_flash functionality - that's what I wanted to clear automatically based on configured duration.

[srcrip]

Yeah hooking into the library functions themselves is the best bet I think, then at least we can make flashes emitted from the library behave this way