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 de actions en nuestro módulo rooms 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 de getRoom. Además conectamos el método local updateRoom 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
Aprende Firebase en Escuela Vue

¿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.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬