From 63354e85d57ddd41f3bbad4d0fbcb1a8e293a2f6 Mon Sep 17 00:00:00 2001 From: Gal Podlipnik Date: Sun, 15 Jun 2025 21:44:22 +0200 Subject: [PATCH] finnal changes --- frontend/src/components/ChatSidebar.tsx | 45 +++++++++---------------- frontend/src/components/MessageCard.tsx | 25 ++++++++------ frontend/src/components/Navbar.tsx | 24 +++++++------ frontend/src/lib/api.ts | 1 - frontend/src/lib/socket.ts | 14 ++++++-- 5 files changed, 56 insertions(+), 53 deletions(-) diff --git a/frontend/src/components/ChatSidebar.tsx b/frontend/src/components/ChatSidebar.tsx index 94cf2cd..c484b31 100644 --- a/frontend/src/components/ChatSidebar.tsx +++ b/frontend/src/components/ChatSidebar.tsx @@ -1,8 +1,9 @@ import { chatAPI } from '@/lib/api'; import { useAuthStore } from '@/stores/authStore'; import { useChatStore } from '@/stores/chatStore'; +import { useSocketStore } from '@/stores/socketStore'; import type { ChatRoom, CreateChatRoomRequest } from '@/types'; -import { useMutation, useQuery } from '@tanstack/react-query'; +import { useQuery } from '@tanstack/react-query'; import { Laptop, LogOut, @@ -52,8 +53,9 @@ export const ChatSidebar: FC = ({ memberUsernames: [], }); - const { chatRooms, onlineUsers, setChatRooms, addChatRoom } = useChatStore(); + const { chatRooms, onlineUsers, setChatRooms } = useChatStore(); const { user, logout } = useAuthStore(); + const { socket } = useSocketStore(); const navigate = useNavigate(); const { theme, setTheme } = useTheme(); @@ -69,29 +71,18 @@ export const ChatSidebar: FC = ({ }, }); - const createRoomMutation = useMutation({ - mutationKey: ['createChatRoom'], - mutationFn: chatAPI.createChatRoom, - onSuccess: (response) => { - if (response.data.success) { - const newRoom = response.data.data; - addChatRoom(newRoom); - setIsCreateDialogOpen(false); - setNewRoomData({ name: '', description: '', memberUsernames: [] }); - toast.success('Chat room created successfully'); - - navigate(`/room/${newRoom.id}`); - } - }, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - onError: (error: any) => { - toast.error(error.response?.data?.error ?? 'Failed to create chat room'); - }, - }); - const handleCreateRoom = (e: FormEvent) => { e.preventDefault(); - createRoomMutation.mutate(newRoomData); + + if (!socket) { + toast.error('Socket connection is not established'); + return; + } + + socket.emit('create_chat_room', newRoomData); + + setNewRoomData({ name: '', description: '', memberUsernames: [] }); + setIsCreateDialogOpen(false); }; const getOnlineMembersCount = (room: ChatRoom) => { @@ -193,12 +184,8 @@ export const ChatSidebar: FC = ({ placeholder="user1, user2, user3" /> - diff --git a/frontend/src/components/MessageCard.tsx b/frontend/src/components/MessageCard.tsx index 7eec5ef..7a27dba 100644 --- a/frontend/src/components/MessageCard.tsx +++ b/frontend/src/components/MessageCard.tsx @@ -198,11 +198,11 @@ export const MessageCard: FC<{ message: Message }> = ({ message }) => { 'flex items-center gap-1 text-xs px-2 py-1 rounded-full', hasUserReacted(message.reactions, type) ? type === 'like' - ? 'bg-red-100' + ? 'bg-red-100 dark:bg-red-900/20' : type === 'thumbs_up' - ? 'bg-blue-100' - : 'bg-yellow-100' - : 'bg-gray-100' + ? 'bg-blue-100 dark:bg-blue-900/20' + : 'bg-yellow-100 dark:bg-yellow-900/20' + : 'bg-gray-100 dark:bg-gray-700' )} onClick={() => handleReaction(message.id, type)} > @@ -210,8 +210,9 @@ export const MessageCard: FC<{ message: Message }> = ({ message }) => { )} @@ -219,8 +220,9 @@ export const MessageCard: FC<{ message: Message }> = ({ message }) => { )} @@ -228,12 +230,13 @@ export const MessageCard: FC<{ message: Message }> = ({ message }) => { )} - {count} + {count} ))} diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx index 956a965..a26a9f1 100644 --- a/frontend/src/components/Navbar.tsx +++ b/frontend/src/components/Navbar.tsx @@ -1,3 +1,4 @@ +import { useAuthStore } from '@/stores/authStore'; import { useChatStore } from '@/stores/chatStore'; import { Settings, Users } from 'lucide-react'; import { useState, type FC } from 'react'; @@ -10,7 +11,7 @@ export const NavBar: FC = () => { const { chatRooms, onlineUsers } = useChatStore(); const { roomId } = useParams<{ roomId: string }>(); const [isSettingsOpen, setIsSettingsOpen] = useState(false); - + const { user } = useAuthStore(); const currentRoom = chatRooms.find((room) => room.id === roomId); const getOnlineMembersCount = () => { @@ -45,15 +46,18 @@ export const NavBar: FC = () => { )}
- {currentRoom && ( - - )} + {currentRoom && + currentRoom.members.some( + (member) => member.userId === user?.id && member.role === 'admin' + ) && ( + + )}
{currentRoom && ( diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts index 8b5cf48..4f3317b 100644 --- a/frontend/src/lib/api.ts +++ b/frontend/src/lib/api.ts @@ -55,7 +55,6 @@ export const chatAPI = { limit = 50 ): Promise> => api.get(`/messages/${roomId}?page=${page}&limit=${limit}`), - // Add these new endpoints updateChatRoom: ( roomId: string, data: UpdateChatRoomRequest diff --git a/frontend/src/lib/socket.ts b/frontend/src/lib/socket.ts index 65afc1a..3792e98 100644 --- a/frontend/src/lib/socket.ts +++ b/frontend/src/lib/socket.ts @@ -1,6 +1,6 @@ import { useChatStore } from '@/stores/chatStore'; import { useSocketStore } from '@/stores/socketStore'; -import type { Message, MessageReaction } from '@/types'; +import type { ChatRoom, Message, MessageReaction } from '@/types'; import { io, type Socket } from 'socket.io-client'; import { toast } from 'sonner'; @@ -116,13 +116,23 @@ class SocketService { } ); + this.socket.on('chat_room_created', (room: ChatRoom) => { + const { chatRooms, addChatRoom } = useChatStore.getState(); + + if (!chatRooms.some((r) => r.id === room.id)) { + addChatRoom(room); + toast.success('Chat room created successfully', { + id: 'creating-room', + }); + } + }); + this.socket.on( 'rate_limit_exceeded', (data: { message: string; remainingTime?: number }) => { console.warn('Rate limit exceeded:', data.message); toast.error(`Rate limit exceeded: ${data.message}`, { duration: data.remainingTime ? data.remainingTime * 1000 : 5000, - position: 'top-right', style: { background: '#f8d7da', color: '#721c24',