Actualmente trabajando en un mensajero de chat en vivo 1: 1. cuando envío un mensaje, aparece en la parte inferior del chat donde quiero, pero al actualizar la página, vuelve a la parte superior del mensajero. ¿Cómo lo configuro para que el mensaje más nuevo esté siempre en la parte inferior? Aquí hay un código, creo que el problema está en setActiveChat o addMessageToConversation.
const sendMessage = (data, body) => { socket.emit("new-message", { message: data.message, recipientId: body.recipientId, sender: data.sender, }); }; const postMessage = async (body) => { try { const data = await saveMessage(body); if (!body.conversationId) { addNewConvo(body.recipientId, data.message); } else { addMessageToConversation(data); } sendMessage(data, body); } catch (error) { console.error(error); } }; const addNewConvo = useCallback( (recipientId, message) => { setConversations(previousState => previousState.map(convo => { if (convo.otherUser.id === recipientId) { convo.messages.push(message) convo.latestMessageText = message.text; convo.id = message.conversationId; return convo } return convo })) }, [setConversations], ); const addMessageToConversation = useCallback( (data) => { // if sender isn't null, that means the message needs to be put in a brand new convo const { message, sender = null } = data; if (sender !== null) { const newConvo = { id: message.conversationId, otherUser: sender, messages: [message], }; newConvo.latestMessageText = message.text; setConversations((prev) => [newConvo, ...prev]); } conversations.forEach((convo) => { if (convo.id === message.conversationId) { const convoCopy = { ...convo }; convoCopy.messages.push(message); convoCopy.latestMessageText = message.text; return convoCopy; } else { return convo; } }); setConversations([...conversations]); }, [setConversations, conversations], ); const setActiveChat = useCallback((username) => { setActiveConversation(username); }, []);