@pubuduth-aplicy/chat-ui 2.1.27 → 2.1.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.27",
+  "version": "2.1.28",
   "description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
   "license": "ISC",
   "author": "",

package/src/components/messages/Messages.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 // import useGetMessages from "../../hooks/useGetMessages";
 // import MessageSkeleton from "../skeletons/MessageSkeleton";
 import Message from "./Message";
@@ -10,22 +10,47 @@ import useChatUIStore from "../../stores/Zustant";
 
 const Messages = () => {
 	const { selectedConversation } = useChatUIStore()
-	const {userId}=useChatContext()
-console.log(userId);
+	const {userId,socket}=useChatContext()
 	const { data: messages, isLoading, isError, error } = useMessages(selectedConversation?._id, userId);
-	// useListenMessages();
-	console.log("isLoading",isLoading);
-	console.log("error",error);
-	console.log("messages",messages);
+	const [localMessages, setLocalMessages] = useState<any[]>([]);
 
 	const lastMessageRef = useRef<HTMLDivElement>(null);
 
+	useEffect(() => {
+		if (messages?.messages) {
+		  setLocalMessages(messages.messages);
+		}
+	  }, [messages]);
+	
+	  // Listen for new messages from the server
+	  useEffect(() => {
+		if (!socket) return;
+	
+		const handleNewMessage = (newMessage: any) => {
+		  setLocalMessages((prevMessages) => [...prevMessages, newMessage]);
+		};
+	
+		socket.on("newMessage", handleNewMessage);
+	
+		return () => {
+		  socket.off("newMessage", handleNewMessage);
+		};
+	  }, [socket]);
+
 	useEffect(() => {
 		setTimeout(() => {
 			lastMessageRef.current?.scrollIntoView({ behavior: "smooth" });
 		}, 100);
 	}, [messages]);
 
+	if (isLoading) {
+		return <p>Loading messages...</p>;
+	  }
+	
+	  if (isError) {
+		return <p>Error: {error?.message}</p>;
+	  }
+
 	return (
 		// <div className='px-4 flex-1 overflow-auto'>
 		// 	{!loading &&
@@ -42,19 +67,33 @@ console.log(userId);
 		// 	)}
 		// </div>
 
-		<div className='chatMessages'>
-			{messages?.messages.length > 0 &&
-				messages?.messages.map((message: any) => (
-					<div key={message._id} ref={lastMessageRef}>
-						<Message message={message} />
-					</div>
-				))}
-
-			{/* {loading && [...Array(3)].map((_, idx) => <MessageSkeleton key={idx} />)} */}
-			{messages?.length === 0 && (
-				<p style={{textAlign:"center"}}>Send a message to start the conversation</p>
-			)}
-		</div>
+		// <div className='chatMessages'>
+		// 	{messages?.messages.length > 0 &&
+		// 		messages?.messages.map((message: any) => (
+		// 			<div key={message._id} ref={lastMessageRef}>
+		// 				<Message message={message} />
+		// 			</div>
+		// 		))}
+
+		// 	{/* {loading && [...Array(3)].map((_, idx) => <MessageSkeleton key={idx} />)} */}
+		// 	{messages?.length === 0 && (
+		// 		<p style={{textAlign:"center"}}>Send a message to start the conversation</p>
+		// 	)}
+		// </div>
+
+
+		<div className="chatMessages">
+		{localMessages.length > 0 ? (
+		  localMessages.map((message: any) => (
+			<div key={message._id} ref={lastMessageRef}>
+			  <Message message={message} />
+			</div>
+		  ))
+		) : (
+		  <p style={{ textAlign: "center" }}>Send a message to start the conversation</p>
+		)}
+	  </div>
+
 	);
 };
 export default Messages;

package/src/hooks/mutations/useSendMessage.ts

@@ -8,7 +8,7 @@ export const useMessageMutation = () => {
       mutationFn: sendMessage,
       onSuccess: () => {
         console.log("Service submitted successfully!", "success");
-        queryClient.invalidateQueries({ queryKey: ['GET_ALL_CONVERSATION'] });
+        queryClient.invalidateQueries({ queryKey: ['messages'] });
       },
       onError: (error: any) => {
         console.error("Failed to submit service data:", error);