feature(delete-search-history): users can delere their recent search histories

app/Http/Controllers/ExplorePageController.php

@@ -81,6 +81,6 @@ protected function categories(): Collection
 
     protected function recentSearches(): Collection
     {
-        return Auth::user()->recentSearches()->latest()->pluck('query');
+        return Auth::user()->recentSearches()->latest()->select(['id','query'])->get();
     }
 }

app/Http/Controllers/RecentSearchController.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\RecentSearch;
+
+class RecentSearchController extends Controller
+{
+    public function __invoke(RecentSearch $recentSearch)
+    {
+       $recentSearch->delete();
+       return response()->json(['message' => 'Search deleted successfully.']);
+    }
+}

resources/js/app.js

@@ -11,7 +11,9 @@ import {favorite, like, redirect} from "./interaction.js";
 import {showReportModal} from "./report-deal.js";
 import {initTabs} from "./tab.js";
 import {loadModalFromQuery} from "./explore-page.js";
+import {deleteRecentSearch} from "./deleteRecentSearch.js";
 
+document.deleteSearch = deleteRecentSearch;
 document.like = like;
 document.favorite = favorite;
 document.redirect = redirect;

resources/js/deleteRecentSearch.js

@@ -0,0 +1,20 @@
+import {showToast} from "./toast.js";
+
+export const deleteRecentSearch = async (e, id) => {
+    try {
+        const li = e.closest('li');
+        const ol = li.closest('ol');
+
+        li.remove();
+
+        if (ol.childElementCount === 0) {
+            ol.remove();
+        }
+
+        const response = await axios.delete('api/recent-search/' + id);
+        showToast(response.data.message)
+    } catch (e) {
+        showToast('Something went wrong!')
+        console.error(e)
+    }
+}

resources/views/components/dashboard/user/recent-search/recent-search-item.blade.php

@@ -1,7 +1,11 @@
 @props(['item'])
-<li>
+<li class="flex space-x-2">
-    <a class="p-2 md:p-4 flex items-center text-gray-600 hover:bg-gray-100 hover:font-bold hover:text-gray-900 rounded-xl" href="{{route('explore', ['search' => $item])}}">
+    <a class="p-2 md:p-4 flex-1 flex items-center text-gray-600 hover:bg-gray-100 hover:font-bold hover:text-gray-900 rounded-xl"
-        {{$item}}
+       href="{{route('explore', ['search' => $item])}}">
+        {{$item->query}}
         <x-heroicon-o-arrow-up-right class="w-3 ml-2"/>
     </a>
+    <x-ui.button-sm type="button" onclick="deleteSearch(this, '{{$item->id}}')">
+        <x-heroicon-o-x-mark class="text-red-500 w-4"/>
+    </x-ui.button-sm>
 </li>

routes/api/api.php

@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\RecentSearchController;
 use Illuminate\Support\Facades\Route;
 
 Route::prefix('/api')
@@ -7,4 +8,6 @@
     ->group(function () {
         include __DIR__.'/interactions.php';
         include __DIR__.'/deals.php';
+
+        Route::delete('/recent-search/{recentSearch}', RecentSearchController::class)->name('recent-search.destroy');
     });