Editar salas de chat

• 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>