refactor: observer in MessageSeen.jsx

[damirgros]

Fixes Issue

My PR closes #669

👨‍💻 Changes proposed(What did you do ?)

Refactored observer logic in the "MessageSeen.jsx" by creating useObserver hook in the new file "useObserver.js" in the folder "hooks".

Transfered observer logic from "MessageSeen.jsx" to "useObserver.js" and also memoized it so it doesn't get re-created every time component re-renders.

Removed unused imports from "MessageSeen.jsx" and initiated observer variable with useObserver hook.

✔️ Check List (Check all the applicable boxes)

• My code follows the code style of this project.
• This PR does not contain plagiarized content.
• The title and description of the PR is clear and explains the approach.

Note to reviewers

📷 Screenshots

[vercel]

@damirgros is attempting to deploy a commit to the dunsin's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Dun-sin]

@damirgros great work just one thing, can you replace the code with a text description of what you did this is because we can see the code in the code tab already, but we won't see a text description.

And a good convention is to delete a fork to follow a linear history on GitHub, this is so your code doesn't combine the last code which was already merged. Or you could just create a new branch from the main and then pull it so it's linear (for this one, no need to delete the PR just a correction)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
whisper-b2p2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 20, 2024 11:24am

[Dun-sin]

in production, this doesn't work:

[damirgros]

Intersection Observer API doesn't have connect method.

Can you try in production only changing useEffect in MessageSeen.jsx to look like this (I added the check for if observer and sortedMessages exist, removed observer.connect and added observer dependancy):

useEffect(() => {
		// Only proceed if the observer and sortedMessages are available
		if (!observer || !sortedMessages.length) return;

		sortedMessages.forEach((message) => {
			if (message.isRead) return;

			const messageElement = document.getElementById(`message-${message.id}`);
			if (messageElement && isTabVisible) {
				observer.observe(messageElement); 
			}
		});

		return () => {
			if (observer) observer.disconnect();
		};
	}, [sortedMessages, isTabVisible, observer]);

[Dun-sin]

Intersection Observer API doesn't have connect method.

Can you try in production only changing useEffect in MessageSeen.jsx to look like this (I added the check for if observer and sortedMessages exist, removed observer.connect and added observer dependancy):

useEffect(() => {
		// Only proceed if the observer and sortedMessages are available
		if (!observer || !sortedMessages.length) return;

		sortedMessages.forEach((message) => {
			if (message.isRead) return;

			const messageElement = document.getElementById(`message-${message.id}`);
			if (messageElement && isTabVisible) {
				observer.observe(messageElement); 
			}
		});

		return () => {
			if (observer) observer.disconnect();
		};
	}, [sortedMessages, isTabVisible, observer]);

Push it to GitHub and I'll set it up here

[damirgros]

It is pushed.

[Dun-sin]

@damirgros great work just one thing, can you replace the code with a text description of what you did this is because we can see the code in the code tab already, but we won't see a text description.

And a good convention is to delete a fork to follow a linear history on GitHub, this is so your code doesn't combine the last code which was already merged. Or you could just create a new branch from the main and then pull it so it's linear (for this one, no need to delete the PR just a correction)

@damirgros Alright it works in prod, also address this please the first one

[Dun-sin]

looks great, thanks for it.

[damirgros]

@damirgros great work just one thing, can you replace the code with a text description of what you did this is because we can see the code in the code tab already, but we won't see a text description.
And a good convention is to delete a fork to follow a linear history on GitHub, this is so your code doesn't combine the last code which was already merged. Or you could just create a new branch from the main and then pull it so it's linear (for this one, no need to delete the PR just a correction)

@damirgros Alright it works in prod, also address this please the first one

Added text description in the PR