No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Canales y Mensajes

17/19
Recursos

Aportes 3

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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>

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