fix: small bookmark button again again

Goodbye livewire. Livewire's diffing algorithm kept messing up this livewire component.

app/Http/Controllers/API/BookmarkController.php

@@ -0,0 +1,34 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * NOTICE OF LICENSE.
+ *
+ * UNIT3D Community Edition is open-sourced software licensed under the GNU Affero General Public License v3.0
+ * The details is bundled with this project in the file LICENSE.txt.
+ *
+ * @project    UNIT3D Community Edition
+ *
+ * @author     Roardom <roardom@protonmail.com>
+ * @license    https://www.gnu.org/licenses/agpl-3.0.en.html/ GNU Affero General Public License v3.0
+ */
+
+namespace App\Http\Controllers\API;
+
+class BookmarkController extends BaseController
+{
+    final public function store(int $torrentId): bool
+    {
+        auth()->user()->bookmarks()->attach($torrentId);
+
+        return true;
+    }
+
+    final public function destroy(int $torrentId): bool
+    {
+        auth()->user()->bookmarks()->detach($torrentId);
+
+        return false;
+    }
+}

app/Http/Livewire/SmallBookmarkButton.php

@@ -1,55 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-/**
- * NOTICE OF LICENSE.
- *
- * UNIT3D Community Edition is open-sourced software licensed under the GNU Affero General Public License v3.0
- * The details is bundled with this project in the file LICENSE.txt.
- *
- * @project    UNIT3D Community Edition
- *
- * @author     HDVinnie <hdinnovations@protonmail.com>
- * @license    https://www.gnu.org/licenses/agpl-3.0.en.html/ GNU Affero General Public License v3.0
- */
-
-namespace App\Http\Livewire;
-
-use App\Models\Torrent;
-use App\Models\User;
-use Livewire\Component;
-
-class SmallBookmarkButton extends Component
-{
-    public Torrent $torrent;
-
-    public bool $isBookmarked;
-
-    public User $user;
-
-    final public function store(): void
-    {
-        if ($this->user->bookmarks()->where('torrent_id', '=', $this->torrent->id)->exists()) {
-            $this->dispatch('error', type: 'error', message: 'Torrent Has Already Been Bookmarked!');
-
-            return;
-        }
-
-        $this->user->bookmarks()->attach($this->torrent->id);
-        $this->isBookmarked = true;
-        $this->dispatch('success', type: 'success', message: 'Torrent Has Been Bookmarked Successfully!');
-    }
-
-    final public function destroy(): void
-    {
-        $this->user->bookmarks()->detach($this->torrent->id);
-        $this->isBookmarked = false;
-        $this->dispatch('success', type: 'success', message: 'Torrent Has Been Unbookmarked Successfully!');
-    }
-
-    final public function render(): \Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View|\Illuminate\Contracts\Foundation\Application
-    {
-        return view('livewire.small-bookmark-button');
-    }
-}

resources/js/app.js

@@ -153,4 +153,40 @@ Alpine.data('checkboxGrid', () => ({
     },
 }));
 
+Alpine.data("bookmark", (torrentId, bookmarked) => ({
+    torrentId: torrentId,
+    bookmarked: bookmarked,
+    button: {
+        ["x-on:click"]() {
+            this.bookmarked ? this.destroy() : this.store();
+        },
+        ["x-bind:title"]() {
+            return this.bookmarked ? "Unbookmark" : "Bookmark";
+        },
+    },
+    icon: {
+        ["x-bind:class"]() {
+            return this.bookmarked ? "fa-bookmark-slash" : "fa-bookmark";
+        },
+    },
+    store() {
+        axios.post(`/api/bookmarks/${this.torrentId}`).then((response) => {
+            this.bookmarked = Boolean(response.data);
+            this.dispatchEvent();
+        });
+    },
+    destroy() {
+        axios.delete(`/api/bookmarks/${this.torrentId}`).then((response) => {
+            this.bookmarked = Boolean(response.data);
+            this.dispatchEvent();
+        });
+    },
+    dispatchEvent() {
+        this.$dispatch('success', {
+            type: 'success',
+            message: `Torrent has been ${this.bookmarked ? 'bookmarked' : 'unbookmarked'} successfully!`,
+        })
+    }
+}));
+
 Livewire.start();

resources/views/components/torrent/row.blade.php

@@ -142,7 +142,13 @@
                 </a>
             @endif
 
-            @livewire('small-bookmark-button', ['torrent' => $torrent, 'isBookmarked' => $torrent->bookmarks_exists, 'user' => auth()->user()], key('bookmark-torrent-'.$torrent->id))
+            <button
+                class="form__standard-icon-button"
+                x-data="bookmark({{ $torrent->id }}, {{ Js::from($torrent->bookmarks_exists) }})"
+                x-bind="button"
+            >
+                <i class="{{ config('other.font-awesome') }}" x-bind="icon"></i>
+            </button>
 
             @if (config('torrent.download_check_page'))
                 <a

resources/views/livewire/small-bookmark-button.blade.php

@@ -1,17 +0,0 @@
-<button
-    @if ($this->isBookmarked)
-        wire:click="destroy({{ $torrent->id }})"
-        class="form__standard-icon-button"
-        title="Unbookmark"
-    @else
-        wire:click="store({{ $torrent->id }})"
-        class="form__standard-icon-button"
-        title="Bookmark"
-    @endif
->
-    @if ($this->isBookmarked)
-        <i class="{{ config('other.font-awesome') }} fa-bookmark-slash"></i>
-    @else
-        <i class="{{ config('other.font-awesome') }} fa-bookmark"></i>
-    @endif
-</button>

routes/api.php

@@ -41,3 +41,11 @@ Route::middleware(['auth:api', 'banned'])->prefix('torrents')->group(function ()
     Route::get('/{id}', [App\Http\Controllers\API\TorrentController::class, 'show'])->where('id', '[0-9]+');
     Route::post('/upload', [App\Http\Controllers\API\TorrentController::class, 'store']);
 });
+
+// Internal front-end web API routes
+Route::middleware(['web', 'auth', 'banned', 'verified'])->group(function (): void {
+    Route::prefix('bookmarks')->group(function (): void {
+        Route::post('/{torrentId}', [App\Http\Controllers\API\BookmarkController::class, 'store'])->name('api.bookmarks.store');
+        Route::delete('/{torrentId}', [App\Http\Controllers\API\BookmarkController::class, 'destroy'])->name('api.bookmarks.destroy');
+    });
+});