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>
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

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 📬