From bbb49da835e3113d946be3e5f283e23369ecd486 Mon Sep 17 00:00:00 2001
From: Punyapal Shah <mrpunyapal@gmail.com>
Date: Sat, 7 Sep 2024 17:07:13 +0530
Subject: [PATCH] feat: added follow button in users component

---
 app/Livewire/Home/Users.php                   | 25 ++++++++-
 resources/views/livewire/home/users.blade.php | 33 ++++++++----
 tests/Unit/Livewire/Home/UsersTest.php        | 51 +++++++++++++++++++
 3 files changed, 97 insertions(+), 12 deletions(-)

diff --git a/app/Livewire/Home/Users.php b/app/Livewire/Home/Users.php
index 456d2dee1..c4c6a5693 100644
--- a/app/Livewire/Home/Users.php
+++ b/app/Livewire/Home/Users.php
@@ -4,6 +4,7 @@
 
 namespace App\Livewire\Home;
 
+use App\Livewire\Concerns\Followable;
 use App\Models\User;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Collection;
@@ -14,6 +15,8 @@
 
 final class Users extends Component
 {
+    use Followable;
+
     /**
      * The component's search query.
      */
@@ -51,6 +54,16 @@ private function usersByQuery(): Collection
                 $query->whereNotNull('answer');
             }])
             ->orderBy('answered_questions_count', 'desc')
+            ->when(auth()->check(), function (Builder $query): void {
+                $query->withExists([
+                    'following as is_follower' => function (Builder $query): void {
+                        $query->where('user_id', auth()->id());
+                    },
+                    'followers as is_following' => function (Builder $query): void {
+                        $query->where('follower_id', auth()->id());
+                    },
+                ]);
+            })
             ->limit(10)
             ->get();
     }
@@ -67,7 +80,17 @@ private function defaultUsers(): Collection
         return $this->famousUsers($verifiedUsers)
             ->merge($verifiedUsers)
             ->shuffle()
-            ->load('links');
+            ->load('links')
+            ->when(auth()->check(), function (Collection $users): void {
+                $users->loadExists([
+                    'following as is_follower' => function (Builder $query): void {
+                        $query->where('user_id', auth()->id());
+                    },
+                    'followers as is_following' => function (Builder $query): void {
+                        $query->where('follower_id', auth()->id());
+                    },
+                ]);
+            });
     }
 
     /**
diff --git a/resources/views/livewire/home/users.blade.php b/resources/views/livewire/home/users.blade.php
index 45132feeb..0d56310b6 100644
--- a/resources/views/livewire/home/users.blade.php
+++ b/resources/views/livewire/home/users.blade.php
@@ -23,12 +23,12 @@ class="w-full mx-1 !rounded-2xl dark:!bg-slate-950 !bg-slate-50 !bg-opacity-80 p
         <section class="max-w-2xl">
             <ul class="flex flex-col gap-2">
                 @foreach ($users as $user)
-                    <li>
-                        <a
-                            href="{{ route('profile.show', ['username' => $user->username]) }}"
-                            class="group flex items-center gap-3 rounded-2xl border dark:border-slate-900 border-slate-200 dark:bg-slate-950 bg-slate-50 dark:bg-opacity-80 p-4 transition-colors dark:hover:bg-slate-900 hover:bg-slate-100"
-                            wire:navigate
-                        >
+                    <li
+                        data-parent=true
+                        x-data="clickHandler"
+                        x-on:click="handleNavigation($event)"
+                    >
+                        <div class="group flex items-center gap-3 rounded-2xl border dark:border-slate-900 border-slate-200 dark:bg-slate-950 bg-slate-50 dark:bg-opacity-80 p-4 transition-colors dark:hover:bg-slate-900 hover:bg-slate-100">
                             <figure class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-12 w-12 flex-shrink-0 overflow-hidden bg-slate-800 transition-opacity group-hover:opacity-90">
                                 <img
                                     class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-12 w-12"
@@ -36,9 +36,14 @@ class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-12 w-1
                                     alt="{{ $user->username }}"
                                 />
                             </figure>
-                            <div class="flex flex-col overflow-hidden text-sm">
-                                <div class="flex items-center space-x-2">
-                                    <p class="truncate font-medium dark:text-white text-black">
+                            <div class="flex flex-col overflow-hidden text-sm text-left">
+                                <a
+                                    class="flex items-center space-x-2"
+                                    href="{{ route('profile.show', ['username' => $user->username]) }}"
+                                    wire:navigate
+                                    x-ref="parentLink"
+                                >
+                                    <p class="text-wrap truncate font-medium dark:text-white text-black">
                                         {{ $user->name }}
                                     </p>
 
@@ -53,12 +58,18 @@ class="size-4"
                                             class="size-4"
                                         />
                                     @endif
-                                </div>
+                                </a>
                                 <p class="truncate text-slate-500 transition-colors group-hover:text-slate-400">
                                     {{ '@'.$user->username }}
                                 </p>
                             </div>
-                        </a>
+                            <x-follow-button
+                                :id="$user->id"
+                                :isFollower="auth()->check() && $user->is_follower"
+                                :isFollowing="auth()->check() && $user->is_following"
+                                class="ml-auto"
+                            />
+                        </div>
                     </li>
                 @endforeach
             </ul>
diff --git a/tests/Unit/Livewire/Home/UsersTest.php b/tests/Unit/Livewire/Home/UsersTest.php
index 71353db42..f1a533a6e 100644
--- a/tests/Unit/Livewire/Home/UsersTest.php
+++ b/tests/Unit/Livewire/Home/UsersTest.php
@@ -210,3 +210,54 @@
     $this->assertNotEquals($famousUsers->pluck('id')->toArray(), $CachedFamousUsers);
     $this->assertEquals($newFamousUsers->pluck('id')->toArray(), $CachedFamousUsers);
 });
+
+test('users has is_follower and is_following attributes only when authenticated', function () {
+
+    User::factory(10)
+        ->hasLinks(1, function (array $attributes, User $user) {
+            return ['url' => "https://twitter.com/{$user->username}"];
+        })
+        ->hasQuestionsReceived(2, ['answer' => 'this is an answer'])
+        ->create();
+
+    User::factory()
+        ->hasLinks(1, function (array $attributes, User $user) {
+            return ['url' => "https://twitter.com/{$user->username}"];
+        })
+        ->sequence([
+            'name' => 'Nuno Maduro',
+        ], [
+            'name' => 'Punyapal Shah',
+        ])
+        ->create();
+
+    $component = Livewire::test(Users::class);
+
+    $component->viewData('users')->each(function (User $user): void {
+        expect($user)->not->toHaveKey('is_follower');
+        expect($user)->not->toHaveKey('is_following');
+    });
+
+    $component->set('query', 'un');
+
+    $component->viewData('users')->each(function (User $user): void {
+        expect($user)->not->toHaveKey('is_follower');
+        expect($user)->not->toHaveKey('is_following');
+    });
+
+    $component->actingAs(User::factory()->create());
+
+    $component->set('query', '');
+
+    $component->viewData('users')->each(function (User $user): void {
+        expect($user->is_follower)->toBeBool();
+        expect($user->is_following)->toBeBool();
+    });
+
+    $component->set('query', 'un');
+
+    $component->viewData('users')->each(function (User $user): void {
+        expect($user->is_follower)->toBeBool();
+        expect($user->is_following)->toBeBool();
+    });
+});