Refactor: CartDetail & Product

En la lección anterior hemos corregido todos los warnings reportados por nuestra herramienta de linting. Es importante siempre hacer esto antes de empezar a refactorizar. La idea es que nuestro linter no nos reporte ningún error. Luego que nosotros terminamos de hacer una refactorización, la idea es correr nuevamente el linter y de la misma manera no tenemos que tener ningún error. ¿Qué es lo que vamos a refactorizar? Hemos dicho que queremos mejorar la manera en que presentamos la información del carrito de compras. Por lo tanto, nos vamos a nuestro store y este store define un detalle y este detalle es un arreglo de cart detail. Aquí por cierto, si queremos también podemos cambiar la sintaxis, podemos definir el tipo de esta manera. Details es un arreglo, específicamente de este tipo. Bien, lo que vamos a hacer es actualizar nuestro cart detail, la definición de nuestro cart detail. Un cart detail anteriormente era un productId y un quantity. Ahora un cart detail será un product que es el product que se está agregando y un number, es decir un tipo puede estar compuesto por otro tipo. Si hacemos este cambio esto va a tener una repercusión en todos los lugares donde usamos el tipo cart detail. Por ejemplo en nuestro store comenzamos a ver algunos errores. Anteriormente cada detail de tenía un productId. Ahora si queremos acceder al ID tenemos que poner .id porque cada detalle ya no contiene directamente un productId. Cada detalle contiene un product y ese product tiene un ID. Entonces de esta manera podemos corregir este primer error. Siguiendo la misma idea cada vez que se vaya a agregar un nuevo producto no vamos a recibir sólo un product ID. Vamos a recibir un objeto product completamente, ¿sí?. Para poder usar el tipo product aquí, tenemos que importarlo, aquí arriba tenemos un import type, vamos a agregar simplemente aquí Product, ¿sí?. Y cuando vayamos a hacer push, vamos a guardar el product completamente no solo su ID, de tal manera que cuando nos envíe un producto y queramos buscarlo, vamos a iterar sobre todo los detalles y vamos a ir comparando el ID del producto de cada detalle con el ID del producto que nos envían como argumento, ¿si? De esta manera es como vamos a buscar productos. Esta línea la vamos a copiar al método increment y decrement ya que ambos se encargan de hacer búsquedas, ¿si?. En el caso de increment y decrement no necesitamos enviar el producto completamente, basta con enviar solo su ID porque no vamos a registrar un producto nuevo simplemente vamos a aumentar su cantidad o sea que para increment y decrement el ID es suficiente. Para cuando vayamos a eliminar un producto y queramos hacer una búsqueda cada detalle va a contener en vez de un productId un product.id, ¿sí?, estamos actualizando nuestra lógica para deleteProduct. Dicho de otra forma, cuando vayamos a agregar un producto necesitamos el objeto product completamente pero cuando vayamos a eliminar es suficiente el ID, cuando vayamos a incrementar o disminuir la cantidad el productId será suficiente también. Entonces hasta aquí guardamos, sin embargo este no es el único archivo que tenemos que cambiar, estos de aquí siguen recibiendo un productId solamente pero la acción addProduct ha sido modificada para recibir un producto, entonces veamos ¿dónde se está usando addProduct?. AddProduct lo estamos llamando desde nuestro ProductCard, ¿sí? y aquí hay un error. Anteriormente estábamos pasando aquí solo un ID, ahora cuando se haga clic en agregar al carrito tenemos que pasar todo el objeto product, no solo el ID. ¿Sí?, entonces, guardamos y vamos a probar nuestro proyecto en el navegador, le damos clic en agregar al carrito, agregamos dos monitores y una silla y al venir aquí tenemos el producto. Sin embargo, a pesar que nuestro carrito ya tiene información del producto completamente no solo el ID, todavía no estamos usando esa información, nos falta mostrar esos datos en nuestro template. Por lo tanto, nos dirigimos a nuestro ShoppingCart y en nuestro ShoppingCart vamos a aprovechar los detalles que estamos obteniendo a partir del store. Anteriormente teníamos Product seguido del ID del producto. Ahora en cambio vamos a tener detail.product.name, ¿sí?. Si queremos disminuir o aumentar la cantidad, o incluso si queremos eliminar el producto, tenemos que pasar un productId. Pero el productId no viene directamente desde detail, sino que el productId será el ID del product. Debido a que ahora guardamos el objeto product en detail. De la misma, manera la clave para identificar a cada iteración de nuestro v-for será product.id. Guardamos, vamos al navegador y hacemos otra prueba. Agregamos una silla y dos monitores y aquí está silla 1, monitor 2. Podemos aumentar la cantidad o podemos decidir no comprar más monitores. Para eliminar también podemos usar directamente este botón del tachito de basura y desaparece.

Crea una cuenta y continúa aprendiendo 🚀

Refactor: CartDetail & Product