bradtraversy / proshop_mern

Shopping cart built with MERN & Redux

ProShop eCommerce Platform

eCommerce platform built with the MERN stack & Redux.

THIS PROJECT IS DEPRECATED

This project is no longer supported. The new project/course has been released. The code has been cleaned up and now uses Redux Toolkit. You can find the new version HERE

Features

• Full featured shopping cart
• Product reviews and ratings
• Top products carousel
• Product pagination
• Product search feature
• User profile with orders
• Admin product management
• Admin user management
• Admin Order details page
• Mark orders as delivered option
• Checkout process (shipping, payment method, etc)
• PayPal / credit card integration
• Database seeder (products & users)

Note on Issues

Please do not post issues here that are related to your own code when taking the course. Add those in the Udemy Q/A. If you clone THIS repo and there are issues, then you can submit

Usage

ES Modules in Node

We use ECMAScript Modules in the backend in this project. Be sure to have at least Node v14.6+ or you will need to add the "--experimental-modules" flag.

Also, when importing a file (not a package), be sure to add .js at the end or you will get a "module not found" error

You can also install and setup Babel if you would like

Env Variables

Create a .env file in then root and add the following

NODE_ENV = development
PORT = 5000
MONGO_URI = your mongodb uri
JWT_SECRET = 'abc123'
PAYPAL_CLIENT_ID = your paypal client id

Install Dependencies (frontend & backend)

npm install
cd frontend
npm install

Run

# Run frontend (:3000) & backend (:5000)
npm run dev

# Run backend only
npm run server

Build & Deploy

# Create frontend prod build
cd frontend
npm run build

There is a Heroku postbuild script, so if you push to Heroku, no need to build manually for deployment to Heroku

Seed Database

You can use the following commands to seed the database with some sample users and products as well as destroy all data

# Import data
npm run data:import

# Destroy data
npm run data:destroy

Sample User Logins

[email protected] (Admin)
123456

[email protected] (Customer)
123456

[email protected] (Customer)
123456

License

The MIT License

Copyright (c) 2020 Traversy Media https://traversymedia.com

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

proshop_mern's Issues

/cart/:id? CartScreen problem

once we add a new product and redirected to cart screen , problem begins if we try to delete specific product , this happens because of:
useEffect(() => {
if (productId) {
addToCart(productId, qty);

just after we delete product, it is added again because of having match.params.id(productId)

orderDetailsReducer: the initial state of loading is true?

Maybe it is better to set the initial state of loading to false in orderDetailsReducer, and let ORDER_DETAILS_REQUEST to return only {loading:true}, without the ...state

About the use of the classic function instead of arrow function

Hey Brad, when you created a method matchPassword in the userModel.js, you used function(enteredPassword){ } but you could do that using the arrow function (enteredPassword)=>{ }. Is this because the pointing issues of this keyword in two types of functions... If yes, could you explain it to me?

404(Not Found)

Even after adding proxy to .json file I m facing the error on Home Screen Page
I even tried using 'cors' pkg but it also didnt worked
Is there something I am missing?
Here is my code snippet

A few issues with the Cart

I've noticed a few issues with the Cart:

Cart items are not associated to a user on the frontend.

You could add an item to cart even if you're not logged in, which is weird.
If you add an item to cart, and you log in, it's the same cart items, and if you log out, nothing changes. And if you log into a different user, and check the cart items, it is still the same cart items.

I think that it would make more sense if the cart item was associated to a user, so that every user has their own cart items.

That would be great!

Error: Product Details Page

Getting the following error in product details page:

    index.js:1 Warning: Failed prop type: The prop `value` is marked as required in `Rating`, but its value is `undefined`.
    in Rating (at ProductScreen.js:44)
    in ProductScreen (created by Context.Consumer)
    in Route (at App.js:20)
    in div (created by Container)
    in Container (at App.js:17)
    in main (at App.js:16)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:14)
    in App (at src/index.js:12)
    in Provider (at src/index.js:11)

A bug in the register logic

There is a bug in the user register logic. You can only register once and when you log out from that newely created account, you can not register again. You get redirected to redirect location eg... if you go to login from homepage, then register, you get redirected to homepage

Postman is not working

Hi, I am trying to connect to postman and it says it cannot work because of cors. Any fixes?

Problems with data:import

Hi, I am having problems with importing data. I am connected to the database but when i try to do data:import it does not allow it. It says,

Executing task: npm run data:import <

[email protected] data:import /Users/carlosdiazplaza/Desktop/cduoshop
node backend/seeder

file:///Users/carlosdiazplaza/Desktop/cduoshop/backend/models/productModel.js:61
type: Nummber,
^

ReferenceError: Nummber is not defined
at file:///Users/carlosdiazplaza/Desktop/cduoshop/backend/models/productModel.js:61:13
at ModuleJob.run (internal/modules/esm/module_job.js:146:23)
at async Loader.import (internal/modules/esm/loader.js:165:24)
at async Object.loadESM (internal/process/esm_loader.js:68:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] data:import: node backend/seeder
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] data:import script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/carlosdiazplaza/.npm/_logs/2020-10-17T05_44_41_782Z-debug.log
The terminal process "/bin/zsh '-c', 'npm run data:import'" terminated with exit code: 1.

Any fixes? My repository is here: https://github.com/talmax1124/cduoshop
you can also email me at [email protected]. Please help and thank you!

Quick Error W/ Postman.

Lecture 56
Hi, I am having this error. Have two different errors one in safari and the other in chrome. How do i fix this error?

Safari:

Chrome:

Repository: https://github.com/talmax1124/cduoshop

you can also contact me through email: [email protected]

Redux state

From where we get getState on some actions

export const getUserDetails = (id) => async (dispatch, getState) => {

https://github.com/bradtraversy/proshop_mern/blob/master/frontend/src/actions/userActions.js

where it lives ?

Username in navbar doesn't update when updated from the profile

When the username is updated via this, it gets updated on that screen, but if you look at the navbar, you can see your first username to ever use, and it doesn't change.

Also, it doesn't require to input the password to change the username.

giving null (const user = await User.findById(req.user._id);)

when i hit the http://localhost:5000/api/users/profile
giving me "User not found"

// @desc Auth user profile
// @route GET /api/users/profile
// access Private
const getUserProfile = asyncHandler(async (req, res) => {
const user = await User.findById(req.user._id);
if (user) {
res.json({
_id: user._id,
name: user.name,
email: user.email,
isAdmin: user.isAdmin,
});
} else {
res.status(404);
throw new Error("User not found");
}
});

304 responses

Any access to products results in a 304 status

Validation Error! when I run npm run data:import

when i try to import the model data to my mongodb using npm run data:import
I get this error ValidationError: password: Path password is required., email: Path email is required., name: Path name is required.

LOG FILE
0 verbose cli [
0 verbose cli 'C:\Program Files\nodejs\node.exe',
0 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
0 verbose cli 'run',
0 verbose cli 'data:import'
0 verbose cli ]
1 info using [email protected]
2 info using [email protected]
3 timing config:load:defaults Completed in 3ms
4 timing config:load:file:C:\Program Files\nodejs\node_modules\npm\npmrc Completed in 4ms
5 timing config:load:builtin Completed in 4ms
6 timing config:load:cli Completed in 3ms
7 timing config:load:env Completed in 1ms
8 timing config:load:file:C:\Users\RILWAN\Pictures\Proshop.npmrc Completed in 0ms
9 timing config:load:project Completed in 2ms
10 timing config:load:file:C:\Users\RILWAN.npmrc Completed in 1ms
11 timing config:load:user Completed in 1ms
12 timing config:load:file:C:\Users\RILWAN\AppData\Roaming\npm\etc\npmrc Completed in 0ms
13 timing config:load:global Completed in 0ms
14 timing config:load:cafile Completed in 1ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:setUserAgent Completed in 1ms
17 timing config:load:setEnvs Completed in 2ms
18 timing config:load Completed in 18ms
19 verbose npm-session 52ebecba1e5d9ebc
20 timing npm:load Completed in 41ms
21 timing command:run-script Completed in 7279ms
22 verbose stack Error: command failed
22 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\node_modules@npmcli\promise-spawn\index.js:63:27)
22 verbose stack at ChildProcess.emit (node:events:327:20)
22 verbose stack at maybeClose (node:internal/child_process:1048:16)
22 verbose stack at Process.ChildProcess._handle.onexit (node:internal/child_process:288:5)
23 verbose pkgid [email protected]
24 verbose cwd C:\Users\RILWAN\Pictures\Proshop
25 verbose Windows_NT 10.0.19042
26 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "data:import"
27 verbose node v15.0.0
28 verbose npm v7.0.2
29 error code 1
30 error path C:\Users\RILWAN\Pictures\Proshop
31 error command failed
32 error command C:\Windows\system32\cmd.exe /d /s /c "node backend/seeder"
33 verbose exit 1

Delete own Admin User

If you log in with a user account and delete this account, the platform just dies. Probably we need to implement a validation to not delete our user as Admin.

ProductScreen is showing an empty page and an error

I'm stucked at fetching ProductScreen from backend, I'm getting an error below in my terminal.
Line 18:8: React Hook useEffect has a missing dependency: 'match.params.id'. Either include it or remove the dependency array react-hooks/exhaustive-deps

CastError: Cast to ObjectId failed for value "5f899a5519e5fa43d0b7a8512" at path "_id" for model "Product"

I am on lesson (Fetching products from the database) of Getting Started with MongoDB and while trying to get the error of 'Product not found', I get this. My all products and product with correct _id are being served but when i type a wrong id then the CastError appears, I even downloaded the brad's version and the results are the same. Please Help, Im stuck in this for 2 days now with no results even in internet

"Not Authorized, no token " Alert comes on hitting the User Profile Page

I am able to access the "{{URL}}/api/users/profile" with the authorization in POSTMAN but in the actual web application I am facing the issue as shown in the screen shot.

Product Review Carries On To Each Message Until Submits A New Rating Bug

Hi, I found this bug or maybe it is a error on my part but the already have a rating message carries on to the other product pages until you submit a new one or reload.

The one i wrote a review for:

After going from there to another product it shows this without even posting a review:

Also this might be an error on my end but there is a zero on my comments section. Here is my repo: github.com/talmax1124/cduoshop

TypeError: User.insertMany is not a function

Currently getting the above error when trying to run the seeder.js via terminal to send data to mongodb. Below is my code, would highly appreciate assistance:

Also received errors for "Order.deleteMany is not a function" hence why I have remove method instead

Expired JWT bug

I've noticed that when the JWT expires, the frontend still stores the token in the localStorage, which doesn't make sense, as the user is still able to stay logged in, and the navbar will still show the username, but actually it should log out...

It'd be great if when the JWT expires on the backend, that the frontend would log out.

You could see this issue in action when you go to user profiles page, and wait for the JWT to time out, it will show this error message:

Just a suggestion...

Object (...) is not a function

When getting the display on the product screen I get an error saying "Object(...) is not a function " coming from the ProductScreen component. How do I fix this?

Problems W/ Update Profile. Giving Me Errors.

Hello. When i try to do go to update profile it gives me an error. Here are the images.

Before Reload:

After I Reload:

Repository https://github.com/talmax1124/cduoshop

You can also email me at [email protected]

Warning: Each child in a list should have a unique "key" prop. Also Says ListGroupItem is defined but never used.

Hello, it is saying there is something wrong with the props. As well as ListGroupItem is defined but it says never used. My repository is in this link. It will stay public for the next 5 days or until I start doing the api with the import stuff.

./src/screens/ProductScreen.js
Line 3:51: 'ListGroupItem' is defined but never used no-unused-vars

and Warning: Each child in a list should have a unique "key" prop.

Check the render method of HomeScreen. See https://fb.me/react-warning-keys for more information.
in Col (at HomeScreen.js:23)
in HomeScreen (created by Context.Consumer)
in Route (at App.js:16)
in div (created by Container)
in Container (at App.js:15)
in main (at App.js:14)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:12)
in App (at src/index.js:10)
in StrictMode (at src/index.js:9)

https://github.com/talmax1124/cduoshop

Can't access cart. "TypeError: cartItems.map is not a function"

I cloned your finished repo, and it's fully functioning except I receive the following error when trying to access the cart.

TypeError: cartItems.map is not a function
CartScreen
src/screens/CartScreen.js:41
  38 |     Your cart is empty <Link to='/'>Go Back</Link>
  39 |   </Message>
  40 | ) : (
> 41 |   <ListGroup variant='flush'>
     | ^  42 |     {cartItems.map((item) => (
  43 |       <ListGroup.Item key={item.product}>
  44 |         <Row>

All I have done is npm install and add my Mongo URI to .env.

Any idea why I might be running into this error?

Product page does not open at the top of page

Losing details about User Orders when Admin delete User

When an admin deletes a user with orders when seeing the orders we lose the history about what users make the purchase.

It should show the users information about what name make the purchase even if the users get deleted.

[SOLVED] 2 bugs Admin Profile, Product Edit

#1
If admin goes to /admin/user/:id/edit, click update and go to own profile /profile, then name and email is filled by other user data
e.g Instead of admin name there is John Doe and instead of [email protected] there's [email protected]

#2
If admin goes to (/admin/product/:id/edit), change some values e.g. name of product, click Update, and again click to edit the same product then there's not updated version of product

Multer image upload with separate server handling.

Currently im trying runnning in 2 diffrent server one for front end one for backend having some issue with photo upload location
maybe should set it into mongodb as binary?

Product countInStock Never Updated

In the backend, when an order is placed, the product's countInStock should be updated.

Route changes, but only one order can be seen

Lets say I made few orders just like in the example below:

If I want to pay for other orders and click on a random one that's not paid, route changes, but the program still brings me to the first order made. In this example I clicked on the last one, and it brought me back to the one I first made:

forgot password, sign in with google and facebook functionality

Hi Brad, thanks a lot for the amazing course and quick response, I must commend your effort in bringing up new developers into the industry, I am still stuck in some important functionality of a website, which is the functionality to send a password reset link incase a user forgets his/her password and the functionality to sign up and log in with google and facebook as many user are too lazy to fill register form, as well as displaying the google information in the nav bar in place of the user name....I will be glad if you assist us in these aspect

thanks
Derry
Nigeria

error on props and ListGroupItem

Hi, @basir @bradtraversy . I am having trouble with props and the item ListGroupItem.
Here is what it says.
in my console, it says: ./src/screens/ProductScreen.js
Line 3:51: 'ListGroupItem' is defined but never used no-unused-vars

and in the inspect element in the browser it says: Warning: Each child in a list should have a unique "key" prop.

Check the render method of HomeScreen. See https://fb.me/react-warning-keys for more information.
in Col (at HomeScreen.js:23)
in HomeScreen (created by Context.Consumer)
in Route (at App.js:16)
in div (created by Container)
in Container (at App.js:15)
in main (at App.js:14)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:12)
in App (at src/index.js:10)
in StrictMode (at src/index.js:9)

My repo will stay open for 5 days or until i do the paypal API or do something important. The link to my repository is https://github.com/talmax1124/cduoshop

If you have any questions email me at [email protected]
and you can also message me at my instagram @slayy_talmax

decreaseQty script to decrease countinStock when user order??opinion??

`const mongoose =require('mongoose')
const Product=require('../models/productModel')

module.exports=async(orderItems)=>{

let idsQty=[]
Array.prototype.forEach.call(orderItems,function(item){
    
    idsQty.push({product:mongoose.Types.ObjectId(item.product),qty:item.qty})
})
Array.prototype.forEach.call(idsQty,async(item)=>{
    const product=await Product.findByIdAndUpdate(item.product,{$inc:{countInStock:-1*(item.qty)}})
})

}`

sameSite=none; secure

When using PayPal it refuses to connect and says the cookies have the wrong settings.

typo error on links resource file in Udemy

the name of the repo is proshop_mern but the links.txt file in project resources says: https://github.com/bradtraversy/mern-proshop

issue with login & register reducer logic

I added code for register page along with its action & reducer.
(specifically commit 8c75f16)

Why do we have userInfo in both register & login reducer?

    case USER_LOGIN_SUCCESS:
      return { loading: false, userInfo: action.payload };
 
    case USER_REGISTER_SUCCESS:
      return { loading: false, userInfo: action.payload };

When you register, register action creator dispatches two actions

    dispatch({
      type: USER_REGISTER_SUCCESS,
      payload: data,
    });

    dispatch({
      type: USER_LOGIN_SUCCESS,
      payload: data,
    });

But when you logout, you only clear the userInfo in login reducer but userInfo in register is still there thus it won't let you go to register again. So handle user logout in register as well

case USER_REGISTER_FAIL:
      return { loading: false, error: action.payload };

case USER_LOGOUT:
      return {};

Project code not found

Each section should have completed project/code for that specific section only inside .zip file

typo in ProductEditScreen.js

line 49 should say countInStock not countInSock

SyntaxError: Cannot use import statements outside a module

System Info:

---

OS: Linux mint 20 x86_64
Kernel: 5.4.0-48-generic
Node version: 12.14.1

Error message

---

[email protected] start /home/avinash/Projects/Traversy media/proshop_mern
node backend/server

/home/avinash/Projects/Traversy media/proshop_mern/backend/server.js:1
import path from 'path'
^^^^^^

SyntaxError: Cannot use import statement outside a module
at Module._compile (internal/modules/cjs/loader.js:891:18)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
at internal/main/run_main_module.js:17:11
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: node backend/server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/avinash/.npm/_logs/2020-09-30T22_20_45_659Z-debug.log

Debug

Quick Erro

Hi, I know this is supposed to be for bugs but here is a problem i am having:

[0] events.js:291
[0] throw er; // Unhandled 'error' event
[0] ^
[0]
[0] Error: listen EADDRINUSE: address already in use :::5000
[0] at Server.setupListenHandle [as _listen2] (net.js:1317:16)
[0] at listenInCluster (net.js:1365:12)
[0] at Server.listen (net.js:1451:7)
[0] at Function.listen (/Users/carlosdiazplaza/Documents/Creative-Duo-Shop/node_modules/express/lib/application.js:618:24)
[0] at file:///Users/carlosdiazplaza/Documents/Creative-Duo-Shop/backend/server.js:55:5
[0] at ModuleJob.run (internal/modules/esm/module_job.js:146:23)
[0] at async Loader.import (internal/modules/esm/loader.js:165:24)
[0] at async Object.loadESM (internal/process/esm_loader.js:68:5)
[0] Emitted 'error' event on Server instance at:
[0] at emitErrorNT (net.js:1344:8)
[0] at processTicksAndRejections (internal/process/task_queues.js:80:21) {
[0] code: 'EADDRINUSE',
[0] errno: -48,
[0] syscall: 'listen',
[0] address: '::',
[0] port: 5000
[0] }
[0] [nodemon] app crashed - waiting for file changes before starting...
[1] ℹ ｢wds｣: Project is running at http://192.168.1.66/
[1] ℹ ｢wds｣: webpack output is served from
[1] ℹ ｢wds｣: Content not from webpack is served from /Users/carlosdiazplaza/Documents/Creative-Duo-Shop/frontend/public
[1] ℹ ｢wds｣: 404s will fallback to /
[1] Starting the development server...

Any help?

user name not updating in header on user update profile

username is not being updated when i update user details i tried different things but nothing works. please tell what to do

product Image dissappers after some time

i dnt why but when i upload an image in the create product, after some time i dont see the image again

can't add 'product' dependency in ProductEditScreen useHook()

Note: I clone this repo

When I add the product dependency in useEffect() it's just re-run the component multiple times. I don't know why it's not working, the same thing works in UserEditScreen. Please check this :)
Line:

proshop_mern/frontend/src/screens/ProductEditScreen.js

Line 53 in 4f47ea7

}, [dispatch, history, productId, product, successUpdate])

It's showing this error:
'This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
in ProductEditScreen (created by Context.Consumer)'

I could switch myself to admin

#1 If I am logged in and go to my localStorage in browser, then I can change myself to "isAdmin":true and then, I become an admin. Due to this, admin in navbar will appear. I cannot perform any admin actions though.

TypeError: Cannot read property '1' of null

Tested the Api for order by postman and encountered "TypeError: Cannot read property '1' of null" error

Why does it not show in google chrome but it shows on safari. QTY selector. and problems with localstorage or []

This is in chrome. I have various issues. For one I have the issue from above. It does not display anything for chrome. Then it is not updating the [] in applications > local storage and is not showing on state > tree. Is there any fixes? I am in lecture 33 (Add to functionality).

Repository: github.com/talmax1124/cduoshop

or you can email me at [email protected]

@basir @bradtraversy ?

Possible to get userLogin and userDetails out of sync after logout and login as another user

I noticed after the videos on the profile screen that if I log in as one user, log out, then log in as another user, the profile page has the second user displayed in the header and the first user's info displayed in the profile name and email fields. The 'profile updated' message also persists through logout.
I thought I had missed something on the ProfileScreen file, but it still happens after I copied/pasted the code from the repository and commented everything out that had to do with orders(since I had not reached that part of the course yet).

Edit: The name and email address do populate in the form correctly after the profile screen is refreshed, but not upon initial load if the user has changed since the last login.

Edit2: I looked more closely at the code in the completed project, and adding the USER_RESET_DETAILS functionality appears to have fixed it. Either I completely missed this the first time through, or it is added later in the course.

unable to add items to my states array(Unhandled Rejection (TypeError): Cannot read property 'find' of undefined)

i am trying to understand the add to cart functionality but when ever i run my codes i get these errors in my console

Unhandled Rejection (TypeError): Cannot read property 'find' of undefined

these are my code
cartReducer
`import {CART_ADD_ITEM} from '../constants/cartConstants'

export const cartReducer = (state = {cartItems:[]},action)=>{
switch(action.type){
case CART_ADD_ITEM:
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 === item.product? item : x)
}
} else {
return{
...state,
cartItems:[...state.cartItem,item]
}
}
default:
return state
}
}

`

cartAction

`import axios from "axios"
import {CART_ADD_ITEM} from '../constants/cartConstants'

export const addToCart = (id, qty) => async (dispatch, getState) => {
const { data } = await axios.get(api/products/${id})

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))
}

`

cart screen
`import React,{useEffect}from 'react'
import {LINK} 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} from '../actions/cartActions'

const CartScreen = ({ match,location,history }) => {
const productId = match.params.id
const qty = location.search ? Number(location.search.split('=')[1]):1
const dispatch = useDispatch()
useEffect(() =>{
dispatch(addToCart(productId,qty))
},[dispatch,productId,qty])

return (
    <div>
        cart
    </div>
)

}

export default CartScreen
`