Fix/exposed dm (#157)

* fix: socket connection flow * fix: exposed dm
iaurg · Dec 6, 2023 · e40d01e · e40d01e
1 parent 1a68ee3
commit e40d01e
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 26 deletions.
diff --git a/frontend/src/components/Chat/ChannelCard.tsx b/frontend/src/components/Chat/ChannelCard.tsx
@@ -1,4 +1,10 @@
-import { ArrowRight, Crown, EnvelopeSimple,  Lock, TrashSimple } from "@phosphor-icons/react";
+import {
+  ArrowRight,
+  Crown,
+  EnvelopeSimple,
+  Lock,
+  TrashSimple,
+} from "@phosphor-icons/react";
 import { useContext } from "react";
 import { Chat, ChatContext } from "@/contexts/ChatContext";
 import chatService from "@/services/chatClient";
@@ -8,33 +14,36 @@ type ChannelCardProps = {
 };
 
 export default function ChannelCard({ chat }: ChannelCardProps) {
-  const { setShowElement, setSelectedChat, user } = useContext(ChatContext);
+  const { user, handleOpenChannel } = useContext(ChatContext);
+
   const handleDeleteChannel = () => {
     chatService.socket?.emit("deleteChat", { chatId: chat.id });
   };
 
-  const handleOpenChannel = () => {
-    setSelectedChat(chat);
-    chatService.socket?.emit("joinChat", { chatId: chat.id });
-    chatService.socket?.emit("listMessages", { chatId: chat.id });
-    chatService.socket?.emit("listMembers", { chatId: chat.id });
-    setShowElement("showChannelOpen");
-  };
-
   return (
     <div className="bg-black42-200 flex justify-between rounded-lg items-center p-3 my-1">
       <div className="flex space-x-2 items-center">
         <span
           className="cursor-pointer"
-          onClick={() => handleOpenChannel()}
+          onClick={() => handleOpenChannel(chat)}
           title="Acessar chat"
         >
           {chat.name}
         </span>
         <div className="flex ml-1 space-x-1">
-          {chat.owner === user.login && <Crown className="text-orange42-500" alt="Channel owner" size={12} />}
-          {chat.chatType === 'PROTECTED' && <Lock color="white" alt="Password protected" size={12} />}
-          {chat.chatType === 'PRIVATE' && <EnvelopeSimple color="white" alt="Direct message" size={12} />}
+          {chat.owner === user.login && (
+            <Crown
+              className="text-orange42-500"
+              alt="Channel owner"
+              size={12}
+            />
+          )}
+          {chat.chatType === "PROTECTED" && (
+            <Lock color="white" alt="Password protected" size={12} />
+          )}
+          {chat.chatType === "PRIVATE" && (
+            <EnvelopeSimple color="white" alt="Direct message" size={12} />
+          )}
         </div>
       </div>
       <div className="flex space-x-5 items-center">
@@ -49,7 +58,7 @@ export default function ChannelCard({ chat }: ChannelCardProps) {
         <ArrowRight
           className="text-purple42-200 cursor-pointer"
           size={18}
-          onClick={() => handleOpenChannel()}
+          onClick={() => handleOpenChannel(chat)}
           alt="Acessar chat"
         />
       </div>

diff --git a/frontend/src/components/Chat/OpenChannel.tsx b/frontend/src/components/Chat/OpenChannel.tsx
@@ -20,6 +20,7 @@ interface Message {
   content: string;
   userLogin: string;
   userId: string;
+  chatId: number;
 }
 
 type FormInputs = {
@@ -57,14 +58,6 @@ export function OpenChannel() {
     );
   }, [messages, blockedUsers]);
 
-  chatService.socket?.on("listMessages", (socketMessages: Message[]) => {
-    setMessages(socketMessages);
-  });
-
-  chatService.socket?.on("message", (message: Message) => {
-    setMessages([...messages, message]);
-  });
-
   useEffect(() => {
     chatService.socket?.on("listMembers", (members: ChatMember[]) => {
       const currentMembers = members.filter(
@@ -75,6 +68,16 @@ export function OpenChannel() {
       setIsLoading(false);
     });
 
+    chatService.socket?.on("listMessages", (socketMessages: Message[]) => {
+      setMessages(socketMessages);
+    });
+
+    chatService.socket?.on("message", (message: Message) => {
+      if (message.chatId === selectedChat.id) {
+        setMessages([...messages, message]);
+      }
+    });
+
     // on chat open go to the bottom of the messages
     setTimeout(() => {
       const messagesContainer = document.getElementById("messages-container");
@@ -98,9 +101,17 @@ export function OpenChannel() {
   const handleSendMessage = () => {
     if (myUser && myUser.status === "MUTED") return;
 
-    chatService.socket?.emit("message", {
+    const newMessage = {
       chatId: selectedChat.id,
       content: message,
+    };
+
+    chatService.socket?.emit("message", newMessage);
+
+    chatService.socket?.on("message", (message: Message) => {
+      if (message.chatId === selectedChat.id) {
+        setMessages([...messages, message]);
+      }
     });
 
     setMessage("");
@@ -208,7 +219,6 @@ export function OpenChannel() {
           }}
           title={selectedChat.name}
         >
-
           {selectedChat.chatType === "PRIVATE"
             ? `DM: ${selectedChat.name
                 .split(" - ")

diff --git a/frontend/src/contexts/ChatContext.tsx b/frontend/src/contexts/ChatContext.tsx
@@ -25,6 +25,7 @@ type ChatContextType = {
   validationRequired: boolean;
   user: User;
   handleUpdateListChats: () => void;
+  handleOpenChannel: (chat: Chat) => void;
 };
 
 type ChatProviderProps = {
@@ -125,7 +126,7 @@ export const ChatProvider = ({ children }: ChatProviderProps) => {
     setIsCollapsed(!isCollapsed);
   };
 
-  const handleCloseChat = (chatId: number) => {
+  const handleCloseChat = () => {
     setIsLoading(true);
     chatService.socket?.off("listMessages");
     chatService.socket?.off("message");
@@ -151,6 +152,7 @@ export const ChatProvider = ({ children }: ChatProviderProps) => {
         handleCloseChat,
         setValidationRequired,
         validationRequired,
+        handleOpenChannel,
         user,
         handleUpdateListChats,
       }}