Add rate limiting feature to DiscoverDocumentation component

Author: CodeWithDennis

app/Livewire/DiscoverDocumentation.php

@@ -6,11 +6,15 @@
 
 use App\Enums\Framework;
 use App\Models\DocumentationLink;
+use DanHarrin\LivewireRateLimiting\Exceptions\TooManyRequestsException;
+use DanHarrin\LivewireRateLimiting\WithRateLimiting;
 use Illuminate\Support\Facades\Session;
 use Livewire\Component;
 
 final class DiscoverDocumentation extends Component
 {
+    use WithRateLimiting;
+
     public Framework $selectedFramework = Framework::Laravel;
 
     public ?DocumentationLink $link = null;
@@ -19,6 +23,10 @@ final class DiscoverDocumentation extends Component
 
     public int $highScore = 0;
 
+    public bool $rateLimitExceeded = false;
+
+    public int $secondsUntilAvailable = 0;
+
     protected $listeners = [
         'framework-switched' => 'handleFrameworkSwitch',
     ];
@@ -32,6 +40,10 @@ public function mount(): void
 
     public function getRandomLink(): void
     {
+        if (! $this->checkRateLimit()) {
+            return;
+        }
+
         $this->link = DocumentationLink::query()
             ->where('framework', $this->selectedFramework)
             ->inRandomOrder()
@@ -61,6 +73,21 @@ public function render()
         return view('livewire.discover-documentation');
     }
 
+    private function checkRateLimit(): bool
+    {
+        try {
+            $this->rateLimit(3, 5);
+            $this->rateLimitExceeded = false;
+
+            return true;
+        } catch (TooManyRequestsException $tooManyRequestsException) {
+            $this->rateLimitExceeded = true;
+            $this->secondsUntilAvailable = $tooManyRequestsException->secondsUntilAvailable;
+
+            return false;
+        }
+    }
+
     private function loadFrameworkStats(): void
     {
         $frameworkKey = $this->selectedFramework->value;

resources/views/livewire/discover-documentation.blade.php

@@ -40,6 +40,17 @@ class="inline-block flex-1 py-[16px] px-4 bg-gradient-to-r from-[{{ $selectedFra
                     Discover
                 </button>
             </div>
+
+            @if ($rateLimitExceeded)
+                <div class="w-full text-center">
+                    <p class="text-[0.65rem] text-red-400">
+                        Please wait <span
+                            class="text-[{{ $selectedFramework->color() }}]">{{ $secondsUntilAvailable }}</span>
+                        seconds before
+                        discovering another one.
+                    </p>
+                </div>
+            @endif
         </div>
     </div>