Use flux:toast in regular routes, not just Livewire routes

[petervandijck]

Loving Flux, but using limited Livewire.
I am trying to use flux:toast in a regular route, where I POST to a controller, then redirect to some other page.

In the controller, I tried:

use Flux;

Flux::toast('Starting analysis of document.');
return redirect($request->forward_to);

Error: Call to a member function dispatch() on false

1. Would this be expected to work?
2. If so, how would I make it work?

[ju5t]

This is not expected to work. dispatch() is a Livewire method.

[petervandijck]

It solves being able to send a Flash message in a non_livewire controller, and have it show up as a Flux toast.

Let’s say I have a non-Livewire Laravel controller. I do some action (say, a POST) and then I redirect to some
new page and I would like to use flux toasts to show my flash message.

I might be misunderstanding.My understanding is that today, I can’t just do that. I tried it. In other words today, I cannot dispatch a flux toast from the traditional Laravel controller. And that's a problem because I would like all my flash messages in my app to use the flux toast, not only the ones that are sent from a Livewire action.

[ju5t]

I thought you wanted to use toasts in an app without Livewire.

[cbautista103]

this.$dispatch('toast-show', {
                    'slots': {
                        'text': text,
                        'heading': heading,
                    },
                    'dataset': {
                        'variant': variant
                    }
                })

@ju5t or @petervandijck, any idea how can I make this work from Javascript in a normal Livewire/javascript context? Here's what I've got, but it's not working for me. The dispatch variable is console.log()ed as undefined.

@script
<script>
    document.addEventListener('livewire:initialized', () => {
        console.log("Livewire:initialized heard from dashboard.blade.php...");
        let dispatched = Livewire.dispatch('toast-show', {
            'slots': {
                'text': 'Livewire has been initialized',
                'heading': 'Toast dispatched:',
            },
            'dataset': {
                'variant': 'success'
            }
        });
        console.log(dispatched);
    });
</script>
@endscript

[cbautista103]

I'm coming back to answer my own question... it appears that you have to call the $dispatch from a livewire component, not the global Livewire object. The calculateToastDuration() function I added in is totally unnecessary, but something I find to be convenient for myself rather than determining that manually.

The setup in something like app.js...

document.addEventListener('livewire:initialized', () => {

    // Duration calculation function based on text length
    function calculateToastDuration(text) {
        const baseDurationPerCharacter = 150; // 150 ms per character
        const minDuration = 2000;
        const maxDuration = 10000;

        const calculatedDuration = text.length * baseDurationPerCharacter;
        return Math.min(Math.max(calculatedDuration, minDuration), maxDuration);
    }

    // Extend Livewire with a toast function
    Livewire.toast = function(text, heading = '', variant = '', position = 'bottom right', duration = null) {
        // Calculate duration if not provided
        duration = duration || calculateToastDuration(text);

        // Dispatch the toast event
        const component = Livewire.first();
        if (component) {
            component.$dispatch('toast-show', {
                'duration': duration,
                'slots': {
                    'text': text,
                    'heading': heading
                },
                'dataset': {
                    'variant': variant,
                    'position': position,
                }
            });
        } else {
            console.warn('No Livewire component found to dispatch toast event');
        }
    };
});

Usage in component

@script
<script>
    onNavigate(() => {
        Livewire.toast('Navigated to widgets list');
    });
</script>
@endscript

Note that onNavigate is a global helper function I used to make it easy to attach a navigate listener that doesn't fire every time ANY page is navigated to. If you do livewire:navigated from a component @script, then any code in that listener will then continue to run when any component is navigated to, not just the one that originally set up the listener.

window.onNavigate = function(callback) {
    function handler() {
        callback(); // Run the callback
        document.removeEventListener('livewire:navigated', handler); // Remove after first run
    }
    document.addEventListener('livewire:navigated', handler);
};

[ju5t]

@cbautista103 not really sure why you'd want to use native JS for it. Alpine is bundled in with Livewire. Your solution looks way too complex for what you're doing.

[petervandijck]

I figured out a way: https://github.com/petervandijck/oldschool-fluxtoasts It works well and is fairly clean.

[dicktornfeldt]

This what exactly what I was looking for. Now I finally could switch to Flux toast and remove: https://github.com/masmerise/livewire-toaster

[petervandijck]

In an app using Flux (and therefore LiveWire), but in a Laravel controller that is not a LiveWire controller. Does my usecase and solution make sense to you?

…

On Wed, Oct 23, 2024 at 1:57 PM ju5t ***@***.***> wrote: I thought you wanted to use toasts in an app without Livewire. — Reply to this email directly, view it on GitHub <#505 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAD6PVHPG7H3BU7YCKC4FJ3Z47WPZAVCNFSM6AAAAABQMXDZQ6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCMBTGMYDGOA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

-- -- My new company: we do AI: https://www.getsimplyput.ai/ https://www.linkedin.com/in/petervandijck/ http://petervandijck.com/ Cell: +57 (300) 836-7690

[ju5t]

I think it can be improved a bit, because wire:init will do another round trip to the server. I would replace it with Alpine insteadand pass @js($this->toastData) to it.