Error of GET http://localhost:3000/users/myproducts/undefined 404 (Not Found) - http-status-code-404

Question

I have a issue about bad request that I have not find any method for solving.
Here is my code for creating a page which contains app bar on the top and it will gather the data from MongoDB users. There is a array defined to users called purchased which contains the ids of products of user bought. main purpose of the code will be take those ids and list them as product cards in the page.
myProducts.js
import * as React from "react";
import { useParams } from "react-router-dom";
import ListPurchase from "../Components/Purchased/listmyPurchase";
import AppBar from "../Components/Navbar/appbar";
export default function ActiveBids() {
const { email } = useParams();
return (
<>
<AppBar></AppBar>
<ListPurchase>email={email}</ListPurchase>
</>
);
}
I think listmyPurchase is listing the products, fetches a user's purchase history from a server using the user's email address. It uses the Axios library to make an HTTP GET request to the server and then parses the response to extract the purchase history data, which it uses to render a list of purchased items. The notEmpty function is used to check if the response data is empty
listmyPurchase.js
import * as React from 'react';
import { Box, Container, CircularProgress, Typography } from '#mui/material';
import serverURI from '../../Constants/connection';
import axios from 'axios';
import PurchasedItems from '../Purchased/myPurchase';
export default function ListPurchase(props) {
const email = props.email;
// console.log(email);
let uri = serverURI + '/users/myproducts/';
const [message, setMessage] = React.useState([{}]);
const [loading, setLoading] = React.useState(true);
React.useEffect(() => {
var config = {
method: 'get',
url: uri + email,
headers: {
'Content-Type': 'application/json',
},
};
console.log(uri);
axios(config)
.then((response) => {
console.log(response.data.message);
setMessage(response.data.message);
setLoading(false);
})
.catch((error) => {
console.log(error);
});
}, [email, uri]);
function notEmpty(obj) {
return Object.keys(obj).length === 0;
}
return (
<Container sx={{ mt: 5, mb: 5 }}>
{/* <Divider></Divider> */}
{loading ? (
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 30 }}>
<CircularProgress />
</Box>
) : (
<Box>
{notEmpty(message[0]) ? (
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 30 }}>
<Typography fontWeight={600}>No active bid history.</Typography>
</Box>
) : (
<Box
sx={{
display: 'flex',
flexDirection: 'column',
columnGap: 3,
rowGap: 2,
gridTemplateColumns: 'repeat(4, 1fr)',
}}
>
{message.map((product, idx) => (
<PurchasedItems
key={idx}
pid={product._id}
price={product.price}
start_date={product.start_date}
duration={product.duration}
type={product.type}
name={product.name}
owner={product.owner}
image={product.image}
states={product.state}
></PurchasedItems>
))}
</Box>
)}
</Box>
)}
</Container>
);
}
In here I know there is unnecessary part of change the color of text interms of price and who bidded but the only thing I try to manage is the list different products that purchased in terms of bidded by users It is React component that represents a single purchased item. It receives data about the purchased item as props, including the item's name, type, owner, image, and bid price. The component renders this information in a user-friendly format and includes an event handler for clicking on the image or the item's name, which navigates to the product page for the item. The states prop is used to determine the color of the bid price (green if the bid is active, red if it is not). The useNavigate hook from the react-router-dom library is used to handle navigation to the product page.
myPurchase.js
import * as React from 'react';
import { Box, Typography } from '#mui/material';
import { Container } from '#mui/material';
import { useNavigate } from 'react-router-dom';
export default function PurchasedItems(props) {
const pid = props.pid;
// console.log(pid);
const type = props.type || 'test';
const name = props.name || 'test';
const owner = props.owner || 'test';
const image =
props.image ||
'https://assets.adidas.com/images/w_600,f_auto,q_auto/49808757050946de8bedae29011926b5_9366/Manchester_United_22-23_Home_Jersey_Red_H13881_21_model.jpg';
const price = props.price;
const duration = Number(props.duration) / 1000;
const start_date = Number(props.start_date) / 1000;
const currentDate = Math.floor(Date.now() / 1000);
const remainingTime = duration - (currentDate - start_date);
const states = props.states;
const [currentRemaningTime, setRemainingTime] = React.useState(remainingTime);
const navigate = useNavigate();
const handleProductPage = () => {
navigate(`/product/${pid}`);
};
return (
<Container>
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
{' '}
<Box
sx={{
width: '60%',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
p: 3,
}}
>
<Box sx={{ display: 'flex', direction: 'row', alignItems: 'center' }}>
<Box>
<img
onClick={handleProductPage}
component="img"
src={image}
alt="Paella dish"
style={{ width: 200, height: 200, m: 3 }}
/>
</Box>
<Box onClick={handleProductPage} sx={{ ml: 5 }}>
<Typography color="text.primary" sx={{ fontWeight: 700 }}>
{name}
</Typography>
<Typography color="text.primary" sx={{ fontWeight: 500 }}>
{type}
</Typography>
<Typography color="text.primary" sx={{ fontWeight: 500 }}>
{owner}
</Typography>
</Box>
</Box>
<Box
onClick={handleProductPage}
sx={{ display: 'flex', alignItems: 'center' }}
>
<Typography sx={{ color: 'black', fontWeight: 700 }}>
{`Your bid:`}
</Typography>
{states ? (
<Typography sx={{ color: 'green', fontWeight: 700 }}>
{`${price}$`}
</Typography>
) : (
<Typography sx={{ color: 'red', fontWeight: 700 }}>
{`${price}$`}
</Typography>
)}
</Box>
</Box>
</Box>
</Container>
);
}
App.js
import "./App.css";
import Signin from "./Views/signin";
import Signup from "./Views/signup";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Profile from "./Views/profile";
// import Test from "./Views/test";
import Search from "./Views/search";
import HomePage from "./Views/homepage";
import Product from "./Views/product";
import AdminPage from "./Views/adminpage";
import ActiveBids from "./Views/activebid";
import MyProducts from "./Views/myProducts";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/myproducts/:email" element={<MyProducts />} />
</Routes>
</BrowserRouter>
);
}
export default App;
users.js
var express = require("express");
var router = express.Router();
const userModel = require("../models/user.model");
let userController = require("../controller/user.controller");
router.get("/myproducts/:email", userController.getMyPurchase);
module.exports = router;
user.controller.js
const express = require('express');
var router = express.Router();
let mongoose = require('mongoose');
let auth = require('../controller/auth');
let bcrypt = require('bcryptjs');
const { Schema } = mongoose;
const { MongoClient, MongoGridFSChunkError, ObjectId } = require('mongodb');
const userModel = require('../models/user.model');
const teamModel = require('../models/team.model');
const catchAsync = require('./../utils/catchAsync');
const productModel = require('../models/product.model');
const bidModel = require('../models/bid.model');
const mailgun = require('mailgun-js');
exports.getMyPurchase = (req, res, next) => {
let email = req.params.email;
// Find the user with the specified email address
userModel
.findOne({ email: email })
.then((user) => {
// Find the purchased items for the user
productModel
.find({
_id: { $in: user.purchased },
open: true,
})
.then((products) => {
// Send the purchased items as a response
res.send({
message: products,
});
})
.catch((error) => {
// Handle any errors that occurred during the query
next(error);
});
})
.catch((error) => {
// Handle any errors that occurred during the query
next(error);
});
};
``;
I cannot find the reason of "GET http://localhost:3000/users/myproducts/undefined 404 (Not Found)"