Presentación

Firebase Auth

Cloud Firestore

Cloud Storage

Cloud Functions

Curso Firebase para Web se encuentra en desarrollo. Vuelve pronto para encontrar nuevas lecciones.

  • Primero debemos crear las acciones en el módulo messages para eliminar archivos desde Cloud Storage y luego el documento que representa el mensaje desde Cloud Firestore.
// Para los archivos adjuntos al mnensaje
async deleteFile(context, file) {
  const fileRef = storage.refFromURL(file);
  await fileRef.delete();
}

// Para el mensaje en sí
async deleteMessage(context, { roomID, messageID }) {
  await db
    .collection("rooms")
    .doc(roomID)
    .collection("messages")
    .doc(messageID)
    .delete();
},
  • Ahora debemos consumir las acciones desde el componente local ViewRoom.
async deleteMessage(messageID) {
  try {
    await this.$store.dispatch("utils/requestConfirmation", {
      props: { message: "¿Delete message?" },
      component: "ConfirmationModal"
    });

    const message = this.messages.find(message => message.id === messageID);

    if (message.photo) {
      await this.$store.dispatch("messages/deleteFile", message.photo);
    }

    if (message.audio) {
      await this.$store.dispatch("messages/deleteFile", message.audio);
    }

    await this.$store.dispatch("messages/deleteMessage", {
      roomID: this.id,
      messageID
    });

    this.$toast.success("Message deleted");
  } catch (error) {
    console.error(error.message);
    this.$toast.error(error.message);
  }
}
  • Y añadir el botón necesario que sólo se muestra en nuestros propios mensajes.
<!-- Delete message -->
<a
  href="#"
  v-if="message.userId === $store.getters['user/getUserUid']"
  @click="deleteMessage(message.id)"
  class="message__delete is-pulled-right button is-small is-danger is-outlined"
  >X</a
>
Código inicial
Aprende Firebase en Escuela Vue

¿Tienes alguna pregunta sobre esta lección de Curso Firebase para Web?

Resuelve todas tus dudas sobre Firebase en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.

Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬