No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
2H
52M
20S
Curso Profesional de Next.js

Curso Profesional de Next.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Actualizado del producto en la API

26/31
Recursos

Aportes 11

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥渆dit鈥 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 鈥淓dit鈥, 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 鈥淓dit鈥 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 鈥淓dit鈥 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 鈥渄efaultValue鈥 en un input con 鈥渢ype=鈥榝ile鈥欌, 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