Actualizado del producto en la API

En el componente Nav cambié el router.pathname por router.asPath para que cuando estemos editando un producto no aparezca “[id]”, sino que aparezca el número del producto que estamos editando.

 const router = useRouter();
  const route = router.asPath.substring(1);

Para no perder el estilo que tenía “edit” pueden hacerlo de la siguiente manera:

<Link href={`/dashboard/edit/${product.id}`}>
<a className="text-indigo-600 hover:text-indigo-900">Edit</a>
</Link>

Clase #26: Actualizado del producto en la API 26/31 📆

Continuando con el Proyecto: 🔧

 
En VSC, vamos al archivo products.js de la ruta src/services/api y agregamos la función que permitirá modificar los elementos del producto según el id:

//Modificar los atributos de un producto
const updateProduct = async (id, body) => {
	const config = {
	headers: {
	accept: '*/*', //Permite cualquier petición
	'Content-Type': 'application/json',
	},
};
const response = await axios.put(endPoints.products.updateProducts(id), body, config); //PUT

return response.data; //data contiene la respuesta del servidor
};

Al final se agrega en el export:

export { addProduct, deleteProduct, updateProduct };

 
Una vez creada la función para actualizar en la API la información del producto, conectamos con la opción de “Edit”, para ello en el archivo FormProduct.js de la ruta src/components se debe agregar el import de useRouter para manipular la ruta dinámica del id y el import de updateProduct:

import { useRouter } from 'next/router'
import { addProduct, updateProduct } from '@services/api/products';

 
Para hacer render se necesita la constante router (para conocer mas de router: enlace), la declaramos al principio dentro de la función FormProduct:

const router = useRouter();

 
Se crea una validación para saber cuando hay que editar y cuando se agrega un producto, y con router se hace push:

if(product) {
	updateProduct(product.id, data)
	.then(() =>{
		router.push('/dashboard/products/')
	});
} else {

 
En el archivo products.js de la ruta src/pages/dashboard se agrega el import de Link (para conocer mas de Link: enlace):

import Link from 'next/link';

 
Dentro del return de Products, en la etiqueta <a> </a> donde aparece la opción de “Edit” lo sustituimos por <Link></Link> y se agrega el enlace para editar el producto: /dashboard/edit/id

<Link
	href={`/dashboard/edit/${product.id}`}
	className="text-indigo-600
	hover:text-indigo-900"
>
Edit
</Link>

 
Guardamos y corremos npm run dev entramos a local, luego al dashboard/products y al dar la opción “Edit” de cualquier producto, aparece el cuadro con todos los elementos del producto con los campos llenados, se modifica los elementos que queremos y le damos al botón Save, y cuando aparecen todos los productos, el producto que editamos debe haber cambiado lo que modificamos reciente.
 

Validación del producto

try {
        const response = await axios.get(endPoints.products.getProduct(id));
        if (response) {
          setProduct(response.data);
        }
      } catch (error) {
        console.log(error);
      }

Por seguridad, cuando tratamos de poner un “defaultValue” en un input con “type=‘file’”, no nos tomará en cuenta la referencia. Entonces, temporalmente se puede arreglar agregando un condicional a los datos que vamos a enviar de modo que se regresen las imágenes que venían en el input.

Chico me sale este error al momento de darle save en la edición del producto : AxiosError: Request failed with status code 500.
Ojo tengo el mismo codigo que el profe Oscar. ¿Quien podra salvarme?

Si tienen problema con el update, puede hacer la siguiente validacion para las imagenes!

Ya hice mi contribución de agregar 10 productos de mercado libre.
Sí eliminan, agreguen más porfa.

Creo que la API cambió y ya no permite que el array de las imágenes del producto sea un array con un string vacío. Entonces si no actualizas la imagen, toma string vacío del formulario y marca error 400 en la respuesta.

Para evitar esto, sí no se modifica la imagen, la tomo directamente de la variable product que llena el formulario, o ustedes pueden optar por cambiar el valor de la imagen del formulario, que sería lo más correcto.

Hola alguien sabe como solucionar este error…

Comparto el link de la documentación
https://nextjs.org/docs/api-reference/next/link