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);
}
},
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.
¿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.