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

Jsdr3398
I’m trying to create a router where everything is in a collection of routes (similar to how I do my routes in expressjs). But it doesn’t ...
New
TwistingTwists
Hello Folks, I am a novice developer from India. Intending to learn Elixir and web apps (phoenix framework). What are things that I MUS...
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 have recently been delving into more functional code. My objective right now is to get something similar to the IO Monad (in...
New
GermaVinsmoke
Does anyone know beginner friendly Elixir/Phoenix Open source projects? For learning purpose :slightly_smiling_face:
New
Fl4m3Ph03n1x
Background PS: the following situation describes an hypothetical scenario, where I own a company that sells things to customers. I have ...
New
Fl4m3Ph03n1x
Background I am a fan of dialyzer and friends (looking at Gradient) and I try to have sepcs in my code as much as I can. To this end, I a...
New
sona11
I wrote this code to calculate Fibonacci numbers by specifying the size. The results are correct, however the one thing that concerns me ...
New
harwind
In C, how they are different? char str[] = "xyz"; // statement //and char str[4] = "xyz"; // statement The first, i...
/c
New
AstonJ
If you’re getting errors like this: psql: error: connection to server on socket “/tmp/.s.PGSQL.5432” failed: No such file or directory ...
New

Other popular topics Top

PragmaticBookshelf
Design and develop sophisticated 2D games that are as much fun to make as they are to play. From particle effects and pathfinding to soci...
New
AstonJ
I’ve been hearing quite a lot of comments relating to the sound of a keyboard, with one of the most desirable of these called ‘thock’, he...
New
Exadra37
Oh just spent so much time on this to discover now that RancherOS is in end of life but Rancher is refusing to mark the Github repo as su...
New
Margaret
Hello everyone! This thread is to tell you about what authors from The Pragmatic Bookshelf are writing on Medium.
1147 29841 760
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
PragmaticBookshelf
Author Spotlight Mike Riley @mriley This month, we turn the spotlight on Mike Riley, author of Portable Python Projects. Mike’s book ...
New
New
husaindevelop
Inside our android webview app, we are trying to paste the copied content from another app eg (notes) using navigator.clipboard.readtext ...
New
AstonJ
If you’re getting errors like this: psql: error: connection to server on socket “/tmp/.s.PGSQL.5432” failed: No such file or directory ...
New
AnfaengerAlex
Hello, I’m a beginner in Android development and I’m facing an issue with my project setup. In my build.gradle.kts file, I have the foll...
New