Eliminar mensajes y archivos adjuntos
Presentación
Firebase Auth
Cloud Firestore
Cloud Storage
Cloud Functions
Curso Firebase para Web se encuentra en desarrollo. Vuelve pronto para encontrar nuevas lecciones.
- Primero debemos crear las acciones en el módulo
messages
para eliminar archivos desde Cloud Storage y luego el documento que representa el mensaje desde Cloud Firestore.
// Para los archivos adjuntos al mnensaje
async deleteFile(context, file) {
const fileRef = storage.refFromURL(file);
await fileRef.delete();
}
// Para el mensaje en sí
async deleteMessage(context, { roomID, messageID }) {
await db
.collection("rooms")
.doc(roomID)
.collection("messages")
.doc(messageID)
.delete();
},
- Ahora debemos consumir las acciones desde el componente local
ViewRoom
.
async deleteMessage(messageID) {
try {
await this.$store.dispatch("utils/requestConfirmation", {
props: { message: "¿Delete message?" },
component: "ConfirmationModal"
});
const message = this.messages.find(message => message.id === messageID);
if (message.photo) {
await this.$store.dispatch("messages/deleteFile", message.photo);
}
if (message.audio) {
await this.$store.dispatch("messages/deleteFile", message.audio);
}
await this.$store.dispatch("messages/deleteMessage", {
roomID: this.id,
messageID
});
this.$toast.success("Message deleted");
} catch (error) {
console.error(error.message);
this.$toast.error(error.message);
}
}
- Y añadir el botón necesario que sólo se muestra en nuestros propios mensajes.
<!-- Delete message -->
<a
href="#"
v-if="message.userId === $store.getters['user/getUserUid']"
@click="deleteMessage(message.id)"
class="message__delete is-pulled-right button is-small is-danger is-outlined"
>X</a
>
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.