Componente: CategoryOptions

De hecho, vamos a continuar refactorizando debido a que este componente todavía tiene muchos elementos en su sección de template. Ya habíamos desplazado anteriormente las opciones de orden a un nuevo componente “orderOptions” y quedó pendiente. Quedó como tarea que puedas desplazar esto a otro componente llamado “categoryOptions”, con las opciones de categorías. Si no lo hiciste, no hay problema, porque vamos a verlo ahora. Entonces vamos a cortar esto y lo vamos a llevar a un nuevo componente. Aquí tenemos una carpeta "left" para los componentes que se muestran al lado izquierdo. Vamos a crear un nuevo archivo y lo vamos a llamar “categoryOptions”. No olvidemos que debe tener extensión punto "vue", ya que se trata de un “single file component”. Dentro de unas etiquetas template pegamos lo que habíamos cortado. Como vemos, estas opciones de categoría invocan los métodos “clearCategory” y “goToCategory”. Además, acceden a la información de las categorías. Por lo tanto, vamos a necesitar una sección de script en la parte superior. De hecho, vamos a copiar toda esta sección de script que estaba antes en “CategoryList” y lo vamos a ubicar aquí en “CategoryOptions”. Lo que necesitamos básicamente es acceso al estado y estos dos métodos para responder ante los clics de los usuarios, sin embargo, tenemos que tener cuidado con los "import". Por ejemplo, “CategoryOptions” no va a importar “OrderOption”. “CategoryOptions” puede acceder al "store", pero tiene que ponerse uno o dos puntos más porque estamos saliendo de la carpeta "left" para ir a “components”. Luego salimos una vez más de “components” para entrar a “stores” y finalmente a “categories”. De esta manera tenemos nuestras opciones de la categoría ya separadas. Y aquí esto que antes se llamaba “CategoryList”, ya no va a necesitar los métodos ni la “computed property” de categories, porque simplemente va a mostrar “OrderOptions” y “CategoryOptions”. Por lo tanto, aquí agregamos category options y tenemos que importar: "import category options from” Accedemos a la carpeta "left" y de manera específica a “CategoryOptions.vue". Finalmente, aquí ya podemos usar el componente “CategoryOptions”. De esta manera, entonces el menú de la izquierda tiene “CategoryOptions” y tiene “OrderOptions”. Cada uno tiene sus propias responsabilidades. Por ejemplo, “CategoryOptions” se encarga de pintar la lista de categorías y también la opción de todas las categorías. Responde ante estos dos métodos y además itera sobre el estado de categories. Como se puede observar acá. De la misma manera, “OrderOptions” también tiene su propia responsabilidad. “OrderOptions” se encarga de ordenar en base al criterio que el usuario seleccione invocando al “action” que corresponda dentro de “ProductsStore”. Entonces, de esta manera “CategoryList” queda mucho más entendible. Sin embargo, este componente no sólo contiene opciones de categorías, también contiene opciones de orden. Por lo tanto, es mejor renombrarlo. Es mejor que no se llame “CategoryList”. Es mejor que se llame "leftMenu” porque es un menú que está ubicado al lado izquierdo y como nosotros ya tenemos una carpeta "left", lo vamos a ubicar allí para un mayor orden. Aquí hay que tener cuidado cada vez que desplazamos archivos, porque los "import" de este componente tienen que resolverse adecuadamente. En este caso la pregunta sería ¿Qué componente contiene a “leftMenu”? El componente que lo contiene en este caso es nuestra vista de “home”, que es “homeVue" “HomeVue" hace uso de “ProductList” que es el contenido que tenemos al lado derecho y hace uso de “CategoryList” que es lo que tenemos aquí al lado izquierdo. Pero ahora ya no se llama “CategoryList”, sino que se llama "leftMenu”. Aquí continúa funcionando y no hay errores porque se está importando “leftMenu” con el nombre de “CategoryList”. Sin embargo, es mejor reemplazarlo para evitar confusión en vez de “CategoryList” vamos a llamarlo “leftMenú” en Visual Studio Code con Ctrl+D estoy seleccionando las coincidencias para poder reemplazar todas a la vez. Como siempre, luego de organizar mejor nuestro código, es recomendable ejecutar el comando “npm run lint” para ver si tenemos alguna recomendación de parte del “linter” En este caso no hay ningún error, pero sí nos marca tres “warning”. El primero de ellos ocurre en “index.ts” de router. Nos vamos a nuestra carpeta de “router” y abrimos “index”. Aquí nos dice que este "import" no se está usando. Lo vamos a quitar. Ya no lo usamos porque el "import" se hace de manera dinámica. Cuando un usuario accede a una página, nosotros importamos de manera dinámica el componente que se requiere. Guardamos. Luego tenemos dos warning en "HomeVue". Vamos a abrir "HomeVue" y el primer warning está apareciendo en la línea 17. Aquí. Nos dice que “from” es un argumento que lo estamos definiendo, pero no lo estamos usando. En JavaScript, si nosotros no usamos uno de los argumentos, podemos omitirlo y simplemente vamos a obtener acceso al primer argumento. Bueno, entonces aquí guardamos y vamos a ejecutar nuevamente el Inter. Como ya no nos muestra nada, quiere decir que hemos corregido los tres problemas exitosamente. Ahora sí, vamos a actualizar en el navegador y ver si encontramos algún error en tiempo de ejecución. Aquí tenemos un primer error. Estamos obteniendo un error de 404 de Not Found. No se está encontrando el archivo "leftMenu” en “HomeVue”. Revisemos en "HomeVue" cómo estamos haciendo el "import". Aquí tenemos "leftMenu”. "leftMenu se está importando desde “components”, "left", "leftMenu". Pero aquí hay un punto js. Entonces vamos a quitarlo. Actualizamos, presionamos F12 y como vemos, ya no hay ningún error. Podemos filtrar por categoría. Podemos ordenar desde el más costoso al menos costoso. Podemos ordenar de manera alfabética desde la Z a la A y como vemos, el filtro por categorías funciona al igual que el criterio de orden que estamos aplicando. Como siempre, no olvidemos seleccionar todos nuestros cambios y hacer un “coomit” correspondiente a lo último que hemos modificado.

¡Suscríbete y continúa aprendiendo!

Componente: CategoryOptions