Description

After a user receives a message in a chat that is not opened, they are not notified about this and can miss messages. To change the situation, add a counter near every username in the user list that shows a number of new unread messages. Furthermore, implement a mechanism that will move the chatting usernames to the top of the user list when one of the users sends a message.

Additionally, you can limit the number of shown messages after a user opens a chat to prevent lags if there are plenty of messages. For example, after a user switches a chat, show only the last ten messages and implement a mechanism that allows seeing older messages.

Objectives

• Change the structure of the user list. Elements with the user class should not be stored in the user container directly. There should be intermediate tags with the user-container class. Every user-container should contain a tag with the class of user and an additional tag with the class of new-message-counter that shows the number of unread messages. A click on a tag with the user-container class opens a private chat with the user who is inside the container;
• After a user received a private message in a not opened chat, add to the element with the new-message-counter class near the username of the sender and show the number of new messages. For example, user A opened a public chat and received two private messages from user B. The counter near user B in the user list should show 2;
• If there are no new messages or a user has read all of them, the counter should not be visible. After a user opens a chat that contains unread messages, reset and hide the element with the new-message-counter class;
• After sending a private message, move the chatting users to the top of the user lists. See examples for more details.

Optional:

• After a user joins or switches a chat, fill the message container with only the last 10-20 messages. Furthermore, you can implement a mechanism that loads additional messages after a user viewed loaded messages and scrolled to the top of the container. Or you can add a button that will load older messages. The tests will not check this part.

If you want to extend the project after you complete the stage, there are numerous features that you can add or change. For example, registration with security, friends list, permanent message storage, a search bar, group chats, user online indicators, etc.

Examples

Example 1: after the first, second, and third user logins and "A user" opens chat with "C user" and "C user" opens chat with "A user"

User A:

User B:

User C:

Example 2: after "A user" sends a private message to "C user"

User A:

User B:

User C:

Example 3: after "B user" opens chat with "C user" and sends two private messages to "C user"

A user:

B user:

C user:

Example 4: after "C user" clicks on "B user"