removed cart errors

src/components/Cart/Cart.tsx

@@ -25,6 +25,16 @@ const Cart = memo(() => {
             dispatch(updateCartItems({ userId: user.userId, updateCartItems: cartItems }))
         }
     }
+
+    const handleDontSave=()=>{
+        if (user) {
+            if (Object.keys(user).length === 0) {
+                navigate('/login')
+            } else {
+                dispatch(fetchCartItems(user.userId))
+            }
+        }
+    }
     const totalPay = useMemo(() => {
         return cartItems.reduce((acc, curr) => {
             return acc = acc + (parseInt(curr.price) * parseInt(curr.qty));
@@ -38,12 +48,12 @@ const Cart = memo(() => {
                 <button type="button" className="btn btn-primary mx-2" data-bs-toggle="modal" data-bs-target="#cartModal">
                     <span className='bi bi-cart'></span> Cart
                 </button>
-                <div className="modal fade" id="cartModal" tabIndex={-1} aria-labelledby="cartModalLabel" aria-hidden="true">
+                <div className="modal fade"  data-bs-backdrop="static"  id="cartModal" tabIndex={-1} aria-labelledby="cartModalLabel" aria-hidden="true">
                     <div className="modal-dialog">
                         <div className="modal-content">
                             <div className="modal-header">
                                 <h1 className="modal-title fs-5" id="cartModalLabel">{capitalizedUserId}'s Cart</h1>
-                                <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                                {/* <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> */}
                             </div>
                             <div className="modal-body">
                                 <table className='table table-hover m-0'>
@@ -82,7 +92,7 @@ const Cart = memo(() => {
                                 </table>
                             </div>
                             <div className="modal-footer">
-                                <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                                <button type="button" className="btn btn-secondary" onClick={handleDontSave} data-bs-dismiss="modal">Dont Save Changes</button>
                                 <button type="button" className="btn btn-primary" onClick={handleCartChanges}>Save Changes</button>
                             </div>
                         </div>

src/components/Navbar/NavButtons.tsx

@@ -14,7 +14,7 @@ const NavButtons = memo((props:NavButtonsProps) => {
     const user = useSelector((state: RootState) => state.userDetails.userDetails);
     return (
         <div className='d-flex'>
-            { user && (Object.keys(user).length===0 && user.constructor === Object) ?(
+            { user===null ?(
                 <div className='nav-login-cart'>
                     <Link to="/login"><button>Login</button></Link>
                     <Link to="/register">

src/components/catelog/Product.tsx

@@ -39,7 +39,7 @@ const Product = memo((props: ProductPropsType) => {
     return (<div className='col-lg-4 col-md-2 col-sm-1 my-2' style={{width: "300px"}}>
         <div className="card" >
             <img src={image} className="img-fluid" style={{width:"100%",height:"200px"}} alt="..."/>
-                <div className="card-body" style={{width:"100%",height:"130px",overflowY: "scroll"}}>
+                <div className="card-body" style={{width:"100%",height:"100px",overflowY: "scroll"}}>
                     <p className="card-title fw-bolder">Title: {title}</p>
                     <p className="card-text" style={{fontSize:"10px"}}><span className='fw-bold'>Description:</span><br/>{description}</p>
                 </div>

src/index.tsx

@@ -6,6 +6,7 @@ import reportWebVitals from './reportWebVitals';
 import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 import '../node_modules/bootstrap/dist/js/bootstrap.bundle'
 import '../node_modules/bootstrap-icons/font/bootstrap-icons.css'
+// import '../node_modules/jquery/dist/jquery'
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement

src/reduxstore/cartSlice.ts

@@ -52,7 +52,6 @@ const cartSlice = createSlice({
         removeFromCart: (state, action) => {
             state.loading = true;
             const removeItem = action.payload;
-            console.log(removeItem)
             const filteredItems = state.cartItems.filter((item) => item.id !== removeItem.id);
             state.cartItems = filteredItems;
         },