Merge pull request #31 from NextStepFinalProject/NXD-30

Nxd 30 - Emphasize the selection of chat recipient

Author: Lina0Elman

nextstep-backend/src/services/socket_service.ts

@@ -28,8 +28,13 @@ const initSocket = async (socketListener: Server) => {
             await new messageModel(messageToInsert).validate();
             const insertedMessage = await messageModel.create(messageToInsert);
 
-            // Emit mesage
-            socketListener.to(roomId).emit(config.socketMethods.messageFromServer, { roomId, message: insertedMessage });
+            // Emit message with user info
+            const messageWithUser = {
+                ...insertedMessage.toObject(),
+                email: user.email,
+                username: user.username,
+            };
+            socketListener.to(roomId).emit(config.socketMethods.messageFromServer, { roomId, message: messageWithUser });
         });
 
         // Online users

nextstep-frontend/src/components/DividedList.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import {
   Avatar,
   Box,
@@ -11,19 +10,18 @@ import {
 
 interface User {
   id: string;
+  username?: string;
   email: string;
 }
 
+interface DividedListProps {
+  onlineUsers: { id: string, username?: string, email: string }[];
+  onUserClick: (user: { id: string, username?: string, email: string }) => void;
+  disabled?: boolean;
+  selectedUserId?: string | null;
+}
 
-const DividedList: React.FC<any> = ({ onlineUsers, onUserClick, disabled = false }) => {
-  const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
-
-  const handleUserClick = (user: User) => {
-    if (disabled) return;
-    setSelectedUserId(user.id);
-    onUserClick(user);
-  };
-
+const DividedList: React.FC<DividedListProps> = ({ onlineUsers, onUserClick, disabled = false, selectedUserId }) => {
   return (
     <Box sx={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 4 }}>
       <List
@@ -43,16 +41,17 @@ const DividedList: React.FC<any> = ({ onlineUsers, onUserClick, disabled = false
           <div key={user.id}>
             {index !== 0 && <Divider />}
             <ListItemButton
-              onClick={() => handleUserClick(user)}
+              className={`divided-list-item${selectedUserId === user.id ? ' selected' : ''}`}
+              onClick={() => !disabled && onUserClick(user)}
               disabled={disabled}
               sx={{
                 py: 1.5,
                 px: 2,
-                backgroundColor: user.id === selectedUserId ? 'primary.main' : 'transparent',
-                color: user.id === selectedUserId ? 'primary.contrastText' : 'text.primary',
+                backgroundColor: selectedUserId === user.id ? 'primary.main' : 'transparent',
+                color: selectedUserId === user.id ? 'primary.contrastText' : 'text.primary',
                 transition: 'all 0.3s ease',
                 '&:hover': {
-                  backgroundColor: user.id === selectedUserId ? 'primary.dark' : 'action.hover',
+                  backgroundColor: selectedUserId === user.id ? 'primary.dark' : 'action.hover',
                   transform: 'translateX(4px)',
                 },
                 '&.Mui-disabled': {
@@ -75,10 +74,10 @@ const DividedList: React.FC<any> = ({ onlineUsers, onUserClick, disabled = false
                 />
               </ListItemAvatar>
               <ListItemText
-                primary={user.email}
+                primary={`${user.username} (${user.email})`}
                 primaryTypographyProps={{
                   fontSize: '0.875rem',
-                  fontWeight: user.id === selectedUserId ? 600 : 400,
+                  fontWeight: selectedUserId === user.id ? 600 : 400,
                 }}
                 sx={{
                   transition: 'all 0.3s ease',

nextstep-frontend/src/pages/Chat.css

@@ -95,4 +95,9 @@
 
 .online-users {
     margin-top: 10px;
+}
+
+.divided-list-item.selected {
+    font-weight: bold;
+    border-radius: 20px;
 }

nextstep-frontend/src/pages/Chat.tsx

@@ -25,6 +25,7 @@ const Chat: React.FC = () => {
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [isConnected, setIsConnected] = useState(false);
+  const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
 
   const usersMetadataCacheRef = useRef(new Set<LoginResponse>());
   const socketRef = useRef<Socket | null>(null);
@@ -138,13 +139,13 @@ const Chat: React.FC = () => {
 
   const onUserClick = async (user: LoginResponse) => {
     if (!userAuthRef.current) return;
-
+    setSelectedUserId(user.id!);
     try {
       setIsLoading(true);
       const response = await axios.get<Room>(`${config.app.backend_url()}/room/user/${user.id}`, {
         headers: { Authorization: `Bearer ${userAuthRef.current.accessToken}` }
       });
-      
+
       setRoom(response.data);
       socketRef.current?.emit(config.socketMethods.enterRoom, response.data._id);
     } catch (err) {
@@ -160,6 +161,17 @@ const Chat: React.FC = () => {
     }
   }, [room.messages]);
 
+  // Type guard for users with valid id and email
+  function isValidUser(user: LoginResponse): user is LoginResponse & { id: string; email: string } {
+    return Boolean(user.id && user.email);
+  }
+
+  // Helper to get display name by userId
+  const getUserDisplayName = (userId: string) => {
+    const user = onlineUsers.find(u => u.id === userId);
+    return user?.username || user?.email || 'Unknown User';
+  };
+
   if (isLoading) {
     return (
       <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
@@ -339,7 +351,7 @@ const Chat: React.FC = () => {
                     }}
                     className="message-user"
                   >
-                    {Array.from(usersMetadataCacheRef.current).find(u => u.userId === m?.userId)?.email}
+                    {getUserDisplayName(m?.userId)}
                   </Typography>
                   <Typography
                     variant="caption"
@@ -439,9 +451,15 @@ const Chat: React.FC = () => {
           </Box>
         </Box>
         <DividedList 
-          onlineUsers={onlineUsers.map(user => ({ id: user.id, email: user.email }))} 
-          onUserClick={onUserClick}
+          onlineUsers={onlineUsers.filter(isValidUser).map(user => ({ id: user.id, username: user.username, email: user.email }))} 
+          onUserClick={(user) => {
+            const fullUser = onlineUsers.find(u => u.id === user.id);
+            if (fullUser) {
+              onUserClick(fullUser);
+            }
+          }}
           disabled={!isConnected}
+          selectedUserId={selectedUserId}
         />
       </Paper>
     </Box>