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);
  }
},
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

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 📬