Inserción de los datos del producto en la API

A todos los que estan haciendo la escuel de javaScript… felicidades por llegar tan lejos!! Es evidente la escasez de comentarios asi que aca les dejo lo que entendi de esta clase

Mira que subi unas Imagnes y rompi algo, luego las borre con postman usando el delete pero creo que es facil romper la API, creo

Clase #21: Inserción de los datos del producto en la API 21/31 📥

Continuando con el Proyecto: 🔨

 
Vamos agregar nuevos productos a la API, la lógica constituirá funciones para el llamado de GET Products. Se crea el archivo products.js en la ruta src/services/api
 
La lógica en products.js queda:

import axios from 'axios'; //Se usa axios para hacer las peticiones
import endPoints from '@services/api';

//body será el cuerpo de la información
const addProduct = async (body) => {
    const config = {
        headers: {
            accept: '*/*', //Permite cualquier petición
            'Content-Type': 'application/json',
        },
    };
    const response = await axios.post(endPoints.products.addProducts, body, config);
    return response.data; //data contiene la respuesta delll servidor
};

export { addProduct };

 
En el archivo FormProduct.js en la ruta src/components se agrega el import de addProduct:

import { addProduct } from '@services/api/products';

 
También dentro de handleSubmit después de la constante data:

addProduct(data).then((response) => {
      console.log(response);
    });

 
Guardamos y ejecutamos npm run dev
 
En local: http://localhost:3000/dashboard/products al dar el botón de Add Product se ingresan los datos y al dar botón Save podemos ver en la API (enlace: aquí) que se agregó el id el producto recientemente agregado y los datos que ingresamos.
 
También podemos ver en el Inspector Web en consola se imprimió los datos del nuevo producto.
 

El código de esta clase:

import endPoint from '@services/endPoint';
import axios from 'axios';

const addProduct = async (body) => {
  const config = {
    headers: {
      accept: '*/*',
      'Content-Type': 'aplication/json',
    },
  };
  const response = await axios.post(endPoint.products.addProduct, body, config);

  return response.data;
};

export default addProduct;

services/api/products

también podemos añadir un catch en la respuesta de addProduct y escribirlo de esta forma

addProduct(data)  
  .then(console.log)
  .catch(console.error)

const handleSubmit = (e)=> {
    e.preventDefault();
    const formData = new FormData(formRef.current);
  
    const data = {
      "title": formData.get("title"),
      "price": parseInt(formData.get("price")),
      "description": formData.get("description"),
      "categoryId": parseInt(formData.get("category")),
      "images": [
        formData.get("images").name,
      ]
    }

    addProduct(data)  
      .then(console.log)
      .catch(console.err)
}

Cuando guarde el archivo products.js en ‘service/api/’ coloque al final del codigo :

export default addProduct;

en lugar de:

export { addProduct };

Ojo a eso, para no tener un error al momento de importarlo tal cual en la clase

mi error 400, fue que la imagen que subia para el ejemplo tenia un nombre con espacio, así que cambie el nombre del ejemplo a algo como pepe.png y funciono

Si alguno tiene error 400 (Bad Request) revisen que la propiedad del producto sea (categoryId) no solo (category), porque la api espera un categoryId no un category

Hola que tal, en caso de que alguien tenga problemas con las imagenes, en mi caso recibia el Error 401 del server pero cambie la imagen a una que no tiene espacios en el nombre y por fin funcionó. Considerenlo…

Si alguno tiene un error 400(Bad Rquest),revise el objeto de error que aparece en la consola del navegador.

Uncaught in Promise:

e.response.data.message

Debería darles mas pistas de que esta mal.

Este proyecto es de cursos anteriores, muestra los productos de la API en tiempo real:
🔴 https://ecommerce-logo.netlify.app/
Cada producto que agreguen en el formulario aparecera aqui.