removed console logs

src/app/chat/Channel.js

@@ -2,13 +2,21 @@
 
 import React from 'react';
 
-const Channel = ({ id, name, participants, handleChannelSelect }) => {
+const Channel = ({
+  id,
+  name,
+  participants,
+  handleChannelSelect,
+  isSelected,
+}) => {
   return (
     <div
-      className="p-4 border-b border-gray-200 hover:bg-gray-800 cursor-pointer"
+      className={`p-4 border-b border-gray-200 hover:bg-gray-800 cursor-pointer ${isSelected ? 'bg-gray-800' : ''}`}
       onClick={() => handleChannelSelect(id)}
     >
-      <div className="text-lg font-medium">{name}</div>
+      <p className={`text-lg font-medium ${isSelected ? 'text-blue-600' : ''}`}>
+        {name}
+      </p>
       <span className="text-sm text-gray-500">{participants} participants</span>
     </div>
   );

src/app/chat/ChannelList.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import Channel from './Channel';
 
-const ChannelList = ({ channels, handleChannelSelect }) => {
+const ChannelList = ({ channels, handleChannelSelect, selectedChannel }) => {
   let list = `There is no channels to show`;
   if (channels) {
     list = channels.map((c) => (
@@ -13,14 +13,15 @@ const ChannelList = ({ channels, handleChannelSelect }) => {
         name={c.name}
         participants={c.participants}
         handleChannelSelect={handleChannelSelect}
+        isSelected={selectedChannel.id === c.id}
       />
     ));
   }
 
   return (
     <div className="w-1/4  border-r border-gray-200">
       <div className="p-4 border-b border-gray-200">
-        <h1 className="text-xl font-semibold">Chats</h1>
+        <h1 className="text-xl font-semibold">Channels</h1>
       </div>
       {list}
     </div>

src/app/chat/Chat.js

@@ -13,6 +13,7 @@ const SERVER = 'http://127.0.0.1:8081';
 const socket = socketIO.connect(SERVER);
 const Chat = () => {
   const [channels, setChannels] = useState([]);
+  const [selectedChannel, setSelectedChannel] = useState({});
   const [messages, setMessages] = useState([]);
   const [notifications, setNotifications] = useState([]);
   const [typingStatus, setTypingStatus] = useState('');
@@ -35,19 +36,18 @@ const Chat = () => {
     socket.emit('channel-join', id, () => {});
   };
 
-  useEffect(() => {
-    socket.on('channel', (channel) => {
-      let oldChannels = channels.slice(0);
-      oldChannels.forEach((c) => {
-        if (c.id === channel.id) {
-          c.participants = channel.participants;
-        }
-      });
-
-      createNotification();
-      setChannels(oldChannels);
+  socket.on('channel', (channel) => {
+    let oldChannels = channels.slice(0);
+    oldChannels.forEach((c) => {
+      if (c.id === channel.id) {
+        c.participants = channel.participants;
+      }
     });
-  }, [socket]);
+
+    // createNotification();
+    setChannels(oldChannels);
+    setSelectedChannel({ ...channel });
+  });
 
   useEffect(() => {
     socket.on('typingResponse', (data) => setTypingStatus(data));
@@ -71,6 +71,7 @@ const Chat = () => {
       <ChannelList
         channels={channels}
         handleChannelSelect={handleChannelSelect}
+        selectedChannel={selectedChannel}
       />
       <div className="flex flex-col w-full">
         <MessagesPanel

src/app/chat/MessagesPanel.js

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useRef, useEffect } from 'react';
 
 const MessagesPanel = ({ messages, currentUser, typingStatus }) => {
   const lastMessageRef = useRef(null);
@@ -30,9 +30,11 @@ const MessagesPanel = ({ messages, currentUser, typingStatus }) => {
             ),
           )}
         </div>
-        <div className="text-xs italic">
-          <p>{typingStatus}...</p>
-        </div>
+        {!!typingStatus ? (
+          <div className="text-xs italic">
+            <p>{typingStatus}...</p>
+          </div>
+        ) : null}
         <div ref={lastMessageRef} />
       </div>
     </div>

src/app/context/AuthContext.js

@@ -15,8 +15,6 @@ export const AuthContextProvider = ({ children }) => {
 
   const { handleAuth, registerUser } = useAuth(closeModal, setCurrentUser);
 
-  console.log('currentUser', currentUser);
-
   const context = useMemo(
     () => ({
       handleAuth,