Merge pull request #1476 from liberu-genealogy/copilot/upgrade-livewire-3-to-livewire-4

[WIP] Upgrade syntax from Livewire 3 to Livewire 4

Author: delicatacurtis

app/Http/Livewire/DescendantChartComponent.php

@@ -82,14 +82,14 @@ public function setRootPerson($personId): void
     {
         $this->rootPersonId = $personId;
         $this->mount($personId);
-        $this->emit('refreshDescendantChart');
+        $this->dispatch('refreshDescendantChart');
     }
 
     public function setGenerations($generations): void
     {
         $this->generations = max(1, min(6, $generations));
         $this->mount($this->rootPersonId);
-        $this->emit('refreshDescendantChart');
+        $this->dispatch('refreshDescendantChart');
     }
 
     public function render()

app/Http/Livewire/DescendantChartWidget.php

@@ -130,43 +130,43 @@ private function buildDescendantTree($person, $maxGenerations, $generation = 1):
     public function setRootPerson($personId): void
     {
         $this->rootPersonId = $personId;
-        $this->emit('refreshDescendantChart');
+        $this->dispatch('refreshDescendantChart');
     }
 
     public function setGenerations($generations): void
     {
         $this->generations = max(1, min(8, $generations));
-        $this->emit('refreshDescendantChart');
+        $this->dispatch('refreshDescendantChart');
     }
 
     public function toggleSpouses(): void
     {
         $this->showSpouses = !$this->showSpouses;
-        $this->emit('refreshDescendantChart');
+        $this->dispatch('refreshDescendantChart');
     }
 
     public function toggleDates(): void
     {
         $this->showDates = !$this->showDates;
-        $this->emit('refreshDescendantChart');
+        $this->dispatch('refreshDescendantChart');
     }
 
     public function togglePhotos(): void
     {
         $this->showPhotos = !$this->showPhotos;
-        $this->emit('refreshDescendantChart');
+        $this->dispatch('refreshDescendantChart');
     }
 
     public function setLayout($layout): void
     {
         $this->layout = $layout;
-        $this->emit('refreshDescendantChart');
+        $this->dispatch('refreshDescendantChart');
     }
 
     public function setColorScheme($scheme): void
     {
         $this->colorScheme = $scheme;
-        $this->emit('refreshDescendantChart');
+        $this->dispatch('refreshDescendantChart');
     }
 
     public function expandPerson($personId): void

app/Http/Livewire/EditProfile.php

@@ -31,9 +31,9 @@ public function updateProfile(): void
 
         try {
             Auth::user()?->update($validated);
-            $this->emit('profile-updated');
+            $this->dispatch('profile-updated');
         } catch (Throwable $e) {
-            $this->emit('profile-update-failed', message: $e->getMessage());
+            $this->dispatch('profile-update-failed', message: $e->getMessage());
             throw $e;
         }
     }

app/Http/Livewire/FamilyTreeBuilder.php

@@ -47,7 +47,7 @@ public function updatePersonPosition(int $personId, float $x, float $y): void
             'tree_position_y' => $y
         ]);
 
-        $this->emit('positionUpdated', personId: $personId);
+        $this->dispatch('positionUpdated', personId: $personId);
     }
 
     #[On('personAdded')]
@@ -63,15 +63,15 @@ public function addPerson(array $data): void
         ]);
 
         $this->loadTreeData();
-        $this->emit('personCreated', personId: $person->id);
+        $this->dispatch('personCreated', personId: $person->id);
     }
 
     #[On('personRemoved')]
     public function removePerson(int $personId): void
     {
         Person::find($personId)?->delete();
         $this->loadTreeData();
-        $this->emit('personDeleted', personId: $personId);
+        $this->dispatch('personDeleted', personId: $personId);
     }
 
     public function render()

app/Http/Livewire/FanChart.php

@@ -79,31 +79,31 @@ private function buildFanData($person, $maxGenerations, $generation = 0): array
     public function setRootPerson($personId): void
     {
         $this->rootPersonId = $personId;
-        $this->emit('refreshFanChart');
+        $this->dispatch('refreshFanChart');
     }
 
     public function setGenerations($generations): void
     {
         $this->generations = max(2, min(8, $generations));
-        $this->emit('refreshFanChart');
+        $this->dispatch('refreshFanChart');
     }
 
     public function toggleNames(): void
     {
         $this->showNames = !$this->showNames;
-        $this->emit('refreshFanChart');
+        $this->dispatch('refreshFanChart');
     }
 
     public function toggleDates(): void
     {
         $this->showDates = !$this->showDates;
-        $this->emit('refreshFanChart');
+        $this->dispatch('refreshFanChart');
     }
 
     public function setColorScheme($scheme): void
     {
         $this->colorScheme = $scheme;
-        $this->emit('refreshFanChart');
+        $this->dispatch('refreshFanChart');
     }
 
     public function render()

app/Http/Livewire/GamificationDashboard.php

@@ -56,7 +56,7 @@ public function toggleLeaderboardVisibility()
     {
         $user = auth()->user();
         $user->update(['show_on_leaderboard' => !$user->show_on_leaderboard]);
-        $this->emit('leaderboard-updated');
+        $this->dispatch('leaderboard-updated');
     }
 
     public function render()

app/Http/Livewire/PedigreeChart.php

@@ -81,25 +81,25 @@ public function render()
     public function setRootPerson($personId): void
     {
         $this->rootPersonId = $personId;
-        $this->emit('refreshChart');
+        $this->dispatch('refreshChart');
     }
 
     public function setGenerations($generations): void
     {
         $this->generations = max(1, min(6, $generations));
-        $this->emit('refreshChart');
+        $this->dispatch('refreshChart');
     }
 
     public function toggleDates(): void
     {
         $this->showDates = !$this->showDates;
-        $this->emit('refreshChart');
+        $this->dispatch('refreshChart');
     }
 
     public function togglePhotos(): void
     {
         $this->showPhotos = !$this->showPhotos;
-        $this->emit('refreshChart');
+        $this->dispatch('refreshChart');
     }
 
     public function expandPerson($personId): void

app/Http/Livewire/PeopleSearch.php

@@ -3,20 +3,20 @@
 namespace App\Http\Livewire;
 
 use App\Models\Person;
+use Livewire\Attributes\On;
 use Livewire\Component;
 
 class PeopleSearch extends Component
 {
     public $query = '';
     public $results = [];
 
-    protected $listeners = ['updatedQuery' => 'searchPeople'];
-
     public function mount(): void
     {
         $this->searchPeople();
     }
 
+    #[On('updatedQuery')]
     public function searchPeople(): void
     {
         try {

app/Http/Livewire/ResearchSpace/CollaboratorBoard.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Livewire\ResearchSpace;
 
+use Livewire\Attributes\On;
 use Livewire\Component;
 use App\Models\ResearchSpace;
 use App\Events\ResearchSpaceUpdated;
@@ -12,16 +13,14 @@ class CollaboratorBoard extends Component
     use AuthorizesRequests;
 
     public ResearchSpace $space;
+    public int $spaceId = 0;
     public $content = '';
     public $userPermissions = [];
 
-    protected $listeners = [
-        'echo:research-space.{spaceId},ResearchSpaceUpdated' => 'onExternalUpdate',
-    ];
-
     public function mount($spaceId)
     {
         $this->space = ResearchSpace::with('collaborators.user')->findOrFail($spaceId);
+        $this->spaceId = $this->space->id;
 
         $this->authorize('view', $this->space);
 
@@ -30,12 +29,10 @@ public function mount($spaceId)
         $this->userPermissions = []; // can be populated from collaborators
     }
 
-    public function saveContent(string $updated)
+    public function saveContent()
     {
         $this->authorize('update', $this->space);
 
-        $this->content = $updated;
-
         $settings = $this->space->settings ?? [];
         $settings['board'] = array_merge($settings['board'] ?? [], ['content' => $this->content, 'updated_at' => now()->toDateTimeString()]);
         $this->space->settings = $settings;
@@ -45,11 +42,12 @@ public function saveContent(string $updated)
         event(new ResearchSpaceUpdated($this->space->id, ['content' => $this->content, 'user_id' => auth()->id()]));
     }
 
+    #[On('echo:research-space.{spaceId},ResearchSpaceUpdated')]
     public function onExternalUpdate($payload)
     {
         // When we get an external broadcast, update local content
         $this->content = data_get($payload, 'content', $this->content);
-        $this->emitSelf('contentUpdated');
+        $this->dispatch('contentUpdated');
     }
 
     public function render()

app/Http/Livewire/TimelineComponent.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Livewire;
 
+use Livewire\Attributes\On;
 use Livewire\Component;
 use App\Models\Person;
 use App\Services\HistoricalEventService;
@@ -12,10 +13,6 @@ class TimelineComponent extends Component
     public array $events = [];
     public ?array $selectedEvent = null;
 
-    protected $listeners = [
-        'timelineItemClicked' => 'openEventFromJs',
-    ];
-
     protected HistoricalEventService $historicalEventService;
 
     public function boot(HistoricalEventService $historicalEventService)
@@ -102,9 +99,10 @@ public function loadEvents($start = null, $end = null)
     }
 
     /**
-     * JS calls Livewire via window.Livewire.emit('timelineItemClicked', id)
+     * JS calls Livewire via Livewire.dispatch('timelineItemClicked', { id: '...' })
      */
-    public function openEventFromJs($id)
+    #[On('timelineItemClicked')]
+    public function openEventFromJs(string $id)
     {
         $item = collect($this->events)->firstWhere('id', $id);
         if ($item) {