[Update] User Following

- Added dedicated route for user/following - Updated Profile/Following/Index to be a proper page
Kurozora · Sep 6, 2024 · 20555c1 · 20555c1
1 parent 8cc4a1f
commit 20555c1
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 57 deletions.
diff --git a/app/Livewire/Profile/Details.php b/app/Livewire/Profile/Details.php
@@ -62,8 +62,6 @@ class Details extends Component
     private array $popupTypes = [
         'edit',
         'achievements',
-        'following',
-        'followers',
     ];
 
     /**

diff --git a/app/Livewire/Profile/Following/Index.php b/app/Livewire/Profile/Following/Index.php
@@ -7,7 +7,8 @@
 use Illuminate\Contracts\Foundation\Application;
 use Illuminate\Contracts\View\Factory;
 use Illuminate\Contracts\View\View;
-use Illuminate\Pagination\CursorPaginator;
+use Illuminate\Pagination\LengthAwarePaginator;
+use Illuminate\Support\Collection;
 use Livewire\Component;
 use Livewire\WithPagination;
 
@@ -23,27 +24,11 @@ class Index extends Component
     public User $user;
 
     /**
-     * The current page query parameter's alias.
+     * Whether the component is ready to load.
      *
-     * @var string $fnc
+     * @var bool $readyToLoad
      */
-    public string $fnc = '';
-
-    /**
-     * The current page query parameter.
-     *
-     * @var string $cursor
-     */
-    public string $cursor = '';
-
-    /**
-     * The query strings of the component.
-     *
-     * @var string[] $queryString
-     */
-    protected $queryString = [
-        'cursor' => ['as' => 'fnc']
-    ];
+    public bool $readyToLoad = false;
 
     /**
      * Prepare the component.
@@ -57,20 +42,27 @@ public function mount(User $user): void
         $this->user = $user;
     }
 
+    /**
+     * Sets the property to load the page.
+     *
+     * @return void
+     */
+    public function loadPage(): void
+    {
+        $this->readyToLoad = true;
+    }
+
     /**
      * The user's following list.
      *
-     * @return CursorPaginator
+     * @return Collection|LengthAwarePaginator
      */
-    public function getFollowingsProperty(): CursorPaginator
+    public function getFollowingProperty(): Collection|LengthAwarePaginator
     {
-        // We're aliasing `cursorName` as `fnc`, and setting
-        // query rule to never show `cursor` param when it's
-        // empty. Since `cursor` is also aliased as `fnc` in
-        // query rules, and we always keep it empty, as far
-        // as Livewire is concerned, `fnc` is also empty. So,
-        // `fnc` doesn't show up in the query params in the
-        // browser.
+        if (!$this->readyToLoad) {
+            return collect();
+        }
+
         return $this->user->followedModels()
             ->with(['media'])
             ->withCount(['followers'])
@@ -80,7 +72,7 @@ public function getFollowingsProperty(): CursorPaginator
                 }]);
             })
             ->orderBy(UserFollow::TABLE_NAME . '.created_at', 'desc')
-            ->cursorPaginate(25, ['*'], 'fnc');
+            ->paginate(25);
     }
 
     /**

diff --git a/resources/views/livewire/profile/details.blade.php b/resources/views/livewire/profile/details.blade.php
@@ -60,12 +60,12 @@
                     <x-slot:description>{{ number_shorten($counts['achievements_count'], 0, true) }}</x-slot:description>
                 </x-profile-information-badge>
 
-                <x-profile-information-badge wire:click="togglePopupFor('following')">
+                <x-profile-information-badge href="{{ route('profile.following', $user) }}" wire:navigate>
                     <x-slot:title>{{ __('Following') }}</x-slot:title>
                     <x-slot:description>{{ number_shorten($counts['following_count'], 0, true) }}</x-slot:description>
                 </x-profile-information-badge>
 
-                <x-profile-information-badge wire:click="togglePopupFor('followers')">
+                <x-profile-information-badge href="{{ route('profile.followers', $user) }}" wire:navigate>
                     <x-slot:title>{{ __('Followers') }}</x-slot:title>
                     <x-slot:description>{{ number_shorten($counts['followers_count'], 0, true) }}</x-slot:description>
                 </x-profile-information-badge>
@@ -115,23 +115,5 @@
             <livewire:profile.badges :user="$user" />
         </x-page-modal>
         @break
-    @case ('followers')
-        <x-page-modal maxWidth="sm" model="showPopup">
-            <x-slot:title>
-                {{ __('Followers') }}
-            </x-slot:title>
-
-            <livewire:profile.followers.index :user="$user" />
-        </x-page-modal>
-        @break
-    @case ('following')
-        <x-page-modal maxWidth="sm" model="showPopup">
-            <x-slot:title>
-                {{ __('Following') }}
-            </x-slot:title>
-
-            <livewire:profile.following.index :user="$user" />
-        </x-page-modal>
-        @break
     @endswitch
 </main>
diff --git a/resources/views/livewire/profile/following/index.blade.php b/resources/views/livewire/profile/following/index.blade.php
@@ -1,7 +1,69 @@
-<div>
-    <x-rows.user-lockup :users="$this->followings" :is-row="false" />
+<main>
+    <x-slot:title>
+        {{ __(':x’s Following', ['x' => $user->username]) }}
+    </x-slot:title>
 
-    <div class="mt-4">
-        {{ $this->followings->links() }}
+    <x-slot:description>
+        {{ __('Browse the users :x is following on Kurozora. Join the Kurozora community and create your anime, manga and game list. Discover songs, episodes and read reviews and news!', ['x' => $user->username]) }}
+    </x-slot:description>
+
+    <x-slot:meta>
+        <meta property="og:title" content="{{ __(':x’s Following', ['x' => $user->username]) }} — {{ config('app.name') }}" />
+        <meta property="og:description" content="{{ __('Browse :x’s following on Kurozora. Join the Kurozora community and create your anime, manga and game list. Discover songs, episodes and read reviews and news!', ['x' => $user->username]) }}" />
+        <meta property="og:image" content="{{ $user->getFirstMediaFullUrl(\App\Enums\MediaCollection::Profile()) }}" />
+        <meta property="og:type" content="website" />
+        <link rel="canonical" href="{{ route('profile.following', $user) }}">
+    </x-slot:meta>
+
+    <x-slot:appArgument>
+        users/{{ $user->id }}/following
+    </x-slot:appArgument>
+
+    <div class="max-w-7xl mx-auto pl-4 pr-4 py-6 sm:px-6" wire:init="loadPage">
+        <section class="mb-4">
+            <div>
+                <div class="flex gap-1">
+                    <div class="flex flex-wrap items-center w-full">
+                        <h1 class="text-2xl font-bold">{{ __(':x’s Following', ['x' => $user->username]) }}</h1>
+                    </div>
+
+                    <div class="flex flex-wrap flex-1 justify-end items-center w-full">
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        @if ($this->following->count())
+            <x-rows.user-lockup :users="$this->following" :is-row="false" />
+
+            <div class="mt-4">
+                {{ $this->following->links() }}
+            </div>
+        @elseif (!$readyToLoad)
+            <section class="mt-4">
+                <div class="flex gap-4 justify-between flex-wrap">
+                    @foreach(range(1,25) as $range)
+                        <div class="bg-gray-200 w-64 md:w-80 flex-grow" style="height: 168px;"></div>
+                    @endforeach
+                    <div class="w-64 md:w-80 flex-grow"></div>
+                    <div class="w-64 md:w-80 flex-grow"></div>
+                </div>
+            </section>
+        @else
+            <section class="flex flex-col items-center mt-4 text-center">
+                <x-picture>
+                    <img class="w-full max-w-sm" src="{{ asset('images/static/placeholders/empty_anime_library.webp') }}" alt="No following" title="No following">
+                </x-picture>
+
+                <p class="font-bold">{{ __('No Following') }}</p>
+
+                @if ($user->id != auth()->user()?->id)
+                    <p class="text-sm text-gray-500">{{ __('Be the first to follow :x!', ['x' => $user->username]) }}</p>
+                    <livewire:components.follow-button :user="$user" :is-followed="$isFollowed" wire:key="{{ uniqid(more_entropy: true) }}" />
+                @else
+                    <p class="text-sm text-gray-500">{{ __('Users you follow show up here!') }}</p>
+                @endif
+            </section>
+        @endif
     </div>
-</div>
+</main>
diff --git a/routes/Web/Profile.php b/routes/Web/Profile.php
@@ -7,6 +7,7 @@
 use App\Http\Controllers\Web\UserProfileController;
 use App\Livewire\Profile\Details;
 use App\Livewire\Profile\Followers\Index as FollowersIndex;
+use App\Livewire\Profile\Following\Index as FollowingIndex;
 use App\Livewire\Profile\Library\Anime\Favorites as FavoriteAnime;
 use App\Livewire\Profile\Library\Anime\Index as AnimeLibrary;
 use App\Livewire\Profile\Library\Anime\Reminders as AnimeReminders;
@@ -76,6 +77,9 @@
                     ->name('.index');
                 Route::get('/followers', FollowersIndex::class)
                     ->name('.followers');
+
+                Route::get('/following', FollowingIndex::class)
+                    ->name('.following');
             });
     });