constants added

public/netlify.toml

+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
\ No newline at end of file

server.js

@@ -137,19 +137,27 @@ app.patch('/updateuser/:id', (req, res) => {
     }
 })
 
-app.get('/cartItems/:userid', (req, res) => {
+app.get('/cartItems/:userid', async(req, res) => {
     const userid = req.params.userid
     const usernameRegex = /^[a-zA-Z0-9_]{1,10}$/;
     if (usernameRegex.test(userid)) {
-        db.collection('cartitems').findOne({ userId: userid })
-        .then(result => {
+        try {
+            const result = await db.collection('cartitems').findOne({ userId: userid });
             if (result != null) {
                 res.status(200).send(result);
             } else {
-                res.status(404).json({ error: 'UserCart not found' });
+                // Create a new cartItems collection
+                const userName = userid; // Assuming userName is the same as userId
+                const newCollection = {
+                    userId: userName,
+                    cartItems: []
+                };
+                await db.collection('cartitems').insertOne(newCollection);
+                res.status(200).send(newCollection);
+            }
+        } catch (error) {
+            res.status(401).send(error);
         }
-        })
-        .catch(error => res.status(500).send(error))
     } else {
         res.status(400).json({ error: 'Invalid UserId' })
     }

src/components/Cart/Cart.tsx

@@ -37,7 +37,7 @@ const Cart = memo(() => {
     }
     const totalPay = useMemo(() => {
         return cartItems.reduce((acc, curr) => {
-            return acc = acc + (parseInt(curr.price) * parseInt(curr.qty));
+            return acc = acc + (Number(curr.price) * Number(curr.qty));
         }, 0)
     }, [cartItems])
 
@@ -74,15 +74,15 @@ const Cart = memo(() => {
                                         {
                                             cartItems.length > 0 && cartItems.map((item) => <tr key={item.id}>
                                                 <td><img src={item.image} width={50} height={50} /></td>
-                                                <td>{item.price}</td>
+                                                <td>{Number(item.price)}</td>
                                                 <td>
                                                     <span className='d-flex justify-content-start align-items-center'>
                                                         <button onClick={() => { dispatch(decrementQuantity(item)) }} className='btn btn-tranparent fw-bolder d-flex justify-content-center align-items-center' style={{ height: "15px", width: "15px" }}>-</button>
-                                                        <span> {item.qty} </span>
+                                                        <span> {Number(item.qty)} </span>
                                                         <button onClick={() => { dispatch(incrementQuantity(item)) }} className='btn btn-tranparent fw-bolder d-flex justify-content-center align-items-center' style={{ height: "10px", width: "8px" }}>+</button>
                                                     </span>
                                                 </td>
-                                                <td>$ {(item.price * item.qty).toFixed()}</td>
+                                                <td>$ {(Number(item.price) * Number(item.qty)).toFixed()}</td>
                                                 <td><button onClick={() => dispatch(removeFromCart(item))} className='bi bi-trash text-danger bg-transparent border-0'></button></td>
                                             </tr>)
                                         }

src/components/Login/Login.tsx

@@ -7,6 +7,7 @@ import { useSelector, useDispatch } from 'react-redux'
 import { fetchUsers } from '../../reduxstore/usersSlice';
 import { RootState } from '../../reduxstore/store';
 import { loginUser } from '../../reduxstore/userDetailsslice';
+import { base_url } from '../../utils/constants';
 
 
 const Login: React.FC = memo(() => {
@@ -35,12 +36,12 @@ const Login: React.FC = memo(() => {
 
     const handleSubmit = async (e: any) => {
         e.preventDefault()
-        await axios.post('http://localhost:4000/login', values)
+        await axios.post(`${base_url}/login`, values)
             .then((res) => {
-                dispatch(loginUser(res.data.user))
+                dispatch(loginUser(res.data?.user))
                 navigate("/products")
             })
-            .catch((err) => setError(err.response.data.message))
+            .catch((err) => setError(err.response.data?.message))
     }
  
 

src/components/Register/Register.tsx

@@ -5,6 +5,7 @@ import './Register.css';
 import { useSelector, useDispatch } from 'react-redux'
 import { fetchUsers } from '../../reduxstore/usersSlice';
 import { RootState } from '../../reduxstore/store';
+import { base_url } from '../../utils/constants';
 
 const Register = () => {
     const navigate = useNavigate()
@@ -114,7 +115,7 @@ const Register = () => {
 
     const handleSubmit = async (e: any) => {
         e.preventDefault()
-        await axios.post('http://localhost:4000/registeruser', values)
+        await axios.post(`${base_url}/registeruser`, values)
             .then((res) => {
                 navigate("/login")
             })

src/reduxstore/cartSlice.ts

 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 import axios from 'axios';
+import { base_url } from '../utils/constants';
 
 
 type cartStateType = {
@@ -19,14 +20,13 @@ const initialState: cartStateType = {
 };
 
 export const fetchCartItems: any = createAsyncThunk('cart/fetchCartItems', async (userid) => {
-    return await axios.get(`http://localhost:4000/cartItems/${userid}`)
+    return await axios.get(`${base_url}/cartItems/${userid}`)
         .then(response => response.data.cartItems);
 });
 
 export const updateCartItems: any = createAsyncThunk('updatecart/updateCartItems', async ({ userId, updateCartItems }: CartItemType) => {
-    return await axios.patch(`http://localhost:4000/updateCartItems/${userId}`, updateCartItems)
+    return await axios.patch(`${base_url}/updateCartItems/${userId}`, updateCartItems)
         .then(response => {
-            // console.log(response.data);
             return response.data
         });
 });
@@ -41,7 +41,7 @@ const cartSlice = createSlice({
             const newItem = action.payload;
             if (prevCartItems.find((item) => item.id === newItem.id)) {
                 const index = prevCartItems.indexOf(prevCartItems.find((item) => item.id === newItem.id));
-                let updatedItem = { ...prevCartItems[index], qty: prevCartItems[index].qty + 1 };
+                let updatedItem = { ...prevCartItems[index], qty: prevCartItems[index].qty + Number(1) };
                 prevCartItems[index] = updatedItem;
                 state.cartItems = [...prevCartItems];
             } else {

src/reduxstore/productsSlice.ts

 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 import axios from 'axios';
+import { base_url } from '../utils/constants';
 
 type productsStateType = {
     loading: boolean;
@@ -14,7 +15,7 @@ const initialState: productsStateType = {
 };
 
 export const fetchProducts:any= createAsyncThunk('products/fetchProducts', async () => {
-    return await axios.get('http://localhost:4000/products')
+    return await axios.get(`${base_url}/products`)
         .then(response => response.data);
 });
 

src/reduxstore/usersSlice.ts

 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 import axios from 'axios';
+import { base_url } from '../utils/constants';
 
 type usersStateType = {
     loading: boolean;
@@ -14,7 +15,7 @@ const initialState: usersStateType = {
 };
 
 export const fetchUsers:any= createAsyncThunk('users/fetchUsers', async () => {
-    return await axios.get('http://localhost:4000/users')
+    return await axios.get(`${base_url}/users`)
         .then(response => response.data);
 });
 

src/utils/constants.js

+// export const base_url = 'http://localhost:4000'
+export const base_url = 'https://shopperserver.netlify.app/.netlify/functions/api'