Global livewire notifications with SweetAlert
Tags: livewire, laravel, sweetalert
Published: 2020-08-19 13:07:06

EDIT: I created a new idea for this, go to https://github.com/PH7-Jack/wireui to know


It is normal in all software after performing an action, showing a confirmation message or even a warning. With Livewire software development is simpler in some ways, but showing notifications can be a bit of a chore at first. With that, we can take advantage of what Livewire has in its ecosystem for our benefit.
Let's use Livewire [events](https://laravel-livewire.com/docs/events)

# Step 1

# Add listeners
In this step, we will prepare the project to listen to livewire events
In your global layout file, place the following listener (in my case it's `resources/views/components/layouts/base.blade.php`):
```
<head>
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.css" />
...
</head>

...
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
 <script>
        const SwalModal = (icon, title, html) => {
            Swal.fire({
                icon,
                title,
                html
            })
        }

        const SwalConfirm = (icon, title, html, confirmButtonText, method, params, callback) => {
            Swal.fire({
                icon,
                title,
                html,
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText,
                reverseButtons: true,
            }).then(result => {
                if (result.value) {
                    return livewire.emit(method, params)
                }

                if (callback) {
                    return livewire.emit(callback)
                }
            })
        }

        const SwalAlert = (icon, title, timeout = 7000) => {
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: timeout,
                onOpen: toast => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            })

            Toast.fire({
                icon,
                title
            })
        }
            
        document.addEventListener('DOMContentLoaded', () => { 
            this.livewire.on('swal:modal', data => {
                SwalModal(data.icon, data.title, data.text)
            })

            this.livewire.on('swal:confirm', data => {
                SwalConfirm(data.icon, data.title, data.text, data.confirmText, data.method, data.params, data.callback)
            })

            this.livewire.on('swal:alert', data => {
                SwalAlert(data.icon, data.title, data.timeout)
            }) 
        })
    </script>
```

These methods and listeners will show confirmation notifications or confirmation alerts globally in your project, being able to broadcast directly from Livewire

## How to fire theses functions?
In every Livewire component you can send events using the code below

```
<?php

namespace App\Http\Livewire;

use Livewire\Component;

class MyComponent extends Component
{
    public function render()
    { 
        return view('livewire.shared.my-component');
    }
    
    public function showModal()
    { 
        $this->emit('swal:modal', [
            'type'  => 'success',
            'title' => 'Success!!',
            'text'  => "This is a success message",
        ]);
    }
    
    public function showAlert()
    { 
        $this->emit('swal:alert', [
            'type'    => 'success',
            'title'   => 'This is a success alert!!', 
            'timeout' => 10000
        ]);
    }
    
    public function showConfirmation()
    { 
        $this->emit("swal:confirm", [
            'type'        => 'warning',
            'title'       => 'Are you sure?',
            'text'        => "You won't be able to revert this!",
            'confirmText' => 'Yes, delete!',
            'method'      => 'appointments:delete',
            'params'      => [], // optional, send params to success confirmation
            'callback'    => '', // optional, fire event if no confirmed
        ]);
    }
}
```