Scroll on send message

Raccoon254 · May 20, 2024 · 8b575b4 · 8b575b4
1 parent ce657ed
commit 8b575b4
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 32 deletions.
diff --git a/app/Livewire/Messages.php b/app/Livewire/Messages.php
@@ -4,19 +4,20 @@
 
 use App\Models\User;
 use Illuminate\View\View;
+use Livewire\Attributes\On;
 use Livewire\Component;
 use Livewire\WithFileUploads;
 
 class Messages extends Component
 {
     use WithFileUploads;
 
-    public $loggedInUser;
-    public $currentUserRole;
-    public $search = '';
-    public $selectedUser;
-    public $message;
+    public mixed $loggedInUser;
+    public string $currentUserRole;
+    public string $search = '';
+    public User $selectedUser;
     public $messages;
+    public int $unreadMessages;
     public array $attachments = [];
 
     public function mount(): void
@@ -29,28 +30,25 @@ public function mount(): void
         }
     }
 
+    #[On('messagesSent')]
+    public function messagesSent(): void
+    {
+        $this->messages = $this->loggedInUser->messages()->where('receiver_id', $this->selectedUser->id)->orWhere('sender_id', $this->selectedUser->id)->orderBy('created_at', 'asc')->get();
+    }
+
     public function openChat($id): void
     {
         $this->selectedUser = User::find($id);
         $this->messages = $this->loggedInUser->messages()->where('receiver_id', $id)->orWhere('sender_id', $id)->orderBy('created_at', 'asc')->get();
 
         $this->dispatch('chatOpened');
+        $this->messages->where('receiver_id', $this->loggedInUser->id)->whereNull('read_at')->each->update(['read_at' => now()]);
     }
 
-    //sendMessage
-    public function sendMessage(): void
+    public function unreadMessages(User $user): int
     {
-        if (empty($this->message)) {
-            return;
-        }
-
-        $this->loggedInUser->messages()->create([
-            'receiver_id' => $this->selectedUser->id,
-            'content' => $this->message
-        ]);
-
-        $this->message = '';
-        $this->messages = $this->loggedInUser->messages()->where('receiver_id', $this->selectedUser->id)->orWhere('sender_id', $this->selectedUser->id)->sortBy('created_at', 'asc')->get();
+        //Get the number of unread messages for the authenticated user from the selected user
+        return $this->loggedInUser->receivedMessages()->where('sender_id', $user->id)->whereNull('read_at')->count();
     }
 
     public function render(): View

diff --git a/app/Livewire/SendMessageInput.php b/app/Livewire/SendMessageInput.php
@@ -36,6 +36,7 @@ public function removeAttachment($name): void
 
     public function sendMessage(): void
     {
+        sleep(4);
         if (empty($this->newMessage) && empty($this->attachments)) {
             return;
         }
@@ -62,6 +63,8 @@ public function sendMessage(): void
         $this->attachments = [];
         $this->newMessage = '';
 
+        $this->reset('attachments', 'newMessage');
+
         $this->dispatch('messagesSent');
     }
 

diff --git a/app/Models/Message.php b/app/Models/Message.php
@@ -20,6 +20,11 @@ class Message extends Model
 
     protected array $dates = ['read_at', 'created_at', 'updated_at'];
 
+    public function getTimeAttribute(): string
+    {
+        return $this->created_at->diffForHumans();
+    }
+
     public function sender(): BelongsTo
     {
         return $this->belongsTo(User::class, 'sender_id');

diff --git a/app/Models/User.php b/app/Models/User.php
@@ -34,9 +34,25 @@ public function messages(): HasMany
         return $this->hasMany(Message::class, 'sender_id');
     }
 
-    public function getLastMessageAttribute(): ?Message
+    public function receivedMessages(): HasMany
     {
-        return $this->messages()->orderBy('created_at', 'desc')->first();
+        return $this->hasMany(Message::class, 'receiver_id');
+    }
+
+    public function allMessages(): HasMany
+    {
+        // get messages sent and received by the user
+        return $this->messages()->union($this->receivedMessages());
+    }
+
+    public function getLastMessageAttribute(): Message|HasMany|null
+    {
+        return $this->allMessages()->orderBy('created_at', 'desc')->first();
+    }
+
+    public function getHasUnreadMessagesAttribute(): bool
+    {
+        return $this->receivedMessages()->whereNull('read_at')->exists();
     }
 
     public function referrals(): HasMany

diff --git a/resources/css/app.css b/resources/css/app.css
@@ -40,6 +40,10 @@ input:-webkit-autofill {
     @apply absolute top-1 right-1 h-[6px] w-[6px] bg-blue-500 text-white text-[9px] font-bold rounded-full flex items-center justify-center ring ring-white;
 }
 
+.custom-message-badge{
+    @apply absolute bottom-1 right-0 h-[15px] w-[15px] bg-amber-500 text-white text-[9px] font-bold rounded-full flex items-center justify-center ring ring-white;
+}
+
 .sent-message{
     @apply rounded-t-2xl rounded-bl-2xl bg-blue-500 text-white p-1 px-4;
 }

diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php
@@ -35,8 +35,9 @@
     <div class="navbar-end text-black/80 items-center">
         <div class="btn btn-circle bg-gray-100 btn-sm btn-ghost relative center">
             <i class="fas fa-envelope"></i>
-            <span class="custom-badge">
-            </span>
+            @if(auth()->user()->hasUnreadMessages)
+                <span class="custom-badge"></span>
+            @endif
         </div>
         <div class="btn btn-circle bg-gray-100 btn-sm btn-ghost relative ml-2 center">
             <i class="fas fa-bell-slash"></i>

diff --git a/resources/views/layouts/sidebar.blade.php b/resources/views/layouts/sidebar.blade.php
@@ -22,8 +22,12 @@
             <li class="side {{ request()->routeIs('messages') ? 'active' : '' }}">
                 <a href="{{ route('messages') }}" class="flex relative items-center gap-2 p-2 hover:bg-gray-200">
                     <i class="fas fa-envelope"></i>
-                    <span>Messages</span>
-                    <span class="custom-badge"></span>
+                    <span>
+                        {{ auth()->user()->role == 'client' ? 'Support' : 'Messages' }}
+                    </span>
+                    @if(auth()->user()->hasUnreadMessages)
+                        <span class="custom-badge"></span>
+                    @endif
                 </a>
             </li>
             <li class="side {{ request()->routeIs('orders') ? 'active' : '' }}">

diff --git a/resources/views/livewire/display-chat-message.blade.php b/resources/views/livewire/display-chat-message.blade.php
@@ -67,7 +67,24 @@ class="inline-block max-w-[400px] {{ $message->sender_id == Auth::id() ? 'bg-blu
             deleted.
         </div>
     @endif
-    <div class="text-[10px] mt-1 text-blue-500">
-        {{ $message->time }}
+        <!-- justify-end or justify-start -->
+    <div class="flex items-center gap-2 {{ $message->sender_id == Auth::id() ? 'justify-end' : 'justify-start' }}">
+        <div class="text-[10px] text-blue-500">
+            {{ $message->time }}
+        </div>
+        @if ($message->sender_id == Auth::id())
+            @if ($message->read_at)
+                <div class="relative mb-1 px-[2px]">
+                    <i class="fas fa-check m-0 p-0 text-blue-500 text-[10px]"></i>
+                    <i class="fas absolute m-0 p-0 left-[2px] fa-check text-blue-500 text-[10px] top-[43%] transform[-50%]">
+                    </i>
+                </div>
+            @else
+                <div class="relative mb-1 px-[2px]">
+                    <i class="fas fa-check text-green-500 text-[10px]"></i>
+                    <i class="fas absolute m-0 p-0 left-[2px] fa-check text-green-500 text-[10px] top-[43%] transform[-50%]"></i>
+                </div>
+            @endif
+        @endif
     </div>
 </div>
diff --git a/resources/views/livewire/send-message-input.blade.php b/resources/views/livewire/send-message-input.blade.php
@@ -60,3 +60,12 @@ class="loading loading-spinner text-primary loading-sm"></span>
         </button>
     </div>
 </div>
+@script
+<script>
+    //messagesSent event listener
+    Livewire.on('messagesSent', (event) => {
+        //clear the message input field
+        document.getElementById('messageInput').value = '';
+    });
+</script>
+@endscript
diff --git a/resources/views/messages.blade.php b/resources/views/messages.blade.php
@@ -9,7 +9,7 @@
     <div class="max-w-7xl relative h-full mx-auto">
         <div class="flex sm:mx-3 gap-4 lg:mx-4 h-full flex-row">
             <div class="flex gap-2 bg-white w-full rounded-lg">
-                <div class="w-2/3 h-[87vh] bg-gray-100 m-2 rounded-md">
+                <div class="w-2/3 h-[84vh] bg-gray-100 m-2 rounded-md">
                     @if($selectedUser)
                         <div class="flex flex-col gap-3 p-3 h-full">
                             <div class="flex gap-3 border-b pb-3 items-center">
@@ -53,8 +53,9 @@ class="w-10 h-10 bg-white rounded-full">
                             <livewire:SendMessageInput :selectedUser="$selectedUser" :key="$selectedUser->id"/>
                         </div>
                     @else
-                        <div class="flex items-center justify-center h-full">
-                            <h1 class="text-gray-800 font-semibold">Select a user to chat with</h1>
+                        <div class="flex items-center flex-col justify-center h-full">
+                            <i class="fas fa-user-slash text-4xl text-gray-500"></i>
+                            <h1 class="text-gray-800 font-semibold">Select a user to message</h1>
                         </div>
                     @endif
                 </div>
@@ -77,16 +78,24 @@ class="absolute text-black/80 right-5 top-[50%] transform translate-x-1/2 -trans
                             @foreach($clients as $user)
                                 <div class="flex gap-3 cursor-pointer p-2 bg-gray-100 rounded-lg"
                                      wire:click="openChat({{ $user->id }})">
-                                    <div class="">
+                                    <!-- unreadMessages(User $user): int
+                                    Call the unreadMessages method in the livewire component -->
+                                    @php
+                                        $unreadMessagesCount = \App\Livewire\Messages::unreadMessages($user);
+                                    @endphp
+                                    <div class="relative">
                                         <img src="{{ $user->profile_photo }}" alt="{{ $user->name }}"
                                              class="w-12 h-12 bg-white rounded-full">
+                                        @if($unreadMessagesCount > 0)
+                                            <span class="custom-message-badge">{{ $unreadMessagesCount }}</span>
+                                        @endif
                                     </div>
                                     <div class="w-2/3">
                                         <h1 class="text-gray-800 font-semibold">{{ $user->name }}</h1>
 
                                         <!-- Last message from user -->
                                         <p class="text-gray-500 text-xs">
-                                            {{ $user->lastMessage ? $user->lastMessage->content : 'No message yet' }}
+                                            {{  $user->lastMessage ? substr($user->lastMessage->content, 0, 20)." ..." : 'No message yet' }}
                                         </p>
                                     </div>
                                 </div>
@@ -103,12 +112,19 @@ class="w-12 h-12 bg-white rounded-full">
 <script>
     Livewire.on('chatOpened', (event) => {
         setTimeout(() => {
-            const messageContainer = document.getElementById('messageContainer');
+            let messageContainer = document.getElementById('messageContainer');
             messageContainer.scrollTo({
                 top: messageContainer.scrollHeight,
                 behavior: 'smooth',
             });
         }, 10);
     });
+
+    Livewire.on('messagesSent', (event) => {
+        setTimeout(() => {
+            let messageContainer = document.getElementById('messageContainer');
+            messageContainer.scrollTop = messageContainer.scrollHeight;
+        }, 10);
+    });
 </script>
 @endscript