user stack and follows WIP

app/Livewire/UserStack.php

@@ -2,6 +2,7 @@
 
 namespace App\Livewire;
 
+use Illuminate\Support\Facades\Auth;
 use Livewire\Component;
 
 class UserStack extends Component
@@ -12,8 +13,20 @@ class UserStack extends Component
 
     public int $limit = 5;
 
+    public bool $viewAll = false;
+
     public function render()
     {
         return view('livewire.user-stack');
     }
+
+    public function toggleViewAll()
+    {
+        $this->viewAll = ! $this->viewAll;
+    }
+
+    public function followUser($user)
+    {
+        $user->followers->syncWithoutDetaching(Auth::id());
+    }
 }

app/Models/User.php

@@ -66,6 +66,24 @@ class User extends Authenticatable implements MustVerifyEmail
         return $this->belongsToMany(User::class, 'user_follows', 'following_id', 'follower_id');
     }
 
+    public function isFollowing(User|int $user): bool
+    {
+        $userId = $user instanceof User ? $user->id : $user;
+        return $this->following()->where('following_id', $userId)->exists();
+    }
+
+    public function follow(User|int $user): void
+    {
+        $userId = $user instanceof User ? $user->id : $user;
+        $this->following()->syncWithoutDetaching($userId);
+    }
+
+    public function unfollow(User|int $user): void
+    {
+        $userId = $user instanceof User ? $user->id : $user;
+        $this->following()->detach($userId);
+    }
+
     /**
      * The data that is searchable by Scout.
      */

resources/views/livewire/user-stack.blade.php

@@ -2,22 +2,26 @@
     <div class="flex justify-center items-center">
         <h2 class="text-2xl">{{$label}}</h2>
     </div>
-    <div class="flex ml-6 py-2">
+    <div class="flex ml-6 py-2 justify-center items-center">
         @foreach($users->slice(0, $limit) as $user)
             <div class="relative group">
-                <a href="{{$user->profileUrl()}}" class="rounded-full -ml-6 z-20 bg-[#ebf4ff] h-16 w-16 flex justify-center items-center border">
+                <a href="{{$user->profileUrl()}}"
+                   class="rounded-full -ml-6 z-20 bg-[#ebf4ff] h-16 w-16 flex justify-center items-center border">
                     <img class="h-full w-full rounded-full" src="{{$user->profile_photo_url}}"
                          alt="{{$user->name[0]}}" />
                 </a>
-                <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-max px-2 py-1 text-sm text-white bg-gray-700 rounded shadow-lg opacity-0 group-hover:opacity-100">
+                <div
+                    class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-max px-2 py-1 text-sm text-white bg-gray-700 rounded shadow-lg opacity-0 group-hover:opacity-100">
                     {{$user->name}}
                 </div>
             </div>
         @endforeach
         @if($users->count() > $limit)
             <div class="relative group">
-                <span class="rounded-full -ml-6 z-20 bg-cyan-500 dark:bg-cyan-700 h-16 w-16 flex justify-center items-center border text-white">+{{$users->count()-$limit}}</span>
+                <span
-                <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-max px-2 py-1 text-sm text-white bg-gray-700 rounded shadow-lg opacity-0 group-hover:opacity-100">
+                    class="rounded-full -ml-6 z-20 bg-cyan-500 dark:bg-cyan-700 h-16 w-16 flex justify-center items-center border text-white">+{{$users->count()-$limit}}</span>
+                <div
+                    class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-max px-2 py-1 text-sm text-white bg-gray-700 rounded shadow-lg opacity-0 group-hover:opacity-100">
                     {{$users->count()}} total
                 </div>
             </div>
@@ -25,20 +29,38 @@
     </div>
     @if($users->count() > $limit)
         <div class="flex justify-center items-center">
-            <button wire:click="$set('viewAll', false)">view all</button>
+            <button wire:click="toggleViewAll">view all</button>
         </div>
     @endif
 
     <x-dialog-modal wire:model.live="viewAll">
         <x-slot name="title">
-            <h2 class="text-2xl">testing</h2>
+            <h2 class="text-2xl">{{$user->name}}'s {{$label}}</h2>
         </x-slot>
         <x-slot name="content">
-            <p>no u</p>
+            <div class="h-96 overflow-y-auto divide-y">
+                @foreach($users as $user)
+                    {{-- user tile --}}
+                    <div class="flex group/item">
+                        <img class="h-16 w-16 m-2 rounded-full" src="{{$user->profile_photo_url}}"
+                             alt="{{$user->name}}" />
+                        <div class="flex flex-col justify-center">
+                            <a class="no-underline text-2xl" href="{{$user->profileUrl()}}">{{$user->name}}</a>
+                            <span class="">{{__("Member Since")}} {{ $user->created_at->format("M d, h:m a") }}</span>
+                        </div>
+                            <div class="flex invisible group-hover/item:visible w-full justify-end items-center mr-10">
+                                <button class="p-2 h-fit text-white bg-cyan-500 hover:bg-cyan-700 rounded-lg"
+                                        wire:click="followUser({{$user}})">
+                                    {{__('Follow')}}
+                                </button>
+                            </div>
+                    </div>
+                @endforeach
+            </div>
         </x-slot>
 
         <x-slot name="footer">
-            <x-button wire:click="$set('viewAll', false)">
+            <x-button wire:click="toggleViewAll">
                 {{__('Close')}}
             </x-button>
         </x-slot>

resources/views/user/show.blade.php

@@ -17,8 +17,22 @@
                         <p>{{__("Member Since")}} {{ $user->created_at->format("M d, h:m a") }}</p>
                     </div>
 
-                    @if(\Illuminate\Support\Facades\Auth::check())
+                    @if(auth()->check())
-                        @if(\Illuminate\Support\Facades\Auth::id() != $user->id)
+                        @if(auth()->id() != $user->id)
+                            @if(auth()->user()->isFollowing($user))
+                                <div
+                                    class="mt-6 flex flex-col justify-stretch space-y-3 sm:flex-row sm:space-x-4 sm:space-y-0">
+                                    <button type="button"
+                                            class="inline-flex justify-center rounded-md bg-white dark:bg-gray-700 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600">
+                                        <svg class="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400 dark:text-gray-300"
+                                             viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                                            <path
+                                                d="m12.82 5.58-.82.822-.824-.824a5.375 5.375 0 1 0-7.601 7.602l7.895 7.895a.75.75 0 0 0 1.06 0l7.902-7.897a5.376 5.376 0 0 0-.001-7.599 5.38 5.38 0 0 0-7.611 0Z" />
+                                        </svg>
+                                        <span>{{__("UnFollow")}}</span>
+                                    </button>
+                                </div>
+                            @else
                                 <div
                                     class="mt-6 flex flex-col justify-stretch space-y-3 sm:flex-row sm:space-x-4 sm:space-y-0">
                                     <button type="button"
@@ -32,6 +46,7 @@
                                     </button>
                                 </div>
                             @endif
+                        @endif
                         <div class="mt-6 flex flex-col justify-stretch space-y-3 sm:flex-row sm:space-x-4 sm:space-y-0">
                             <button type="button"
                                     class="inline-flex justify-center rounded-md bg-white dark:bg-gray-700 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600">
@@ -58,13 +73,11 @@
                 {{-- column 1 placeholder --}}
             </div>
             <div class="flex flex-col justify-center items-center">
-                <div class="flex w-full">
+                <div class="flex w-full max-w-sm">
-                    @livewire('user-stack', ['label' => 'Followers', 'users' => $user->followers]);
+                    @livewire('user-stack', ['label' => 'Followers', 'users' => $user->followers])
-{{--                    <x-user-stack :label="__('Followers')" :users="$user->followers" />--}}
                 </div>
-                <div class="flex w-full">
+                <div class="flex w-full max-w-sm">
-                    @livewire('user-stack', ['label' => 'Following', 'users' => $user->following]);
+                    @livewire('user-stack', ['label' => 'Following', 'users' => $user->following])
-{{--                    <x-user-stack :label="__('Following')" :users="$user->following" />--}}
                 </div>
             </div>
         </div>