Eliminar salas de conversación y sus mensajes

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