Hi guys!! I´m studying and got a Full stack course but the course lacked a lot of support and and info to learn as it´s a course after work and lasted 5 months. The final project is a ecommerce and the backend was built in class so I do understand the idea but I´m lacking to understand the issues when there´s something wrong aside from getting products on seed
long story short I´m struggling to finish one of the last requirements which is when I click on my submit button gives me a error that I dont understand which is:
Erro ao enviar o pedido. Detalhes:
Cannot POST /orders
it seems on backend everything is fine and my FE where I have my products list is:
Blockquote// ProductList.tsx
import React from “react”;
import SortBy from “./SortBy”;
import formatCurrency from “…/helpers/FormatCurrency”;
import “./ProductList.css”;
interface Product {
_id: string;
imageUrl: string;
hoverImageUrl: string;
alt: string;
name: string;
price: number;
}
interface ProductListProps {
searchQuery: string;
addToCart: (product: Product) => void;
selectedCurrency: string;
convertCurrency: (amount: number, from: string, to: string) => number;
}
const ProductList: React.FC = ({
searchQuery,
addToCart,
selectedCurrency,
convertCurrency,
}) => {
const [localProducts, setLocalProducts] = React.useState<Product>();
const [loading, setLoading] = React.useState(true);
const [error, setError] = React.useState<string | null>(null);
React.useEffect(() => {
const fetchProducts = async () => {
try {
const response = await fetch(“http://localhost:3000/products”);
if (!response.ok) {
throw new Error(“Network response was not ok”);
}
const data: Product = await response.json();
setLocalProducts(data);
setLoading(false);
} catch (error) {
setError(“Failed to fetch products.”);
setLoading(false);
console.error(“Failed to fetch products:”, error);
}
};
fetchProducts();
}, );
const sortAscending = () => {
const sortedProducts = […localProducts].sort((a, b) => a.price - b.price);
setLocalProducts(sortedProducts);
};
const sortDescending = () => {
const sortedProducts = […localProducts].sort((a, b) => b.price - a.price);
setLocalProducts(sortedProducts);
};
const sortNameAZ = () => {
const sortedProducts = […localProducts].sort((a, b) =>
a.name.localeCompare(b.name)
);
setLocalProducts(sortedProducts);
};
const sortNameZA = () => {
const sortedProducts = […localProducts].sort((a, b) =>
b.name.localeCompare(a.name)
);
setLocalProducts(sortedProducts);
};
const showFeatured = () => {
// Lógica para mostrar produtos em destaque
console.log(“Show Featured”);
};
const filteredProducts = localProducts.filter((product) =>
product.name.toLowerCase().includes(searchQuery.toLowerCase())
);
const productsToShow = searchQuery ? filteredProducts : localProducts;
const handleAddToCart = (product: Product) => {
// Converte o preço para a moeda selecionada
const convertedPrice = convertCurrency(
product.price,
“EUR”,
selectedCurrency
);
// Adiciona ao carrinho com o preço convertido
addToCart({ …product, price: convertedPrice });
};
return (
<SortBy
onSortAscending={sortAscending}
onSortDescending={sortDescending}
onSortNameAZ={sortNameAZ}
onSortNameZA={sortNameZA}
onShowFeatured={showFeatured} // Passa a função para o SortBy
/>
{loading ? (
Loading…
) : error ? (
{error}
) : productsToShow.length > 0 ? (
productsToShow.map((product) => {
// Converte o preço para a moeda selecionada para exibição
const convertedPrice = convertCurrency(
product.price,
“EUR”,
selectedCurrency
);
return (
<img
src={product.imageUrl}
alt={product.name}
onMouseOver={(e) =>
(e.currentTarget.src = product.hoverImageUrl)
}
onMouseOut={(e) => (e.currentTarget.src = product.imageUrl)}
/>
<button
className=“add-to-cart-button”
onClick={() => handleAddToCart(product)}
>
Add to Cart
{product.name}
{formatCurrency(convertedPrice, selectedCurrency)}
);
})
) : (
No products found
)}
);
};
export default ProductList;
> Blockquote
if someone can help me understand or where is the blocker I would be super appreciated , thank you!!