Duplicate Toast - Githubissues

reihanboo commented 3 months ago

tos

I did the installation tutorial. Here's some snippet: app.js

import './bootstrap';
import '../../vendor/masmerise/livewire-toaster/resources/js';
import './../../vendor/power-components/livewire-powergrid/dist/powergrid'
import './../../vendor/power-components/livewire-powergrid/dist/tailwind.css'
import flatpickr from "flatpickr";

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

app.blade.php

<!DOCTYPE html>
<html class="dark" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Elearning') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        <!-- Scripts -->
        <script>
            localStorage.theme = 'dark'

            if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                document.documentElement.classList.add('dark')
            } else {
                document.documentElement.classList.remove('dark')
            }
        </script>
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="font-sans antialiased">
        <div class="min-h-screen bg-zinc-100 dark:bg-zinc-900">
            @include('layouts.navigation')

            <!-- Page Heading -->
            @if (isset($header))
                <header class="bg-white dark:bg-zinc-800 shadow">
                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                        {{ $header }}
                    </div>
                </header>
            @endif

            <!-- Page Content -->
            <div class="py-6 mx-auto sm:px-6 lg:px-8">
                <main class="bg-white dark:bg-zinc-800 overflow-hidden shadow-sm sm:rounded-lg p-4 dark:text-white border-b border-gray-200 dark:border-zinc-700">
                    {{ $slot }}
                </main>
            </div>
        </div>
        <x-toaster-hub />
    </body>
</html>

toaster.php is left unchanged, but I did publish it.

tailwind.config.js

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
const colors = require('tailwindcss/colors')

/** @type {import('tailwindcss').Config} */
export default {
    darkMode: 'class',

    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './app/Http/Livewire/**/*Table.php',
        './vendor/power-components/livewire-powergrid/resources/views/**/*.php',
        './vendor/power-components/livewire-powergrid/src/Themes/Tailwind.php'
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
            colors: {
                "pg-primary": colors.zinc
            }
        },
    },

    plugins: [forms],
};

Here's how I'm using it. Though it happens everywhere, not just Livewire components.

Create.php

<?php

namespace App\Livewire\User;

use App\Models\User;
use Illuminate\Support\Facades\Redirect;
use Livewire\Component;
use Masmerise\Toaster\Toastable;

class Create extends Component
{
    use Toastable;

    public $name = '';
    public $email = '';
    public $password = '';

    public function save()
    {
        User::create(
            $this->only(['name', 'email', 'password'])
        );

        return Redirect::route('users.index')->success('User created successfully');
    }

    public function render()
    {
        return view('livewire.user.create');
    }
}

mabdullahsari commented 3 months ago

Hi, can you inspect the network tab and see how many toasts are being dispatched in the response payload? You should see them under the effects key!

newtovaux commented 2 months ago

@mabdullahsari I'm seeing this too - double toasts when using redirect()->route('my.view', [...])->success('created!');

I'm also seeing console errors: Uncaught ReferenceError: toasterHub is not defined

mabdullahsari commented 2 months ago

@mabdullahsari I'm seeing this too - double toasts when using redirect()->route('my.view', [...])->success('created!');

I'm also seeing console errors: Uncaught ReferenceError: toasterHub is not defined

Hi, can you inspect the network tab and see how many toasts are being dispatched in the response payload? You should see them under the effects key!

newtovaux commented 2 months ago

Apologies, @mabdullahsari where is the effects key?

mabdullahsari commented 2 months ago

Apologies, @mabdullahsari where is the effects key?

You need to find the Livewire request (generally called update) and look at the Response tab. It should contain a payload similar to (but not exactly like) this:

newtovaux commented 2 months ago

I have sorted it I believe, Alpine/Livewire were being loaded twice.

I've removed the following from my resources/js/app.js:

import Alpine from 'alpinejs';
Alpine.start();

... and it now works! Single Toast and no Duplicate Alpine errors in console.

Thanks for your help @mabdullahsari, and @reihanboo I hope this is useful for you too.

mabdullahsari commented 2 months ago

I have sorted it I believe, Alpine/Livewire were being loaded twice.

I've removed the following from my resources/js/app.js:
import Alpine from 'alpinejs';
Alpine.start();
... and it now works! Single Toast and no Duplicate Alpine errors in console.

Thanks for your help @mabdullahsari, and @reihanboo I hope this is useful for you too.

I'm glad you got it sorted!

masmerise / livewire-toaster

Duplicate Toast #40