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.
Curso Firebase para Web
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.jsque 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
requestConfirmationyremoveRoomdesde 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);
}
},
Descarga la chuleta de Vue 3
Para tener todas las novedades de Vue 3 al alcance de la mano 🔥️
DESCARGA GRATIS LA CHULETA AHORA 💾Presentación
Firebase Auth
Cloud Firestore 🔥
Cloud Storage 🗄
Cloud Functions ☁
No te pierdas ninguna novedad
Participa en la Comunidad Escuela Vue
