JSFiddle - React, Tailwind, and code Playground

by borisjavier

JavaScript

const sortedMessages = [
    {
        "message": "Qué onda?",
        "roomId": "fe9e10f0fe9a026397a6f07f0bd5a457e9dcfa8c51427192eb3424540fbf1dab",
        "timestamp": 1738013104,
        "user": "[email protected]",
        "pic": "https://lh3.googleusercontent.com/a-/AOh14GgRlyZROV9fzjkyGzw3KqPwEf6CfHigKHjsSSZKeQ=s96-c",
        "name": "BJ"
    },
    {
        "message": "Bom dia, posso ajudar?",
        "roomId": "4856373a87316b3e9449b2618b7aa3c0dcb32d41eef4bde209a43289f6a87403",
        "timestamp": 1736426474,
        "user": "[email protected]",
        "pic": "https://lh3.googleusercontent.com/a/ACg8ocLbOBORiAxQpQdQsABuDq9P1ypu3J03XqvWXs-hRCRPiqnylg=s96-c",
        "name": "Golden Notes SAS"
    },
    {
        "message": "Olá",
        "roomId": "3cf18cf62214a0c81eb5c9ccedd11d9eb9d173ce8e81e62d653bed885f026de0",
        "timestamp": 1736425285,
        "user": "[email protected]",
        "pic": "https://lh3.googleusercontent.com/a/AATXAJzDDPQ11O5j1YBkmD297VviwLWukWzHwdvXlRnN=s96-c",
        "name": "Eddie"
    }
];

const lastMessagesMap = {
    "[email protected]": {
        "message": "Olá",
        "roomId": "3cf18cf62214a0c81eb5c9ccedd11d9eb9d173ce8e81e62d653bed885f026de0",
        "timestamp": 1736425285,
        "user": "[email protected]",
        "pic": "https://lh3.googleusercontent.com/a/AATXAJzDDPQ11O5j1YBkmD297VviwLWukWzHwdvXlRnN=s96-c",
        "name": "Eddie"
    },
    "[email protected]": {
        "message": "Bom dia, posso ajudar?",
        "roomId": "4856373a87316b3e9449b2618b7aa3c0dcb32d41eef4bde209a43289f6a87403",
        "timestamp": 1736426474,
        "user": "[email protected]",
        "pic": "https://lh3.googleusercontent.com/a/ACg8ocLbOBORiAxQpQdQsABuDq9P1ypu3J03XqvWXs-hRCRPiqnylg=s96-c",
        "name": "Golden Notes SAS"
    },
    "[email protected]": {
        "message": "Devuelveme el pinguinho. Ahí te va el request",
        "roomId":...