Order by price & name

Vamos a modificar entonces nuestro estado "this" específicamente “order”. “this.order = price” en este caso. “this.order = name” en este caso y este Y hasta aquí vamos a guardar nuestros cambios. Si ya tenemos un "stateOrder", ya tenemos dos acciones nuevas para modificar el orden. Lo siguiente es llamar a estas acciones cuando el usuario haga click en estos items. Entonces nos dirigimos a "categoryList" y en la parte inferior donde tenemos el orden, vamos a agregar un evento de click a nuestras opciones. Vamos a quitar de hecho también este color, ya que aparentemente es el mismo que viene por defecto. Y entonces vamos a agregar por aquí nuestro evento de click. La idea es que ejecutemos algo cuando se haga click a cada uno de estos "listItems". Nosotros queremos mapear los métodos de este componente con las acciones que están en el "store" de productos. Por lo tanto, aquí en "methods" vamos a agregar "mapActions". Vamos a indicar "useProductsStore" y luego en un arreglo vamos a poner las acciones que queremos mapear. En este caso por el “orderByName”, “orderByPrice”, muy bien. Con esto ya vamos a tener disponible estas dos acciones en forma de métodos. Dentro de este arreglo de métodos y para evitar confusión, vamos a renombrar este "selectCategory". Vamos a llamarlo "goToCategory", porque en realidad estamos generando una navegación. Estamos haciendo push sobre nuestro “router”. Bien, entonces aquí cuando se haga click en "por precio", vamos simplemente a llamar a nuestro método “orderByPrice” y cuando se haga click aquí en "por nombre", vamos a llamar a nuestro método. “orderByName”. Estos métodos van a invocar las acciones correspondientes y entonces nuestro estado se va a actualizar con el valor que corresponda. Finalmente, tenemos que usar esta variable order. Cuando devolvemos nuestro listado de productos, cuando devolvemos nuestro listado de productos, tenemos aquí un “state.products” y tenemos aquí un “filter”. Actualmente, este "getter" simplemente se encarga de filtrar en base a la categoría. Si no hay una categoría, se está devolviendo el arreglo de productos tal cual. Entonces lo que nosotros vamos a hacer es crear una variable nueva llamada “products”. “Products” empezará con un valor nulo, pero recibirá su valor dependiendo de lo que corresponda. Por ejemplo, si hay una categoría “products”, será igual a nuestro arreglo filtrado. Empezaremos filtrando por categorías, si es que hay una categoría. Si es que no hay “product”, será igual a “state.products”. Este guion bajo producto es nuestro arreglo original de productos, si hay una categoría, filtramos. Si no hay una categoría, entonces “products” recibirá el arreglo de productos tal cual y luego de aplicar el filtro, si es que hay, vamos a aplicar el orden. Si esto primero filtra y luego estoy aquí ordenado para ordenar. Vamos a hacer también una pregunta si “order” es igual a una cadena vacía, no haremos nada. Simplemente vamos a devolver “products”. En cambio, si “order” es igual a “price”, vamos a ordenar el arreglo de productos usando el método “sort”. El “método sort” acepta una función con el criterio de orden que queremos aplicar siguiendo la misma idea. Si el "stateOrder" tiene como valor “name”, vamos a ordenar en base a “name”. En JavaScript, cuando nosotros queremos ordenar, tenemos que hacer una comparación "sort" espera que le pasemos una función en este caso la estamos pasando con el formato de "arrow function" y entonces aquí vamos a poner "a.name.localeCompare". O sea, vamos a hacer una comparación de textos y vamos a poner aquí “b.name”. De esta manera es como todos los elementos se sortean y se ordenan en base al nombre. Básicamente siempre “sort” siempre va a esperar una función. Nosotros tenemos que indicarle de qué manera debe comparar dos elementos para que en base a ellos establezca un orden. En el caso del precio, por ejemplo, podemos poner “a.price - b.price”. Vamos a ver si esto nos lo ordena de manera ascendente o descendente, y luego, si queremos cambiar el orden, simplemente pondríamos el precio de B, menos el precio de A. O bien, aquí compararemos primero B con A. Hasta aquí vamos a guardar. Y llegamos entonces una primera prueba le daré click en "por precio". Como vemos, primero se sitúan los productos con precio 20, luego 56, pero 450. Aquí se ha aplicado un orden "por precio". Le daré click a "por nombre" y en este caso empezamos con el producto que tiene la letra A. Luego M, luego P y luego S. Es decir, se está aplicando en orden alfabético. Si nuevamente le damos click "por precio", nuevamente vemos este orden aplicado.

Crea una cuenta y continúa aprendiendo 🚀

Order by price & name