Crear salas de chat

• Pongamos en práctica todo lo aprendido sobre Firestore en el Curso de Firebase creando una vista que permita añadir salas de conversación a nuestro proyecto VueTalk
• Primero, debemos crear el componente que haga de vista: CreateRoom.vue y en él un formulario para asignar el nombre y la descripción de la sala.
• Luego, debemos añadir la ruta en nuestro archivo de enrutamiento router/index.js.

const CreateRoom = () => import("../views/CreateRoom.vue");
...
{
    path: "/create",
    name: "create",
    component: CreateRoom,
    meta: {
         requiresAuth: true
    }
}

• Sin olvidar actualizar el enlace desde nuestro componente cabecera a la nueva sección.

<router-link class="navbar-item" :to="{ name: 'create' }">
  Create Room
</router-link>

• El siguiente paso es crear la acción en nuestro módulo rooms de Vuex que nos permita conectar con Cloud Firestore.

import { db } from "../firebase.js";
...
async createRoom({ rootState }, { name, description }) {
  await db.collection("rooms").add({
    name,
    description,
    createdAt: Date.now(),
    admin: rootState.user.user.uid
  });
}

• Por último nos queda completar el método local createRoom en el compoente CreateRoom.vue para que conecte con la acción Vuex recién creada.

async createRoom() {
    this.isLoading = true;
    try {
        await this.$store.dispatch("rooms/createRoom", {
            name: this.roomData.name,
            description: this.roomData.description
        });
    this.$toast.success("Room created");
    this.roomData.name = this.roomData.description = "";
    setTimeout(() => this.$router.push({ name: "home" }), 1000);
    } catch (error) {
        console.error(error.message);
        this.$toast.error(error.message);
    } finally {
        this.isLoading = false;
    }
}