From b3d36ff2cd41e6f8d6c0c84dd6e441ec0ec88beb Mon Sep 17 00:00:00 2001
From: Punyapal Shah <mrpunyapal@gmail.com>
Date: Wed, 4 Sep 2024 20:36:04 +0530
Subject: [PATCH] refactor: Update followers and following index pages to use
 user-tile component for displaying user information

---
 .../views/livewire/followers/index.blade.php  | 51 ++----------------
 .../views/livewire/following/index.blade.php  | 53 +++----------------
 resources/views/livewire/home/users.blade.php | 46 ++--------------
 3 files changed, 16 insertions(+), 134 deletions(-)

diff --git a/resources/views/livewire/followers/index.blade.php b/resources/views/livewire/followers/index.blade.php
index e872c494a..56b074650 100644
--- a/resources/views/livewire/followers/index.blade.php
+++ b/resources/views/livewire/followers/index.blade.php
@@ -15,59 +15,18 @@
             <section class="mt-10 max-w-2xl max-h-96 overflow-y-auto">
                 <ul class="flex flex-col gap-2">
                     @foreach ($followers as $follower)
-                        <li
-                            data-parent=true
-                            x-data="clickHandler"
-                            x-on:click="handleNavigation($event)"
+                        <x-user-tile
+                            :user="$follower"
                         >
-                            <div class="group flex items-center gap-3 rounded-2xl border border-slate-900 bg-slate-950 bg-opacity-80 p-4 transition-colors hover:bg-slate-900">
-                                <figure class="{{ $follower->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="{{ $follower->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-12 w-12"
-                                        src="{{ $follower->avatar_url }}"
-                                        alt="{{ $follower->username }}"
-                                    />
-                                </figure>
-                                <div class="flex flex-col overflow-hidden text-sm">
-                                    <a
-                                        class="flex items-center space-x-2"
-                                        href="{{ route('profile.show', ['username' => $follower->username]) }}"
-                                        wire:navigate
-                                        x-ref="parentLink"
-                                    >
-                                        <p class="text-wrap text-left font-medium">
-                                            {{ $follower->name }}
-                                        </p>
-
-                                        @if ($follower->is_verified && $follower->is_company_verified)
-                                            <x-icons.verified-company
-                                                :color="$follower->right_color"
-                                                class="size-4"
-                                            />
-                                        @elseif ($follower->is_verified)
-                                            <x-icons.verified
-                                                :color="$follower->right_color"
-                                                class="size-4"
-                                            />
-                                        @endif
-                                    </a>
-                                    <p class="truncate text-left text-slate-500 transition-colors group-hover:text-slate-400">
-                                        {{ '@'.$follower->username }}
-                                        @if (auth()->user()?->isNot($user) && $follower->is_follower)
-                                            <x-badge class="ml-1">
-                                                Follows you
-                                            </x-badge>
-                                        @endif
-                                    </p>
-                                </div>
+                            <x-slot name="followButton">
                                 <x-follow-button
                                     :id="$follower->id"
                                     :isFollower="$user->is(auth()->user()) || $follower->is_follower"
                                     :isFollowing="$follower->is_following"
                                     class="ml-auto"
                                 />
-                            </div>
-                        </li>
+                            </x-slot>
+                        </x-user-tile>
                     @endforeach
                 </ul>
             </section>
diff --git a/resources/views/livewire/following/index.blade.php b/resources/views/livewire/following/index.blade.php
index 7d4d36774..43c3cbf1f 100644
--- a/resources/views/livewire/following/index.blade.php
+++ b/resources/views/livewire/following/index.blade.php
@@ -15,59 +15,18 @@
             <section class="mt-10 max-w-2xl max-h-96 overflow-y-auto">
                 <ul class="flex flex-col gap-2">
                     @foreach ($following as $followingUser)
-                        <li
-                            data-parent=true
-                            x-data="clickHandler"
-                            x-on:click="handleNavigation($event)"
-                        >
-                            <div class="group flex items-center gap-3 rounded-2xl border border-slate-900 bg-slate-950 bg-opacity-80 p-4 transition-colors hover:bg-slate-900">
-                                <figure class="{{ $followingUser->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="{{ $followingUser->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-12 w-12"
-                                    src="{{ $followingUser->avatar_url }}"
-                                    alt="{{ $followingUser->username }}"
-                                    />
-                                </figure>
-                                <div class="flex flex-col overflow-hidden text-sm">
-                                    <a
-                                        class="flex items-center space-x-2"
-                                        href="{{ route('profile.show', ['username' => $followingUser->username]) }}"
-                                        wire:navigate
-                                        x-ref="parentLink"
-                                    >
-                                        <p class="text-wrap text-left font-medium">
-                                            {{ $followingUser->name }}
-                                        </p>
-
-                                        @if ($followingUser->is_verified && $followingUser->is_company_verified)
-                                            <x-icons.verified-company
-                                                :color="$followingUser->right_color"
-                                                class="size-4"
-                                            />
-                                        @elseif ($followingUser->is_verified)
-                                            <x-icons.verified
-                                                :color="$followingUser->right_color"
-                                                class="size-4"
-                                            />
-                                        @endif
-                                    </a>
-                                    <p class="truncate text-left text-slate-500 transition-colors group-hover:text-slate-400">
-                                        {{ '@'.$followingUser->username }}
-                                        @if ($followingUser->is_follower)
-                                            <x-badge class="ml-1">
-                                                Follows you
-                                            </x-badge>
-                                        @endif
-                                    </p>
-                                </div>
+                        <x-user-tile
+                            :user="$followingUser"
+                            >
+                            <x-slot name="followButton">
                                 <x-follow-button
                                     :id="$followingUser->id"
                                     :isFollower="$followingUser->is_follower"
                                     :isFollowing="$user->is(auth()->user()) || $followingUser->is_following"
                                     class="ml-auto"
                                 />
-                            </div>
-                        </li>
+                            </x-slot>
+                        </x-user-tile>
                     @endforeach
                 </ul>
             </section>
diff --git a/resources/views/livewire/home/users.blade.php b/resources/views/livewire/home/users.blade.php
index dd1afe6df..18f6d1b6a 100644
--- a/resources/views/livewire/home/users.blade.php
+++ b/resources/views/livewire/home/users.blade.php
@@ -23,54 +23,18 @@ class="w-full rounded-none sm:!rounded-2xl !bg-slate-950 !bg-opacity-80 py-3 pl-
         <section class="max-w-2xl">
             <ul class="flex flex-col gap-2">
                 @foreach ($users as $user)
-                    <li
-                        data-parent=true
-                        x-data="clickHandler"
-                        x-on:click="handleNavigation($event)"
+                    <x-user-tile
+                        :user="$user"
                     >
-                        <div class="group flex items-center gap-3 rounded-2xl border border-slate-900 bg-slate-950 bg-opacity-80 p-4 transition-colors hover:bg-slate-900">
-                            <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"
-                                    src="{{ $user->avatar_url }}"
-                                    alt="{{ $user->username }}"
-                                />
-                            </figure>
-                            <div class="flex flex-col overflow-hidden text-sm">
-                                <a
-                                    class="flex items-center space-x-2"
-                                    href="{{ route('profile.show', ['username' => $user->username]) }}"
-                                    wire:navigate
-                                    x-ref="parentLink"
-                                >
-                                    <p class="text-wrap text-left font-medium">
-                                        {{ $user->name }}
-                                    </p>
-
-                                    @if ($user->is_verified && $user->is_company_verified)
-                                        <x-icons.verified-company
-                                            :color="$user->right_color"
-                                            class="size-4"
-                                        />
-                                    @elseif ($user->is_verified)
-                                        <x-icons.verified
-                                            :color="$user->right_color"
-                                            class="size-4"
-                                        />
-                                    @endif
-                                </a>
-                                <p class="truncate text-slate-500 transition-colors group-hover:text-slate-400">
-                                    {{ '@'.$user->username }}
-                                </p>
-                            </div>
+                        <x-slot name="followButton">
                             <x-follow-button
                                 :id="$user->id"
                                 :isFollower="auth()->check() && $user->is_follower"
                                 :isFollowing="auth()->check() && $user->is_following"
                                 class="ml-auto"
                             />
-                        </div>
-                    </li>
+                        </x-slot>
+                    </x-user-tile>
                 @endforeach
             </ul>
         </section>