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

DevotionGeo
I know that -t flag is used along with -i flag for getting an interactive shell. But I cannot digest what the man page for docker run com...
New
ohm
Does anybody have good learning resources with regards to going into Event Driven Design, Architecture or Sourcing? I got recommended Er...
New
mrmurphy
I’ve run into a situation where I’ve got a list of posts inside of a container that uses phx-update=“prepend”, and the posts on the socke...
New
gagan7995
API 4 Path: /user/following/ Method: GET Description: Returns the list of all names of people whom the user follows Response [ { ...
New
JimmyCarterSon
Hello, I am working on a new application with Elixir, Dish_out. I want to see Data I follow this tutorial with Elixir Casts. However, I ...
New
GermaVinsmoke
Does anyone know beginner friendly Elixir/Phoenix Open source projects? For learning purpose :slightly_smiling_face:
New
sona11
In Java, if I try to do.equals() on a null string, a null pointer error is issued. I’m wondering whether I can perform the following if I...
New
harwind
I received this error for a binary search programme in C, despite the fact that it requested for inputs and produced the right output. Th...
/c
New
Fl4m3Ph03n1x
Background I have a phoenix application in Windows 11. Unfortunately for me, I cannot compile the application because of a dependency err...
New
Fl4m3Ph03n1x
Background I have a release file inside a tarball. However I want the final release to have some additional files and to move things aro...
New

Other popular topics Top

PragmaticBookshelf
Stop developing web apps with yesterday’s tools. Today, developers are increasingly adopting Clojure as a web-development platform. See f...
New
PragmaticBookshelf
Brace yourself for a fun challenge: build a photorealistic 3D renderer from scratch! In just a couple of weeks, build a ray tracer that r...
New
PragmaticBookshelf
Ruby, Io, Prolog, Scala, Erlang, Clojure, Haskell. With Seven Languages in Seven Weeks, by Bruce A. Tate, you’ll go beyond the syntax—and...
New
AstonJ
There’s a whole world of custom keycaps out there that I didn’t know existed! Check out all of our Keycaps threads here: https://forum....
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
hilfordjames
There appears to have been an update that has changed the terminology for what has previously been known as the Taskbar Overflow - this h...
New
First poster: bot
zig/http.zig at 7cf2cbb33ef34c1d211135f56d30fe23b6cacd42 · ziglang/zig. General-purpose programming language and toolchain for maintaini...
New
AstonJ
This is a very quick guide, you just need to: Download LM Studio: https://lmstudio.ai/ Click on search Type DeepSeek, then select the o...
New
NewsBot
Node.js v22.14.0 has been released. Link: Release 2025-02-11, Version 22.14.0 'Jod' (LTS), @aduh95 · nodejs/node · GitHub
New
PragmaticBookshelf
Fight complexity and reclaim the original spirit of agility by learning to simplify how you develop software. The result: a more humane a...
New