Presentación

Firebase Auth

Cloud Firestore

Cloud Storage

Cloud Functions

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

  • La mejor forma de eliminar colecciones con sus subcolecciones (tal como pone en la propia documentación) es a través de una Cloud Function. Algo que cubriremos en su momento. Por ahora comencemos con una implementación a través del cliente local de Firebase Firestore, añadiendo una nueva acción en nuestro módulo rooms.js.
async removeRoom(context, roomID) {
  const room = db.collection("rooms").doc(roomID);
  const messages = room.collection("messages").onSnapshot(doSnapshot);

  await room.delete();

  function doSnapshot(snapshot) {
    snapshot.docs.forEach(async doc => {
      await room
        .collection("messages")
        .doc(doc.id)
        .delete();
    });
    messages(); // Unsub
  }
}
  • Para solicitar confirmación al usuario antes de borrar, vamos a crear una acción en nuestro módulo utils.js que nos permita generar una nueva instancia Vue con sus propiedades y métodos necesarios para cargar un componente carcasa de forma dinámica y presentarle al usuario la opción, retornando una promesa.
import Vue from "vue";

const actions = {
  requestConfirmation(context, { props, component }) {
    const Component = () => import(`../components/${component}Component.vue`);
    return new Promise((resolve, reject) => {
      const dialog = new Vue({
        methods: {
          actionHandler(fn, arg) {
            return function () {
              fn(arg);
              dialog.$destroy();
              dialog.$el.remove();
            };
          },
        },
        render(h) {
          return h(Component, {
            props,
            on: {
              confirm: (data) => {
                this.actionHandler(resolve, data)();
              },
              cancel: this.actionHandler(reject, new Error("Action cancelled")),
            },
          });
        },
      }).$mount();
      document.getElementById("app").appendChild(dialog.$el);
    });
  },
};

export default {
  namespaced: true,
  actions,
};
  • Ahora nos queda hacer uso de requestConfirmation y removeRoom desde el componente local.
async removeRoom() {
  try {
    await this.$store.dispatch("utils/requestConfirmation", {
      props: { message: "¿Remove room?" },
      component: "ConfirmationModal"
    });

    await this.$store.dispatch("rooms/removeRoom", this.id);
    this.$toast.success("Room removed");
    this.$router.push({ name: "home" });
  } catch (error) {
    this.$toast.error(error.message);
  }
},
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 📬