Fixed livewire script loading issues

app/Livewire/Auth/RegisterUser.php

@@ -6,10 +6,7 @@ use App\Livewire\Forms\RegisterUserForm;
 use App\Mail\PasswordResetNewUser;
 use App\Models\User;
 use App\Models\UserProfile;
-use Illuminate\Http\RedirectResponse;
-use Illuminate\Log\Logger;
 use Illuminate\Support\Facades\Mail;
-use Illuminate\View\View;
 use Livewire\Component;
 
 class RegisterUser extends Component

app/Livewire/MovieLists.php

@@ -4,6 +4,7 @@ namespace App\Livewire;
 
 use App\Livewire\Forms\MovieListForm;
 use App\Models\MovieList;
+use Exception;
 use Livewire\Component;
 
 class MovieLists extends Component
@@ -20,7 +21,12 @@ class MovieLists extends Component
 
         $user = auth()->user();
         $validated = $this->form->validate();
+
+        try {
             MovieList::create(array_merge($validated, ["user_id" => $user->id]));
+        } catch (Exception $e) {
+            $this->addError("new-list", "Could not create movie list");
+        }
 
         $this->getLists();
         $this->form->reset();

resources/views/components/layouts/app.blade.php

@@ -6,7 +6,6 @@
     <x-header/>
     {{ $slot }}
 </div>
-@livewireScriptConfig
 </body>
 </html>
 

resources/views/components/slide-over.blade.php

@@ -1,6 +1,6 @@
-@props(['wire:model'])
+@props(['wire:model.live'])
 
-<div x-data="{ open: @entangle($attributes->wire('model')) }" x-show="open" @keydown.escape.window="open = false">
+<div x-data="{ open: @entangle($attributes->wire('model')).live }" x-show="open" @keydown.escape.window="open = false">
     <!-- Overlay -->
     <div x-show="open"
          x-transition:enter="transition-opacity ease-linear duration-300"

resources/views/components/ui/slide-over.blade.php

@@ -1,6 +1,6 @@
 @props(['model'])
 
-<div x-data="{ open: @entangle($model) }" @keydown.escape.window="open = false">
+<div x-data="{ open: @entangle($model).live }" @keydown.escape.window="open = false">
     <!-- Overlay -->
     <div x-show="open"
          x-transition:enter="transition-opacity ease-linear duration-300"

resources/views/livewire/lists.blade.php

@@ -18,7 +18,7 @@
                     <input name="list_name" placeholder="List Name"
                            class="flex-1 w-full text-black bg-white p-2 rounded rounded-r-none"
                            type="text"
-                           wire:model="form.name">
+                           wire:model.live="form.name">
                     <button type="submit" class="bg-green-400 text-white px-4 py-2 rounded rounded-l-none">Add</button>
                 </div>
             </form>
@@ -33,4 +33,3 @@
         </ul>
     </x-ui.card>
 </div>
-</div>

resources/views/livewire/movie-list.blade.php

@@ -21,13 +21,14 @@
                 <div class="w-full flex-shrink-0 flex flex-col gap-5">
                     <div class="flex flex-col-reverse sm:flex-row gap-5 sm:gap-0 justify-between w-full">
                         <input class="flex bg-white p-2 rounded sm:w-100" type="text" placeholder="Filter movies"
-                               wire:model="filterText"
+                               wire:model.live="filterText"
                                wire:keyup="filterMovies"/>
 
                         <button wire:click="$dispatch('openSearch')" class="bg-green-500 text-white p-2 rounded">
                             Add Movie
                         </button>
                     </div>
+                    @if(!empty($filteredMovies))
                         <ul class="grid grid-cols-2 sm:grid-cols-4 gap-5">
                             @foreach ($filteredMovies as $movie)
                                 <li class="bg-gray-200">
@@ -35,6 +36,12 @@
                                 </li>
                             @endforeach
                         </ul>
+                    @else
+                        <div class="flex flex-col items-center justify-center  my-10">
+                            <span class="text-center p-5 font-bold text-2xl">"You complete me."</span>
+                            <span class="text-center">Tom Cruise, <i>Jerry Maguire</i></span>
+                        </div>
+                    @endif
                 </div>
 
                 <!-- Settings View -->
@@ -49,7 +56,7 @@
                     <div class="flex flex-col gap-2 w-full">
                         <label for="list-name">List Name</label>
                         <div class="flex flex-row">
-                            <input type="text" wire:model="settingsForm.name" id="list-name"
+                            <input type="text" wire:model.live="settingsForm.name" id="list-name"
                                    class="w-full p-2 rounded rounded-r-none bg-white"/>
                             <button class="bg-green-400 p-2 rounded-r" type="submit" wire:click="saveSettings">Save
                             </button>

resources/views/livewire/search-panel.blade.php

@@ -1,9 +1,9 @@
 <x-ui.slide-over model="showSearch">
-    <form wire:submit.prevent="findMovies" class="flex flex-row">
+    <form wire:submit="findMovies" class="flex flex-row">
         <div class="mb-5">
             <label for="query">Enter a movie title</label>
             <div class="flex flex-row">
-                <input wire:model="query" type="text" name="query" class="bg-white p-2 text-black"/>
+                <input wire:model.live="query" type="text" name="query" class="bg-white p-2 text-black"/>
                 <button class="bg-green-400 p-2" type="submit">Search</button>
             </div>
             @error('query') <span class="error text-red-500">{{ $message }}</span> @enderror

resources/views/pages/auth/register.blade.php

@@ -1,7 +1,7 @@
 <div class="text-2xl">
     <h1 class="text-center m-5">Create Account</h1>
 
-    <form class="flex flex-col gap-5" wire:submit.prevent="register">
+    <form class="flex flex-col gap-5" wire:submit="register">
         @if($errors->any())
             <div class="text-red-500">
                 @foreach($errors->all() as $error)
@@ -12,11 +12,11 @@
 
         <div class="flex flex-col">
             <label class="py-5" for="username">Username</label>
-            <input class="bg-white" type="text" wire:model="form.username"/>
+            <input class="bg-white" type="text" wire:model.live="form.username"/>
         </div>
         <div class="flex flex-col">
             <label class="py-5" for="email">Email</label>
-            <input class="bg-white" type="email" wire:model="form.email"/>
+            <input class="bg-white" type="email" wire:model.live="form.email"/>
         </div>
         <button type="submit" class="bg-green-400 text-white px-4 py-2 rounded">Submit</button>
     </form>

resources/views/pages/auth/reset-password.blade.php

@@ -1,7 +1,7 @@
 <div class="text-2xl">
     <h1 class="text-center m-5">Reset Password</h1>
 
-    <form class="flex flex-col gap-5" wire:submit.prevent="resetPassword">
+    <form class="flex flex-col gap-5" wire:submit="resetPassword">
         @csrf
         @if($errors->any())
             <div class="text-red-500">
@@ -17,7 +17,7 @@
                 class="bg-white"
                 type="email"
                 name="email"
-                wire:model="form.email"
+                wire:model.live="form.email"
             />
         </div>
         <div class="flex flex-col">
@@ -26,7 +26,7 @@
                 class="bg-white"
                 type="password"
                 name="password"
-                wire:model="form.password"
+                wire:model.live="form.password"
             />
         </div>
         <div class="flex flex-col">
@@ -35,7 +35,7 @@
                 class="bg-white"
                 type="password"
                 name="password_confirmation"
-                wire:model="form.password_confirmation"
+                wire:model.live="form.password_confirmation"
             />
         </div>
         <button type="submit">Submit</button>

routes/web.php

@@ -15,6 +15,7 @@ Route::view('/login', 'pages.auth.login')->name('login');
 
 /* AUTH */
 Route::middleware(['auth'])->group(function () {
+    Route::get('/', fn() => redirect()->route('lists'));
     Route::get('/lists', MovieLists::class)->name('lists');
     Route::get('/lists/{id}', MovieList::class)->name('list');
 });