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?

Popular Backend topics Top

jaimeiniesta
I maintain a project that lists hundreds of thousands of web pages, and I’d like to show a screenshot for each web page. There are alread...
New
andrea
Can Phoenix LiveView be used in multi-page applications, unlike React/Vue/Blazor which seems to be targeted for SPA?
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
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
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
Fl4m3Ph03n1x
Background I have a module that uses TypedStruct to create structs. This is the code: defmodule Shared.Data.Authorization do @moduledo...
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
ogoldberg
Any recommendations on good resources for learning Elixir, Phoenix, and Ash?
New
pillaiindu
What is the difference between using :references and :belongs_to in the following command? bin/rails generate scaffold LineItem product:...
New
yamuna
Hi everyone, I’m trying to run deepseek-coder:6.7b-instruct-q4_K_M in Docker using Ollama to create an LLM that will be used by CrewAI a...
New

Other popular topics Top

AstonJ
A thread that every forum needs! Simply post a link to a track on YouTube (or SoundCloud or Vimeo amongst others!) on a separate line an...
New
AstonJ
If it’s a mechanical keyboard, which switches do you have? Would you recommend it? Why? What will your next keyboard be? Pics always w...
New
dasdom
No chair. I have a standing desk. This post was split into a dedicated thread from our thread about chairs :slight_smile:
New
AstonJ
poll poll Be sure to check out @Dusty’s article posted here: An Introduction to Alternative Keyboard Layouts It’s one of the best write-...
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
PragmaticBookshelf
“A Mystical Experience” Hero’s Journey with Paolo Perrotta @nusco Ever wonder how authoring books compares to writing articles?...
New
mafinar
This is going to be a long an frequently posted thread. While talking to a friend of mine who has taken data structure and algorithm cou...
New
PragmaticBookshelf
Author Spotlight Jamis Buck @jamis This month, we have the pleasure of spotlighting author Jamis Buck, who has written Mazes for Prog...
New
PragmaticBookshelf
Author Spotlight: VM Brasseur @vmbrasseur We have a treat for you today! We turn the spotlight onto Open Source as we sit down with V...
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

Latest in Questions

View all threads ❯