Eliminar salas de conversación y sus mensajes
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
yremoveRoom
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 
¿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.