Fix the banner not showing again after dismissed by the user if the next message contents are the same

[tomsb]

This alters already accepted PR #1045 to trigger the banner even if the next message contents did not change.

Explanation:
watch: setting the same value for a primitive type (number, string, boolean...) will not be considered as a value change.
watchEffect: triggers the change even if you set the same value, showing the banner again.

How to reproduce:

1. Flash a banner with the message "Action successful."
2. The user acknowledges the banner and clicks on the x button.
3. Flash another banner with the same message "Action successful."
4. No banners will be shown again, unless the message contents changes, user manually reloads the page or does a non-Inertia navigation.

[timacdonald]

Hey @tomsb,

Could you show us the minimum code required to reproduce the issue we are trying to fix here?

I've made the following change to a fresh Jetstream install and things seem to work as expected?

// web.php

Route::middleware([
    'auth:sanctum',
    config('jetstream.auth_session'),
    'verified',
])->group(function () {
    Route::get('/dashboard', function () {
-        return Inertia::render('Dashboard');
+        return Inertia::render('Dashboard', [
+            'jetstream' => [
+                'flash' => [
+                    'banner' => 'Welcome to Jetstream'
+                ],
+            ],
+        ]);
    })->name('dashboard');
});

The banner continues to reappear after it is dismissed without the need for a manual reload or a non-inertia request.

Screen.Recording.2023-08-11.at.9.11.13.am.mov

[tomsb]

Sure! Minimum code required (using fresh Jetstream install):

// app/Actions/Fortify/UpdateUserProfileInformation.php

public function update(User $user, array $input): void
{
    Validator::make($input, [
        'name' => ['required', 'string', 'max:255'],
        'email' => ['required', 'email', 'max:255', Rule::unique('users')->ignore($user->id)],
        'photo' => ['nullable', 'mimes:jpg,jpeg,png', 'max:1024'],
    ])->validateWithBag('updateProfileInformation');

    if (isset($input['photo'])) {
        $user->updateProfilePhoto($input['photo']);
    }

    if ($input['email'] !== $user->email &&
        $user instanceof MustVerifyEmail) {
        $this->updateVerifiedUser($user, $input);
    } else {
        $user->forceFill([
            'name' => $input['name'],
            'email' => $input['email'],
        ])->save();
    }

+   request()->session()->flash('flash.banner', 'Profile saved.');
+   request()->session()->flash('flash.bannerStyle', 'success');
}

Steps to reproduce:

1. Open the profile page
2. Click on the "Save" button (under Profile Information)
3. Banner with "Profile saved." will appear
4. Close the banner with an "x"
5. Click on the same "Save" button again
6. Banner will not reappear.

[timacdonald]

Thanks, @tomsb. Just confirmed this one.