Patricia-Mendes13

Patricia-Mendes13

Connection backend to frontend for orders

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:

Error
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!!

Most Liked

jss

jss

What is the HTTP status code?

Where Next?

Popular Backend topics Top

Rainer
Is there somewhere a good introduction to rust for experienced programmers (with years of C++/C#/Java experience)? Wanted to give it a t...
New
joshi
Hey everybody! I’m working on the project that includes import of Oracle data to PostgreSQL. That data comes as Oracle export (expdp) fi...
New
GermaVinsmoke
Reading Programming Elixir 1.6 book, I’ve completed part 1 of the book. Now I’m thinking of reading Elixir in Action. What do you all sug...
New
gagan7995
API 4 Path: /user/following/ Method: GET Description: Returns the list of all names of people whom the user follows Response [ { ...
New
bsek43
Hello everyone, I’ve started learning Elixir and Phoenix few months ago and while I mostly grasped Elixir’s functional concepts and Phoe...
New
Fl4m3Ph03n1x
Background I am trying out polymorphic typing with dialyzer. As an example I am using the famous Option type (aka, Maybe Monad) that is n...
New
osbre
Hello everyone I’m trying to implement a “magic link” or “one-time login link” functionality I wonder what a secure way to implement it...
New
harwind
In C, how they are different? char str[] = "xyz"; // statement //and char str[4] = "xyz"; // statement The first, i...
/c
New
jaeyson
Hi! I have clarifications (please correct me, as I mostly mix/confuse this details) with the following: The term RAG here where it read...
New
Shiny
Hey community, this is my first post here so I will try to be as concise as possible and I appreciate any feedback. I’ve been writing Ro...
New

Other popular topics Top

DevotionGeo
I know that these benchmarks might not be the exact picture of real-world scenario, but still I expect a Rust web framework performing a ...
New
New
AstonJ
Just done a fresh install of macOS Big Sur and on installing Erlang I am getting: asdf install erlang 23.1.2 Configure failed. checking ...
New
AstonJ
Do the test and post your score :nerd_face: :keyboard: If possible, please add info such as the keyboard you’re using, the layout (Qw...
New
PragmaticBookshelf
Use WebRTC to build web applications that stream media and data in real time directly from one user to another, all in the browser. ...
New
AstonJ
We’ve talked about his book briefly here but it is quickly becoming obsolete - so he’s decided to create a series of 7 podcasts, the firs...
New
PragmaticBookshelf
Author Spotlight Mike Riley @mriley This month, we turn the spotlight on Mike Riley, author of Portable Python Projects. Mike’s book ...
New
sir.laksmana_wenk
I’m able to do the “artistic” part of game-development; character designing/modeling, music, environment modeling, etc. However, I don’t...
New
AstonJ
This is cool! DEEPSEEK-V3 ON M4 MAC: BLAZING FAST INFERENCE ON APPLE SILICON We just witnessed something incredible: the largest open-s...
New
PragmaticBookshelf
A concise guide to MySQL 9 database administration, covering fundamental concepts, techniques, and best practices. Neil Smyth MySQL...
New