Skip to content

Nxd 30 - Emphasize the selection of chat recipient #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Lina0Elman merged 4 commits into from
Jul 17, 2025
Merged

Nxd 30 - Emphasize the selection of chat recipient #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
98a2274
Add Selection Of Online Users
taljacob2 Jul 7, 2025
bd2bb98
Use Username And Email From Provided OnlineUsers Socket
taljacob2 Jul 7, 2025
3f2234e
Show Also Email In DividedList
taljacob2 Jul 7, 2025
8c9e163
Remove Redundant Imports
taljacob2 Jul 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions nextstep-backend/src/services/socket_service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
31 changes: 15 additions & 16 deletions nextstep-frontend/src/components/DividedList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { useState } from 'react';
import {
Avatar,
Box,
Expand All @@ -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
Expand All @@ -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': {
Expand All @@ -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',
Expand Down
5 changes: 5 additions & 0 deletions nextstep-frontend/src/pages/Chat.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,4 +95,9 @@

.online-users {
margin-top: 10px;
}

.divided-list-item.selected {
font-weight: bold;
border-radius: 20px;
}
28 changes: 23 additions & 5 deletions nextstep-frontend/src/pages/Chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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) {
Expand All @@ -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' }}>
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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>
Expand Down
Loading