06. 删除 Chirps

有时，无论如何编辑都无法修复一条消息，所以让我们让用户能够删除他们的 Chirps。

希望你现在已经开始掌握窍门了。我们相信你会对我们添加此功能的速度感到惊讶。

更新我们的组件

首先，让我们更新我们的 chirp.list Livewire 组件，使其包含一个删除按钮，并在单击按钮时添加一个删除 Chirp 的操作

resources/views/livewire/chirps/list.blade.php

 <?php
  ...
  
 use App\Models\Chirp;
 use Illuminate\Database\Eloquent\Collection;
 use Livewire\Attributes\On;
 use Livewire\Volt\Component;
  
 new class extends Component
 {
  ...
     public Collection $chirps;
  
     public ?Chirp $editing = null;
  
     public function mount(): void
     {
         $this->getChirps();
     }
  
     #[On('chirp-created')]
     public function getChirps(): void
     {
         $this->chirps = Chirp::with('user')
             ->latest()
             ->get();
     }
  
     public function edit(Chirp $chirp): void
     {
         $this->editing = $chirp;
  
         $this->getChirps();
     }
  
     #[On('chirp-edit-canceled')]
     #[On('chirp-updated')]
     public function disableEditing(): void
     {
         $this->editing = null;
  
         $this->getChirps();
     } 
+ 
+    public function delete(Chirp $chirp): void
+    {
+        $this->authorize('delete', $chirp);
+ 
+        $chirp->delete();
+ 
+        $this->getChirps();
+    } 
 }; ?>
  
 <div class="mt-6 bg-white shadow-sm rounded-lg divide-y">
     @foreach ($chirps as $chirp)
         <div class="p-6 flex space-x-2" wire:key="{{ $chirp->id }}">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
             </svg>
             <div class="flex-1">
                 <div class="flex justify-between items-center">
                     <div>
                         <span class="text-gray-800">{{ $chirp->user->name }}</span>
                         <small class="ml-2 text-sm text-gray-600">{{ $chirp->created_at->format('j M Y, g:i a') }}</small>
                         @unless ($chirp->created_at->eq($chirp->updated_at))
                             <small class="text-sm text-gray-600"> &middot; {{ __('edited') }}</small>
                         @endunless
                     </div>
                     @if ($chirp->user->is(auth()->user()))
                         <x-dropdown>
                             <x-slot name="trigger">
                                 <button>
                                     <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                                         <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
                                     </svg>
                                 </button>
                             </x-slot>
                             <x-slot name="content">
                                 <x-dropdown-link wire:click="edit({{ $chirp->id }})">
                                     {{ __('Edit') }}
                                 </x-dropdown-link>
+                                <x-dropdown-link wire:click="delete({{ $chirp->id }})" wire:confirm="Are you sure to delete this chirp?"> 
+                                    {{ __('Delete') }}
+                                </x-dropdown-link> 
                             </x-slot>
                         </x-dropdown>
                     @endif
                 </div>
                 <p class="mt-4 text-lg text-gray-900">{{ $chirp->message }}</p>
                 @if ($chirp->is($editing))
                     <livewire:chirps.edit :chirp="$chirp" :key="$chirp->id" />
                 @else
                     <p class="mt-4 text-lg text-gray-900">{{ $chirp->message }}</p>
                 @endif
             </div>
         </div>
     @endforeach
 </div>

resources/views/livewire/chirps/list.blade.php

 <?php
  ...
 use App\Models\Chirp;
 use function Livewire\Volt\{on, state};
  
 $getChirps = fn () => $this->chirps = Chirp::with('user')->latest()->get();
  
 $disableEditing = function () {
     $this->editing = null;
  
     return $this->getChirps();
 };
  
 state(['chirps' => $getChirps, 'editing' => null]);
  
 on([
     'chirp-created' => $getChirps,
     'chirp-updated' => $disableEditing,
     'chirp-edit-canceled' => $disableEditing,
 ]);
  
 $edit = function (Chirp $chirp) {
     $this->editing = $chirp;
  
     $this->getChirps();
 }; 
+ 
+$delete = function (Chirp $chirp) {
+    $this->authorize('delete', $chirp);
+ 
+    $chirp->delete();
+ 
+    $this->getChirps();
+}; 
  
 ?>
  
 <div class="mt-6 bg-white shadow-sm rounded-lg divide-y">
     @foreach ($chirps as $chirp)
         <div class="p-6 flex space-x-2" wire:key="{{ $chirp->id }}">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
             </svg>
             <div class="flex-1">
                 <div class="flex justify-between items-center">
                     <div>
                         <span class="text-gray-800">{{ $chirp->user->name }}</span>
                         <small class="ml-2 text-sm text-gray-600">{{ $chirp->created_at->format('j M Y, g:i a') }}</small>
                         @unless ($chirp->created_at->eq($chirp->updated_at))
                             <small class="text-sm text-gray-600"> &middot; {{ __('edited') }}</small>
                         @endunless
                     </div>
                     @if ($chirp->user->is(auth()->user()))
                         <x-dropdown>
                             <x-slot name="trigger">
                                 <button>
                                     <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                                         <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
                                     </svg>
                                 </button>
                             </x-slot>
                             <x-slot name="content">
                                 <x-dropdown-link wire:click="edit({{ $chirp->id }})">
                                     {{ __('Edit') }}
                                 </x-dropdown-link>
+                                <x-dropdown-link wire:click="delete({{ $chirp->id }})" wire:confirm="Are you sure to delete this chirp?"> 
+                                    {{ __('Delete') }}
+                                </x-dropdown-link> 
                             </x-slot>
                         </x-dropdown>
                     @endif
                 </div>
                 <p class="mt-4 text-lg text-gray-900">{{ $chirp->message }}</p>
                 @if ($chirp->is($editing))
                     <livewire:chirps.edit :chirp="$chirp" :key="$chirp->id" />
                 @else
                     <p class="mt-4 text-lg text-gray-900">{{ $chirp->message }}</p>
                 @endif
             </div>
         </div>
     @endforeach
 </div>

授权

与编辑一样，我们只希望 Chirp 作者能够删除他们的 Chirps，所以让我们更新 ChirpPolicy 类中的 delete 方法

app/Policies/ChirpPolicy.php

 <?php
  ...
 namespace App\Policies;
  
 use App\Models\Chirp;
 use App\Models\User;
 use Illuminate\Auth\Access\HandlesAuthorization;
  
 class ChirpPolicy
 {
  ...
     use HandlesAuthorization;
  
     /**
      * Determine whether the user can view any models.
      */
     public function viewAny(User $user): bool
     {
         //
     }
  
     /**
      * Determine whether the user can view the model.
      */
     public function view(User $user, Chirp $chirp): bool
     {
         //
     }
  
     /**
      * Determine whether the user can create models.
      */
     public function create(User $user): bool
     {
         //
     }
  
     /**
      * Determine whether the user can update the model.
      */
     public function update(User $user, Chirp $chirp): bool
     {
         return $chirp->user()->is($user);
     }
  
     /**
      * Determine whether the user can delete the model.
      */
     public function delete(User $user, Chirp $chirp): bool
     {
-        //
+        return $this->update($user, $chirp);
     }
  ...
     /**
      * Determine whether the user can restore the model.
      */
     public function restore(User $user, Chirp $chirp): bool
     {
         //
     }
  
     /**
      * Determine whether the user can permanently delete the model.
      */
     public function forceDelete(User $user, Chirp $chirp): bool
     {
         //
     }
  
 }

与其重复 update 方法中的逻辑，我们可以通过从 destroy 方法调用 update 方法来定义相同的逻辑。现在，任何有权更新 Chirp 的人都将有权删除它。

测试一下

如果你发布了任何你不满意的内容，请尝试删除它！

继续学习通知和事件...

06. 删除 Chirps

#更新我们的组件

#授权

#测试一下

更新我们的组件

授权

测试一下