Canales y Mensajes
Contenido del curso
Canales y Mensajes
Contenido del curso
Jose Alejandro Pantoja Giraldo
Luis Diego Aguilar Ruiz
Julian David Alzate Cuervo
Ameth Ordoñez Erazo
RAZA !!! Lean el código 1 y mil veces de ser necesario. PERO ENTIÉNDANLO, no escriban solo por replicar, experimenten, hagan los ejercicios, lean el código, modifíquenlo, es una chulada darte cuenta de que entiendes todo lo escrito.
La forma que yo encontre para marcar los mensajes como leidos fue crear un mutation en messages, el cual recibo el channelId, luego hago un map sobre todos los mensajes y veo si el channelId coincide. Si coincide, actualizo el message.read a true
// En el archivo index.js de messages mutations: { markAsRead(state, channelId) { state.messages.map((message) => { if (message.channelId === channelId) { message.read = true } }) } }
Luego en HomeView importo la mutation y la agrego en ChatIem
<script> methods: { ...mapMutations('messages', ['markAsRead']) } </script> <template> <ChatItem v-for="channel in getChannels(search)" :key="channel.id" :id="channel.id" :name="channel.name" :messages="channel.messages" @click="markAsRead(channel.id)" /> </template>
gracias amigo por la solucion
Solución al reto de enviar mensajes en el chat:
Primero cree una mutations en el módulo message, este recibe un parámetro que es un objeto con el mensaje y el channel id:
mutations: { addMessage(state, newMessage) { state.messages.push({ id: Date.now(), author: 1, message: newMessage.message, timestamp: new Date().toLocaleTimeString(), read: true, channelId: parseInt(newMessage.channelId), }); },
Luego cree una variable reactiva, que la llame newMessage y la vincule con v-model al textarea de la vista:
const newMessage = ref(""); const sendMessage = () => { store.commit("messages/addMessage", { message: newMessage.value, channelId: channelId.value, }); newMessage.value = ""; // scrollToBottom(); };
<footer> <textarea rows="3" v-model="newMessage" @keyup.enter="sendMessage" ></textarea> <button @click="sendMessage"> <Icon icon="carbon:send-alt" /> </button> </footer>
Se puede dar click al botón de enviar, o bien presionar la tecla Enter para que se envie el mensaje. Cabe aclarar que lo hice en Composition API
