Editar salas de chat
Presentación
Firebase Auth
Cloud Firestore
Cloud Storage
Cloud Functions
Curso Firebase para Web se encuentra en desarrollo. Vuelve pronto para encontrar nuevas lecciones.
- Vamos a añadir la funcionalidad de editar las salas de conversación en VueTalk.
- Comenzaremos añadiendo un
getter
y un par deactions
en nuestro módulorooms
en Vuex. - Las dos primeras funciones sirve para obtener la sala de conversación que queremos actualizar.
const getters = {
...
// Method style
getRoom: state => id => {
return state.rooms.find(room => room.id === id);
}
};
const actions = {
...
async getRoom(context, roomID) {
return await db
.collection("rooms")
.doc(roomID)
.get();
},
}
- Con el
getter
buscamos la sala en el estado local y, en el caso de no encontrarse, lo buscamos en Cloud Firestore con la acción del mismo nombre. - Ahora podemos
updateRoom
para gestionar el proceso de actualización de la sala que estemos editando.
async updateRoom(context, { roomId, name, description, image }) {
const roomData = {};
if (name) {
roomData.name = name;
}
if (description) {
roomData.description = description;
}
roomData.image = image;
await db
.collection("rooms")
.doc(roomId)
.update(roomData);
},
- Con lo referente al estado listo, es el momento de crear la vista
UpdateRoom.vue
que nos permitiría editar la sala de conversación. - En ella y a través de
created
buscamos la información de la sala de conversación haciendo uso degetRoom
. Además conectamos el método localupdateRoom
con la acción que tiene el mismo indentificador.
<script>
export default {
name: "EditRoom",
async created() {
try {
let room = this.$store.getters["rooms/getRoom"](this.id);
if (!room) {
room = await this.$store.dispatch("rooms/getRoom", this.id);
if (!room.exists) throw new Error("Could not find room");
room = room.data();
}
this.room = room;
} catch (error) {
console.error(error.message);
this.$toast.error(error.message);
this.$router.push({ name: "home" });
}
},
props: {
id: {
type: String,
required: true
}
},
data() {
return {
isLoading: false,
room: null,
};
},
methods: {
async updateRoom() {
this.isLoading = true;
try {
await this.$store.dispatch("rooms/updateRoom", {
roomID: this.id,
name: this.room.name,
description: this.room.description
});
this.$toast.success("Room data updated");
} catch (error) {
console.error(error.message);
this.$toast.error(error.message);
} finally {
this.isLoading = false;
}
}
},
computed: {
hasDataChanged() {
return this.room.name || this.room.description;
}
}
};
</script>
- Llega el momento de añadir nueva ruta al enrutador.
{
path: "/update/:id",
name: "update",
props: true,
component: UpdateRoom,
meta: {
requiresAuth: true
}
- Y hacer utilizable añadiendo un botón en el componente
RoomsComponent.vue
y que sólo es visible para el administrador de cada sala.
<div class="content">{{ room.description }}</div>
<nav class="buttons is-right">
<router-link
:to="{ name: 'update', params: { id: room.id } }"
v-if="room.adminUid === $store.getters['user/getUserUid']"
class="button is-small"
>Edit</router-link
>
</nav>
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.