From 80f3da13b932dbe2194762e1e9faab3f5c6d4e43 Mon Sep 17 00:00:00 2001 From: Refringe Date: Sat, 5 Oct 2024 14:09:22 -0400 Subject: [PATCH] Optimize User Follow Components Much better, still not perfect. The mobile and the desktop components are being rendered twice, and each of their methods are running twice as well. Going to see if I can modify the structure to get away with only using one. --- app/Http/Controllers/UserController.php | 1 + app/Livewire/User/FollowCard.php | 60 +++++++------------ app/Livewire/User/FollowCards.php | 49 +++++++++++++++ database/seeders/DatabaseSeeder.php | 2 - .../components/user-follow-cards.blade.php | 8 --- .../views/livewire/user/follow-card.blade.php | 34 +++++------ .../livewire/user/follow-cards.blade.php | 13 ++++ resources/views/user/show.blade.php | 4 +- 8 files changed, 103 insertions(+), 68 deletions(-) create mode 100644 app/Livewire/User/FollowCards.php delete mode 100644 resources/views/components/user-follow-cards.blade.php create mode 100644 resources/views/livewire/user/follow-cards.blade.php diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php index 065aee4..97eed7c 100644 --- a/app/Http/Controllers/UserController.php +++ b/app/Http/Controllers/UserController.php @@ -14,6 +14,7 @@ class UserController extends Controller public function show(Request $request, int $userId, string $username): View { $user = User::whereId($userId) + ->with(['following', 'followers']) ->firstOrFail(); $mods = $user->mods() diff --git a/app/Livewire/User/FollowCard.php b/app/Livewire/User/FollowCard.php index 8aa9679..cd8158e 100644 --- a/app/Livewire/User/FollowCard.php +++ b/app/Livewire/User/FollowCard.php @@ -3,19 +3,15 @@ namespace App\Livewire\User; use App\Models\User; +use Illuminate\Support\Collection; use Illuminate\View\View; +use Livewire\Attributes\Computed; use Livewire\Attributes\Locked; use Livewire\Attributes\On; use Livewire\Component; class FollowCard extends Component { - /** - * The ID of the user whose profile is being viewed. - */ - #[Locked] - public int $profileUserId; - /** * The type of user follow relationship to display. * Currently, either "followers" or "following". @@ -68,19 +64,31 @@ class FollowCard extends Component public User $profileUser; /** - * The number of users being displayed. + * A collection of user IDs that the auth user follows. */ #[Locked] - public int $followUsersCount; + public Collection $authFollowIds; + + /** + * The profile user's followers (or following). + */ + #[Locked] + public Collection $followUsers; + + /** + * The number of users being displayed. + */ + #[Computed] + public function followUsersCount(): int + { + return $this->followUsers->count(); + } /** * Called when the component is initialized. */ public function mount(): void { - $this->profileUser = User::select(['id', 'name', 'profile_photo_path', 'cover_photo_path']) - ->findOrFail($this->profileUserId); - $this->setTitle(); $this->setEmptyMessage(); $this->setDialogTitle(); @@ -135,35 +143,11 @@ class FollowCard extends Component /** * Called when the user follows or unfollows a user. */ - #[On('user-follow-change')] + #[On('auth-follow-change')] public function populateFollowUsers(): void { - // Fetch IDs of all users the authenticated user is following. - $followingIds = collect(); - $authUser = auth()->user(); - if ($authUser) { - $followingIds = $authUser->following()->pluck('following_id'); - } - - // Load the profile user's followers (or following). - $users = $this->profileUser->{$this->relationship}()->with([])->get(); - - // Count the number of users. - $this->followUsersCount = $users->count(); - - // Load the users to display and whether the authenticated user is following each user. - $this->display = $users - ->map(function (User $user) use ($followingIds) { - return [ - 'user' => $user, - 'isFollowing' => $followingIds->contains($user->id), - ]; - })->toArray(); - - // Store limited users for the main view. - $this->displayLimit = collect($this->display) - ->take($this->limit) - ->toArray(); + // Update the collection of profile user's followers (or following). + $this->followUsers = $this->profileUser->{$this->relationship}()->get(); } /** diff --git a/app/Livewire/User/FollowCards.php b/app/Livewire/User/FollowCards.php new file mode 100644 index 0000000..b95affe --- /dev/null +++ b/app/Livewire/User/FollowCards.php @@ -0,0 +1,49 @@ +authFollowIds = collect(); + $authUser = auth()->user(); + if ($authUser) { + $this->authFollowIds = $authUser->following()->pluck('following_id'); + } + + $this->dispatch('auth-follow-change'); + } + + /** + * Render the component. + */ + public function render(): View + { + return view('livewire.user.follow-cards'); + } +} diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php index e2fda8a..d8358f7 100644 --- a/database/seeders/DatabaseSeeder.php +++ b/database/seeders/DatabaseSeeder.php @@ -57,7 +57,6 @@ class DatabaseSeeder extends Seeder // All Users $allUsers = User::all(); - /* We got a little ahead of ourselves here. This hasn't been merged yet! // User Follows progress( label: 'adding user follows ...', @@ -76,7 +75,6 @@ class DatabaseSeeder extends Seeder $user->following()->attach($following); } }); - */ // Mods $mods = collect(progress( diff --git a/resources/views/components/user-follow-cards.blade.php b/resources/views/components/user-follow-cards.blade.php deleted file mode 100644 index dcad321..0000000 --- a/resources/views/components/user-follow-cards.blade.php +++ /dev/null @@ -1,8 +0,0 @@ -@props(['profileUserId']) - -
- -
-
- -
diff --git a/resources/views/livewire/user/follow-card.blade.php b/resources/views/livewire/user/follow-card.blade.php index 4006f13..d6a1d7a 100644 --- a/resources/views/livewire/user/follow-card.blade.php +++ b/resources/views/livewire/user/follow-card.blade.php @@ -4,37 +4,37 @@

{{ $title }}

- @if ($followUsersCount === 0) + @if ($this->followUsersCount === 0)
{{ $emptyMessage }}
@else
- @foreach ($displayLimit as $data) + @foreach ($followUsers->take($limit) as $user) {{-- User Badge --}}
- - {{ $data['user']->name }} + + {{ $user->name }}
- {{ $data['user']->name }} + {{ $user->name }}
@endforeach - @if ($followUsersCount > $limit) + @if ($this->followUsersCount > $limit) {{-- Count Badge --}}
- +
- {{ $followUsersCount }} total + {{ $this->followUsersCount }} total
@endif
@endif - @if ($followUsersCount > $limit) + @if ($this->followUsersCount > $limit) {{-- View All Button --}}
@@ -49,22 +49,20 @@
- @foreach ($display as $data) + @foreach ($followUsers as $user)
- - {{ $data['user']->name }} + + {{ $user->name }} -
- {{ $data['user']->name }} + {{ $user->name }} {{ __("Member Since") }} - +
- - @if (auth()->check() && auth()->user()->id !== $data['user']->id) - + @if (auth()->check() && auth()->user()->id !== $user->id) + @endif
@endforeach diff --git a/resources/views/livewire/user/follow-cards.blade.php b/resources/views/livewire/user/follow-cards.blade.php new file mode 100644 index 0000000..d3d349d --- /dev/null +++ b/resources/views/livewire/user/follow-cards.blade.php @@ -0,0 +1,13 @@ +@props([ + 'profileUser', + 'authFollowIds' => collect(), +]) + +
+
+ +
+
+ +
+
diff --git a/resources/views/user/show.blade.php b/resources/views/user/show.blade.php index bed7bae..469aceb 100644 --- a/resources/views/user/show.blade.php +++ b/resources/views/user/show.blade.php @@ -39,7 +39,7 @@
{{-- Mobile Follows --}}
- +
{{-- Left Column --}} @@ -106,7 +106,7 @@ {{-- Desktop Follows --}}
- +