From b88083df41c7b510e355bfc956cecb5396d8c3fe Mon Sep 17 00:00:00 2001
From: raccoon254 <tomsteve187@gmail.com>
Date: Thu, 30 May 2024 11:02:30 +0300
Subject: [PATCH] Added online status to users and typing status on the socket
 Io

---
 app/Models/User.php                           |  1 -
 .../livewire/profile-image-uploader.blade.php |  2 +-
 .../livewire/send-message-input.blade.php     |  3 +-
 server.js                                     | 55 +++++++++++++++----
 4 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/app/Models/User.php b/app/Models/User.php
index 4fe1b0c..8d63462 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -43,7 +43,6 @@ public function receivedMessages(): HasMany
 
     public function allMessages(): HasMany
     {
-        // get messages sent and received by the user
         return $this->messages()->union($this->receivedMessages());
     }
 
diff --git a/resources/views/livewire/profile-image-uploader.blade.php b/resources/views/livewire/profile-image-uploader.blade.php
index 6a6feea..d5aab8a 100644
--- a/resources/views/livewire/profile-image-uploader.blade.php
+++ b/resources/views/livewire/profile-image-uploader.blade.php
@@ -1,5 +1,5 @@
 <div class="avatar relative">
-    <div class="w-28 rounded-full border border-{{ $color }} ring-1 ring-offset-blue-500 ring-blue-200 ring-inset ring-offset-[6px]">
+    <div class="w-28 rounded-full border border-blue-500 ring-1 ring-offset-blue-500 ring-blue-200 ring-inset ring-offset-[6px]">
         <img src="{{ $profilePhoto ? $profilePhoto->temporaryUrl() : auth()->user()->profile_photo }}" alt="{{ auth()->user()->name }}" class="w-28 h-28 p-2 rounded-full">
         <div class="absolute top-0 left-0 w-28 h-28 rotate-[270deg] rounded-full overflow-visible">
             <svg class="w-full h-full">
diff --git a/resources/views/livewire/send-message-input.blade.php b/resources/views/livewire/send-message-input.blade.php
index 88980a9..e10f690 100644
--- a/resources/views/livewire/send-message-input.blade.php
+++ b/resources/views/livewire/send-message-input.blade.php
@@ -35,7 +35,7 @@ class="absolute top-0 right-1 -mt-2 -mr-3 bg-amber-500 text-white center rounded
     </div>
     <div class="relative flex gap-2 items-center">
         <label class="w-full">
-            <input id="messageInput" wire:model.live="newMessage" wire:keydown.enter="sendMessage"
+            <input id="messageInput" wire:model.live="newMessage"
                    class="message-input"
                    autocomplete="off"
                    type="text" placeholder="Type your message...">
@@ -70,7 +70,6 @@ class="btn right-3 btn-primary ring-1 ring-offset-2 border rounded-md btn-square
 
     socket.on('receiveMessage', (message) => {
         console.log('New message received:', message);
-        //Emit refresh messages event
         Livewire.dispatch('messagesSent');
         Livewire.dispatch('received-message');
     });
diff --git a/server.js b/server.js
index f2eba05..44f688e 100644
--- a/server.js
+++ b/server.js
@@ -10,26 +10,61 @@ const io = new Server(server, {
     }
 });
 
+// Store connected users and their socket IDs
+const connectedUsers = new Map();
+
 io.on('connection', (socket) => {
+    console.log('A user connected');
+
     socket.on('userConnected', (user) => {
-        console.log(user['name'] + ' connected');
-        //TODO! Set online status
+        console.log(`${user.name} connected`);
+        connectedUsers.set(socket.id, user);
+        // Emit the list of connected users to all clients
+        io.emit('connectedUsers', Array.from(connectedUsers.values()));
     });
 
     socket.on('userDisconnected', (user) => {
-        console.log(user['name'] + ' disconnected');
-        //TODO! Set offline status
+        console.log(`${user.name} disconnected`);
+        connectedUsers.delete(socket.id);
+        // Emit the list of connected users to all clients
+        io.emit('connectedUsers', Array.from(connectedUsers.values()));
     });
 
     socket.on('typing', (data) => {
-        //TODO! Data format must have the current user and the user that is being typed to
-        //TODO! Set typing status
-        console.log(data['from'] + ' is typing to ' + data['to']);
+        const { from, to } = data;
+        const recipient = Array.from(connectedUsers.values()).find(user => user.id === to);
+        if (recipient) {
+            const recipientSocketId = Array.from(connectedUsers.entries()).find(([_, user]) => user.id === to)[0];
+            io.to(recipientSocketId).emit('typing', from);
+        }
+    });
+
+    socket.on('stopTyping', (data) => {
+        const { from, to } = data;
+        const recipient = Array.from(connectedUsers.values()).find(user => user.id === to);
+        if (recipient) {
+            const recipientSocketId = Array.from(connectedUsers.entries()).find(([_, user]) => user.id === to)[0];
+            io.to(recipientSocketId).emit('stopTyping', from);
+        }
+    });
+
+    socket.on('sendMessage', (data) => {
+        const { from, to, message } = data;
+        const recipient = Array.from(connectedUsers.values()).find(user => user.id === to);
+        if (recipient) {
+            const recipientSocketId = Array.from(connectedUsers.entries()).find(([_, user]) => user.id === to)[0];
+            io.to(recipientSocketId).emit('receiveMessage', { from, message });
+        }
     });
 
-    socket.on('sendMessage', (message) => {
-        console.log(message);
-        io.emit('receiveMessage', message);
+    socket.on('disconnect', () => {
+        console.log('A user disconnected');
+        const user = connectedUsers.get(socket.id);
+        if (user) {
+            connectedUsers.delete(socket.id);
+            // Emit the list of connected users to all clients
+            io.emit('connectedUsers', Array.from(connectedUsers.values()));
+        }
     });
 });