Ecommerce website

Backend Development
1

I´m building a website but when clicking the submit I cant seem to understand the error the error is

Erro ao enviar o pedido. Detalhes:

Error 
Cannot POST /orders

however the route seems correct , I can send the rest of my code this is pretty much the last thing on the school project that I missing as requirements rather than fixing other issues

2

my app where I have the order being fetched:

import React, { useState, useEffect, useRef } from “react”;
import axios from “axios”;
import { BrowserRouter as Router, Routes, Route } from “react-router-dom”;
import Header from “./components/Header”;
import ProductList from “./components/ProductList”;
import Footer from “./components/Footer”;
import CartPage from “./pages/CartPage”;
import Cart from “./components/Cart”;
import LoginPage from “./pages/LoginPage”;
import AboutUs from “./pages/AboutUs”;
import Contact from “./pages/Contact”;

interface Product {
_id: string;
imageUrl: string;
alt: string;
name: string;
price: number;
}

interface CartItem extends Product {
quantity: number;
}

const App: React.FC = () => {
const [searchQuery, setSearchQuery] = useState(“”);
const [cartItems, setCartItems] = useState<CartItem>();
const [isCartVisible, setIsCartVisible] = useState(true);
const [selectedCurrency, setSelectedCurrency] = useState(“EUR”);
const [exchangeRates, setExchangeRates] = useState<Record<string, number>>(
{}
);

useEffect(() => {
const fetchExchangeRates = async () => {
try {
const response = await axios.get(
“https://api.exchangerate-api.com/v4/latest/EUR”
);
setExchangeRates(response.data.rates);
} catch (error) {
console.error(“Erro ao buscar taxas de câmbio:”, error);
}
};

fetchExchangeRates();

}, );

const handleSearchChange = (query: string) => {
setSearchQuery(query);
};

const addToCart = (product: Product) => {
setCartItems((prevItems) => {
const itemInCart = prevItems.find((item) => item._id === product._id);
if (itemInCart) {
return prevItems.map((item) =>
item._id === product._id
? { …item, quantity: item.quantity + 1 }
: item
);
}
return […prevItems, { …product, quantity: 1 }];
});
setIsCartVisible(true);
};

const removeFromCart = (productId: string) => {
setCartItems((prevItems) =>
prevItems.filter((item) => item._id !== productId)
);
};

const updateQuantity = (productId: string, quantity: number) => {
setCartItems((prevItems) =>
prevItems.map((item) =>
item._id === productId ? { …item, quantity } : item
)
);
};

const submitOrder = async () => {
try {
// Calcula o total da encomenda
//const totalAmount = cartItems.reduce(
//(total, item) => total + item.price * item.quantity,
//0
// );

  // Logs para verificar os dados enviados
  console.log("Enviando pedido:", {
    items: cartItems,
    //total: totalAmount,
  });

  // Envia a requisição para o backend
  const response = await fetch("http://localhost:3000/orders", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      items: cartItems,
      //total: totalAmount,
    }),
  });

  // Lê a resposta do servidor
  const responseBody = await response.text();
  console.log("Resposta do servidor:", responseBody);

  // Verifica se a resposta foi bem-sucedida
  if (response.ok) {
    alert("Pedido enviado com sucesso!");
    setCartItems([]); // Limpa o carrinho
  } else {
    alert("Erro ao enviar o pedido. Detalhes: " + responseBody);
  }
} catch (error) {
  console.error("Erro ao enviar o pedido:", error);
}

};

const handleCurrencyChange = (currency: string) => {
setSelectedCurrency(currency);
};

const convertCurrency = (
amount: number,
from: string,
to: string
): number => {
if (from === to) return amount;
const rate = exchangeRates[to] / exchangeRates[from];
return amount * rate;
};

// Toggle cart visibility
const toggleCart = () => {
setIsCartVisible((prev) => !prev);
};

// Video element reference
const videoRef = useRef(null);

// Play the video automatically when the component mounts
useEffect(() => {
if (videoRef.current) {
videoRef.current.play().catch((error) => {
console.error(“Erro ao tentar reproduzir o vídeo:”, error);
});
}
}, );

return (





<Route
path=“/All Products”
element={

}
/>
<Route
path=“/cart”
element={

}
/>
<Route path=“/login” element={} />
<Route path=“/about-us” element={} />
<Route path=“/contact” element={} />
<Route
path=“/”
element={

<video
ref={videoRef}
controls
autoPlay
loop
muted
className=“homepage-video”
style={{ width: “100%”, height: “auto” }}
>

Seu navegador não suporta a tag de vídeo.


}
/>




);
};

export default App;