Por: Juan Andrés Núñez
Juan Andrés Núñez - juanwmedia

Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.

  • 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);
  }
},

Presentación


Firebase Auth


Cloud Firestore 🔥


Cloud Storage 🗄


No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue