Can't add product into Cart - reactjs

Question

Unable to add product into the cart although, the url is getting changed, it showing two errors in the console, cant understand what is wrong.
http://localhost:3000/cart/636d4264ff92e60977f3bb4a?qt=3
636d4264ff92e60977f3bb4a = productID and qt=3 quantity
enter image description here
here are my files
import React, { useEffect } from 'react'
import { Link, useParams, useLocation, useNavigate } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { Row, Col, ListGroup, Image, Form, Button, Card } from 'react-bootstrap'
import Message from '../components/Message'
import { addToCart, removeFromCart } from '../actions/cartActions'
const CartScreen = ({match, history}) => {
const {id} = useParams();
//const productId = match.params.id
const location = useLocation();
const qty = location.search ? Number (location.search.split('=') [1]) : 1
const dispatch = useDispatch()
const navigate = useNavigate()
const cart = useSelector((state) => state.cart)
const { cartItems } = cart
useEffect(() => {
if(id){
//useEffect working fine
dispatch(addToCart(id,qty))
}else{
//console.log('useEffect error')
}
}, [dispatch, id, qty])
const removeFromCartHandler = (id) => {
dispatch(removeFromCart(id))
}
const chechoutHandler = () => {
navigate('/login?redirect=/shipping')
}
return (
<Row>
<Col md={8}>
<h1>Shopping Cart</h1>
{ cartItems && cartItems.length === 0 ? (
<Message> Your cart is empty <Link to='/'>Go Back</Link></Message>
) : (
<ListGroup variant='flush'>
{cartItems.map(item => (
<ListGroup.Item key={item.product}>
<Row>
<Col md={2}>
<Image src={item.image} alt={item.name} className="cartItemPhoto" flude rounded />
</Col>
<Col md={3}>
<Link to={`/product/${item.product}`}>{item.name}</Link>
</Col>
<Col md={2}>₹{item.price}</Col>
<Col md={2}>
<Form.Control
as='select'
value={item.qty}
onChange={(e)=> dispatch(addToCart(item.product,Number(e.target.value)))}
>
{[...Array(item.countInStock).keys()].map((x) => (
<option key={x+1} value={x + 1}>
{ x + 1 }
</option>
))}
</Form.Control>
</Col>
<Col md={2}>
<Button type='button' varient='ligth' onClick={() => removeFromCartHandler(item.product)} >
<i className='fas fa-trash'></i>
</Button>
</Col>
</Row>
</ListGroup.Item>
))}
</ListGroup>
)}
</Col>
<Col md={4}>
<Card>
<ListGroup varient = 'flush'>
<ListGroup.Item>
<h2>Subtotal ({cartItems.reduce((acc,item)=>acc+item.qty,0)}) items</h2>
₹{cartItems.reduce((acc,item)=>acc+item.qty * item.price,0).toFixed(2)}
</ListGroup.Item>
<ListGroup>
<Button type='button' className='btn-block' disabled={cartItems.length === 0} onClick={chechoutHandler}>
Proceed To Checkout
</Button>
</ListGroup>
</ListGroup>
</Card>
</Col>
</Row>
)
}
export default CartScreen
import React, { useState, useEffect } from 'react'
import { Link, useParams} from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import {Row, Col, Image, ListGroup, Card, Button, Form } from 'react-bootstrap'
import Rating from '../components/Rating'
import Loader from '../components/Loader'
import Message from '../components/Message'
import { listProductDetails, createProductReview } from '../actions/productActions'
import { useNavigate } from 'react-router-dom'
//import products from '../../../backend/data/products.js'
//import axios from 'axios'
import { PRODUCT_CREATE_REVIEW_RESET } from '../constants/productConstants'
const ProductScreen = ({ match}) => {
const {id} = useParams();
//const product = products.find((p) => p._id === id);
const [qty, setQty] = useState(1)
const [rating, setRating] = useState(0)
const [comment, setComment] = useState('')
const dispatch = useDispatch()
const productDetails = useSelector(state => state.productDetails)
const { loading, error, product } = productDetails
//console.log(product)
// reviews aasche sudhu
const userLogin = useSelector((state) => state.userLogin)
const { userInfo } = userLogin
const productReviewCreate = useSelector((state) => state.productReviewCreate)
const {
success: successProductReview,
loading: loadingProductReview,
error: errorProductReview,
} = productReviewCreate
useEffect(()=>{
if(successProductReview){
alert('Review Submitted!')
setRating(0)
setComment('')
dispatch({type: PRODUCT_CREATE_REVIEW_RESET})
}
dispatch(listProductDetails(id))
}, [dispatch, id, successProductReview])
//if(!product) return null;
// return ( <div>{product.name}</div> );
const history = useNavigate()
const addToCartHandler = () =>{
history(`/cart/${id}?qt=${qty}`)
}
const submitHandler = (e) => {
e.preventDefault()
dispatch(
createProductReview(id, {
rating,
comment,
})
)
}
//console.log(product)
return (
<>
<Link className='btn btn-outline-primary' to='/'>
Go Back
</Link>
{ loading ? (
<Loader/>
): error ? (
<Message variant='danger'> {error} </Message>
) : (
<>
<Row>
<Col md={6}>
{/* src={product.image} changed to -> {`${window.location.origin}/${product.image.name}`} */}
<Image src= {product.image} alt={product.name} fluid/>
</Col>
<Col md={3}>
<ListGroup variant='flust'>
<ListGroup.Item>
<h3>{product.name}</h3>
</ListGroup.Item>
<ListGroup.Item>
{/*
<Rating
value={product.rating.toString()}
text={product.numReviews}
/>
*/}
</ListGroup.Item>
<ListGroup.Item>
Price: ₹{product.price}
</ListGroup.Item>
<ListGroup.Item>
Description: {product.description}
</ListGroup.Item>
</ListGroup>
</Col>
<Col md={3}>
<Card>
<ListGroup variant='flush'>
<ListGroup.Item>
<Row>
<Col>
Price:
</Col>
<Col>
<strong>₹{product.price}</strong>
</Col>
</Row>
</ListGroup.Item>
<ListGroup.Item>
<Row>
<Col>
Status:
</Col>
<Col>
{product.countInStock>0 ? 'In Stock' : 'Out Of Stock'}
</Col>
</Row>
</ListGroup.Item>
{ product.countInStock > 0 && (
<ListGroup.Item>
<Row>
<Col>Qty</Col>
<Col>
<Form.Control
as='select'
value={qty}
onChange={(e)=>setQty(e.target.value)}
>
{[...Array(product.countInStock).keys()].map((x) => (
<option key={x+1} value={x + 1}>
{ x + 1 }
</option>
))}
</Form.Control>
</Col>
</Row>
</ListGroup.Item>
)}
<ListGroup.Item>
<Button
onClick={addToCartHandler}
className='btn btn-success btn-block btn-wd'
type='button'
disabled={product.countInStock===0}
>
Add To Cart
</Button>
</ListGroup.Item>
</ListGroup>
</Card>
</Col>
</Row>
<Col md={6}>
<h2>Reviews</h2>
{product.reviews.length === 0 && <Message>No Reviews</Message>}
<ListGroup variant='flush'>
{product.reviews.map((review) => (
<ListGroup.Item key={review._id}>
<strong>{review.name}</strong>
<Rating value={review.rating} />
<p>{review.createdAt.substring(0, 10)}</p>
<p>{review.comment}</p>
</ListGroup.Item>
))}
<ListGroup.Item>
<h2>Write a Customer Review</h2>
{successProductReview && (
<Message variant='success'>
Review submitted successfully
</Message>
)}
{loadingProductReview && <Loader />}
{errorProductReview && (
<Message variant='danger'>{errorProductReview}</Message>
)}
{userInfo ? (
<Form onSubmit={submitHandler}>
<Form.Group controlId='rating'>
<Form.Label>Rating</Form.Label>
<Form.Control
as='select'
value={rating}
onChange={(e) => setRating(e.target.value)}
>
<option value=''>Select...</option>
<option value='1'>1 - Poor</option>
<option value='2'>2 - Fair</option>
<option value='3'>3 - Good</option>
<option value='4'>4 - Very Good</option>
<option value='5'>5 - Excellent</option>
</Form.Control>
</Form.Group>
<Form.Group controlId='comment'>
<Form.Label>Comment</Form.Label>
<Form.Control
as='textarea'
row='3'
value={comment}
onChange={(e) => setComment(e.target.value)}
></Form.Control>
</Form.Group>
<Button
disabled={loadingProductReview}
type='submit'
variant='primary'
>
Submit
</Button>
</Form>
) : (
<Message>
Please <Link to='/login'>sign in</Link> to write a review{' '}
</Message>
)}
</ListGroup.Item>
</ListGroup>
</Col>
</>
)}
</>
)
}
// Form.Control e add chilo, onChange{(e) => setQty(e.target.value)}
/*
<Form.Control
as='select'
value={qty}
onChange{(e) => setQty(e.target.value)}
>
// lec 32
*/
export default ProductScreen
import axios from 'axios'
import {
CART_ADD_ITEM,
CART_REMOVE_ITEM,
CART_SAVE_SHIPING_ADDRESS,
CART_SAVE_PAYMENT_METHOD
} from '../constants/cartConstants'
import { useParams } from 'react-router-dom'
export const addToCart = (id, qty) => async (dispatch, getState) => {
const {id} = useParams();
//console.log(`id working = ${id}`)
const { data } = await axios.get(`/api/products/${id}`)
//console.log(`data = ${data}`)
dispatch({
type: CART_ADD_ITEM,
payload: {
product: data._id,
name: data.name,
image: data.image,
price: data.price,
countInStock: data.countInStock,
qty,
},
})
localStorage.setItem('cartItems', JSON.stringify(getState().cart.cartItems))
}
export const removeFromCart = (id) => (dispatch, getState) => {
dispatch({
type: CART_REMOVE_ITEM,
payload: id
})
localStorage.setItem('cartItems',JSON.stringify(getState().cart.cartItems))
}
export const saveShippingAdderss = (data) => (dispatch) => {
dispatch({
type: CART_SAVE_SHIPING_ADDRESS,
payload: data,
})
localStorage.setItem('shippingAddress',JSON.stringify(data))
}
export const savePaymentMethod = (data) => (dispatch) => {
dispatch({
type: CART_SAVE_PAYMENT_METHOD,
payload: data,
})
localStorage.setItem('paymentMethod',JSON.stringify(data))
}
import { CART_ADD_ITEM, CART_REMOVE_ITEM, CART_SAVE_PAYMENT_METHOD, CART_SAVE_SHIPING_ADDRESS } from '../constants/cartConstants.js'
import { PRODUCT_DETAILS_REQUEST, PRODUCT_LIST_REQUEST } from '../constants/productConstants.js'
export const cartReducer = (
state = { cartItems: [], shippingAddress: {} }, action) => {
//console.log(`action.type line on 6 = ${action.type}`)
switch(action.type){
case CART_ADD_ITEM:
//console.log(`CART_ADD_ITEM 3333 = ${action.type}`)
const item = action.payload
const existItem = state.cartItems.find( (x) => x.product === item.product)
if(existItem){
return {
...state,
cartItems: state.cartItems.map ((x) =>
x.product === existItem.product ? item : x
),
}
} else {
return {
...state,
cartItems: [...state.cartItems, item],
}
}
case CART_REMOVE_ITEM:
return {
...state,
cartItems: state.cartItems.filter((x) => x.product !==action.payload),
}
case CART_SAVE_SHIPING_ADDRESS:
return {
...state,
shippingAddress: action.payload,
}
case CART_SAVE_PAYMENT_METHOD:
return {
...state,
paymentMethod: action.payload,
}
default:
return state
}
}
I want to resolve the error so that I can add products to my cart. Thank you