refactor(messageSeen.jsx): move observer to it's own hook

Co-authored-by: Dunsin <78784850+Dun-sin@users.noreply.github.com>

client/src/components/Chat/MessageSeen.jsx

@@ -3,18 +3,19 @@ import PropTypes from 'prop-types';
 
 import useIsTabActive from 'src/hooks/useIsTabActive';
 
-import useChatUtils from 'src/lib/chatSocket';
+import useObserver from 'src/hooks/useObserver';
+
 import { useApp } from 'src/context/AppContext';
 import { useChat } from 'src/context/ChatContext';
-import { socket } from 'src/lib/socketConnection';
 
 const MessageSeen = ({ isRead, isSender }) => {
 	const { app } = useApp();
 
 	const isTabVisible = useIsTabActive();
 
-	const { messages: state, receiveMessage } = useChat();
-	const { seenMessage } = useChatUtils(socket);
+	const observer = useObserver(isSender);
+
+	const { messages: state } = useChat();
 
 	const sortedMessages = useMemo(
 		() =>
@@ -27,28 +28,10 @@ const MessageSeen = ({ isRead, isSender }) => {
 	);
 
 	useEffect(() => {
-		// Initialize Intersection Observer
-		const observer = new IntersectionObserver(
-			(entries) => {
-				entries.forEach((entry) => {
-					if (entry.isIntersecting && !isSender) {
-						// Mark the message as read
-						const messageId = entry.target.getAttribute('id').split('-')[1];
-						try {
-							seenMessage({
-								messageId,
-								chatId: app.currentChatId,
-							});
-						} catch (e) {
-							return;
-						}
-						receiveMessage(messageId, app.currentChatId);
-					}
-				});
-			},
-			{ threshold: 0.5 }
-			// Trigger when 50% of the element is in the viewport
-		);
+		// Only proceed if the observer and sortedMessages are available
+		if (!observer || !sortedMessages.length) {
+			return;
+		}
 
 		sortedMessages.forEach((message) => {
 			if (message.isRead) {
@@ -62,10 +45,11 @@ const MessageSeen = ({ isRead, isSender }) => {
 		});
 
 		return () => {
-			// Clean up the observer
-			observer.disconnect();
+			if (observer) {
+				observer.disconnect();
+			}
 		};
-	}, [sortedMessages, isTabVisible]);
+	}, [sortedMessages, isTabVisible, observer]);
 
 	return isSender && <p className="text-sm">{isRead ? 'Seen' : 'Not Seen'}</p>;
 };

client/src/hooks/useObserver.js

@@ -0,0 +1,39 @@
+import useChatUtils from 'src/lib/chatSocket';
+import { socket } from 'src/lib/socketConnection';
+import { useChat } from 'src/context/ChatContext';
+import { useApp } from 'src/context/AppContext';
+import { useCallback } from 'react';
+
+export default (isSender) => {
+
+    const { seenMessage } = useChatUtils(socket);
+    const { receiveMessage } = useChat();
+    const { app } = useApp();
+
+    const observerCallback = useCallback(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting && !isSender) {
+              const messageId = entry.target.getAttribute('id').split('-')[1];
+              try {
+                seenMessage({
+                  messageId,
+                  chatId: app.currentChatId,
+                });
+              } catch (e) {
+                return;
+              }
+              receiveMessage(messageId, app.currentChatId);
+            }
+          });
+        },
+        [isSender, seenMessage, receiveMessage, app.currentChatId]
+      );
+
+      const observer = new IntersectionObserver(observerCallback, {
+        threshold: 0.5, // Trigger when 50% of the element is in the viewport
+      });
+
+    return observer
+};
+